プログラミング入門コースの全体の目次
基本的な文字の装飾を学ぼう
文字の装飾をする主なプロパティは、以下の通りです。
プロパティ | 説明 |
---|---|
color | 文字色を指定する |
font-size | 文字サイズを指定する |
font-weight | 文字の太さを指定する |
text-align | 文字の水平方向の位置を指定する |
text-decoration | 文字に装飾的な線を指定する |
font-family | 文字の書体を指定する |
よく使われるプロパティなので、1つ1つ確かめてみよう。
文字色を指定する
文字色は、color
プロパティで指定します。
色の指定は「カラーネーム」や「カラーコード」で行うことができます。
1
2
3
セレクタ {
color: 色;
}
カラーネームでは、red
やgreen
などの色の名前を指定し、カラーコードでは、色を#
に続く6桁の16進数で表記します。
1
2
3
4
5
6
7
セレクタ {
color: red; /* カラーネーム */
}
セレクタ {
color: #ff0000; /* カラーコード */
}
カラーコードの6桁は、2桁ずつがRGB(赤、緑、青)の色の強さを表しており、16進数の「0123456789ABCDEF」では、0が1番弱く、Fが1番強くなります。
16進数で6桁の英数字を組み合わせると、1,600万通り以上の色を表現することができるので、カラーコードは覚えようとせずにカラーコード表で確かめるようにしましょう。
以下のコードを編集して、color
プロパティで文字色を指定してみましょう。
See the Pen 文字色を指定する by miyajima yuya (@pikawaka) on CodePen.
文字のサイズを指定する
文字のサイズは、font-size
プロパティで指定します。
サイズの指定は、数値に「px」や「em」などの単位を追記します。
1
2
3
セレクタ {
font-size: サイズ;
}
pxによる指定
px
(pixels/ピクセル)は最も一般的な単位で、文字を表示したい高さのピクセル数です。他の要素に左右されることはありません。
1
2
3
4
5
6
7
<!DOCTYPE html>
<html>
<!-- head要素は省略 -->
<body>
<h1>CSS<span>Cascading Style Sheets</span></h1>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
html {
font-size: 16px;
}
h1 {
font-size: 32px; /* 32pxのまま */
}
span {
font-size: 16px; /* 16pxのまま */
}
1px
はコンピュータの画面などを表示する1つのドットに相当するので、直感的に使いやすく初学者におすすめの指定方法です。
ただしpx
は絶対値なので、ディスプレイ解像度によって端末ごとに見た目の文字サイズが異なることがあります。
emによる指定
em
(エム)は、基本的に親要素を基準に文字のサイズを計算する単位です。2em
であれば「親要素の文字サイズの2.0倍」のように相対的な比率となります。
親要素とは「その要素を含むすぐ上の階層にある要素のこと」で、以下のコードのh1
であれば、body
が親要素にあたります。
1
2
3
4
5
6
7
<!DOCTYPE html>
<html>
<!-- head要素は省略 -->
<body>
<h1>CSS<span>Cascading Style Sheets</span></h1>
</body>
</html>
以下のようにh1
の文字の大きさを2em
とした場合、親要素であるbody
の文字のサイズを求めますが、何も指定していないので、さらに上位の要素であるhtml
を求めます。
html
の文字サイズを基準にh1
の文字サイズが決まります。
2em
であれば「親要素の文字サイズの2.0倍」のように相対的な比率となるので、h1
の文字サイズは16×2=32
で32px
です。
1
2
3
4
5
6
7
html {
font-size: 16px;
}
h1 {
font-size: 2em; /* 32pxになる */
}
以下のようにspan
の文字サイズを0.5em
とした場合は、span
の親要素であるh1
の文字サイズが基準となります。
h1
の文字サイズは32px
なので、spanの文字サイズは32×0.5=16
で16px
です。
1
2
3
4
5
6
7
8
9
10
11
html {
font-size: 16px;
}
h1 {
font-size: 2em; /* 32pxになる */
}
span {
font-size: 0.5em; /* 16pxになる */
}
em
を使うことで、ある要素を基準として部分的にサイズを指定する場合に便利です。
文字の太さを指定する
文字の太さは、font-weight
プロパティで指定します。
1
2
3
セレクタ {
font-weight: 太さ;
}
文字の太さは、数値などでも細かく指定する方法がありますが、基本的にはbold
(太字)とnomal
(標準)の2段階以外のものを使用することはほとんどありません。
1
2
3
p {
font-weight: bold;
}
See the Pen p要素を太字にする場合 by miyajima yuya (@pikawaka) on CodePen.
文字の水平方向の位置を指定する
文字の水平方向の位置は、text-align
プロパティで指定します。
1
2
3
セレクタ {
text-align: 位置;
}
文字の位置は、left
(左揃え)・right
(右揃え)・center
(中央揃え)で指定します。なお、初期設定では左揃えで表示されます。
1
2
3
4
5
6
7
h1 {
text-align: center; /* 中央揃えにする */
}
p {
text-align: right; /* 右揃えにする */
}
See the Pen 文字の水平方向の位置を指定する by miyajima yuya (@pikawaka) on CodePen.
文字に装飾的な線を指定する
文字に線を引くには、text-decoration
プロパティで指定します。
1
2
3
セレクタ {
text-decoration: 線の種類;
}
線の種類は、underline
(下線)・overline
(上線)・line-through
(取り消し線)が指定できます。
1
2
3
4
5
6
7
h1 {
text-decoration: overline; /*上線を引く */
}
p {
text-decoration: underline; /*下線を引く */
}
See the Pen 文字に装飾的な線を指定する by miyajima yuya (@pikawaka) on CodePen.
上記のCSSを編集して、p
要素に取り消し線を引いてみましょう。
文字の書体を指定する
文字の書体は、font-family
プロパティで指定します。
「書体名」はダブルクォーテーション("
)、またはシングルクォーテーション('
)の引用符で囲むことが推奨されています。
1
2
3
セレクタ {
font-family: "書体名";
}
一般に文字の書体は、Webページ全体に対してまとめて適用するので、body
をセレクタとして記述します。
1
2
3
body {
font-family: "書体名";
}
基本的に複数の書体を指定する
書体は、Webページを閲覧するユーザー側の環境に依存します。ユーザーのパソコンに指定した書体が入っていなければ表示されず、代替の書体で表示されます。
多くの環境に対応できるように、基本的に複数の書体を指定する必要があります。
1
2
3
body {
font-family: "メイリオ", "MSゴシック", "ヒラギノ明朝"; /* カンマで区切る */
}
複数の書体を指定する場合は、前に記述する書体から優先的に適用されます。
前に欧文書体を記述する
font-family
プロパティでは、前に記述する書体から優先的に適用されるため、英語部分に欧文書体、日本語部分に日本語書体を使いたい場合は、前に欧文書体を記述します。
例えば、英語部分にHelvetica
という欧文書体、日本語部分にヒラギノ明朝 ProN
という日本語書体を使う場合は、以下のように記述します。
Helvetica
をヒラギノ明朝 ProN
よりも前に記述したことで、以下のように英語部分にはHelvetica
が優先的に適用されます。
誤って日本語書体を前に記述した場合は、以下のように英語部分もヒラギノ明朝 ProN
が適用されてしまうので、書体を記述する順番には気をつけましょう。
最後に総称名を記述する
font-family
プロパティ値の最後には、書体の「総称名」を記述します。
総称名は、ユーザーのパソコンに指定した書体がどれも入っていなければ、せめてどの系統の書体を表示させたいのかをWebブラウザに伝えるためのものです。
1
2
3
body {
font-family: "書体名1", "書体名2" 総称名;
}
「書体名」はダブルクォーテーション("
)、またはシングルクォーテーション('
)の引用符で囲みましたが、「総称名」は引用符で囲わないので注意してください。
1
2
3
body {
font-family: "メイリオ", "MSゴシック", "ヒラギノ明朝", serif;
}
総称名は、以下の表のように5種類あります。
総称名 | 説明 |
---|---|
serif | 明朝体のような書体 |
sans-serif | ゴシック体のような書体 |
cursive | 筆記体のような書体 |
fantasy | 装飾が施されている書体 |
monospace | 等間隔に文字が配置される等幅書体 |
総称名にserif
を記述すると、通常はOSやブラウザごとにデフォルトで設定された明朝体系の書体が自動的に適用されます。
スタイルの継承について理解しよう
CSSには、スタイルが親要素から子要素へ引き継がれる(継承)プロパティがあります。
一般例として継承するプロパティには、colorプロパティが挙げられます。
次のCSSでは、span
要素の文字色がcolor
プロパティで青に指定されます。
See the Pen 継承の例1 by miyajima yuya (@pikawaka) on CodePen.
継承を学習する前であれば、p
要素の文字色も青にする場合は、span
要素と同じようにスタイルを指定したかもしれません。
1
2
3
4
5
6
7
p {
color: blue;
}
span {
color: blue;
}
しかし、color
プロパティは継承する(親要素のスタイルを子要素に引き継ぐ)ことができるプロパティなので、親要素であるp
要素に文字色を指定するだけでspan
要素にも反映されます。
以下のCSSのようにspan
要素のスタイル指定は不要です。
See the Pen 継承の例2 by miyajima yuya (@pikawaka) on CodePen.
継承するプロパティ
継承する主なプロパティは、以下の表の通りです。
継承できるプロパティ | 説明 |
---|---|
color | 文字色を指定する |
font-size | 文字サイズを指定する |
font-weight | 文字の太さを指定する |
text-align | 文字の水平方向の位置を指定する |
text-decoration | 文字に装飾的な線を指定する |
font-family | 文字の書体を指定する |
基本的な文字の装飾で学習したプロパティですね。
上記のほかにも、継承するプロパティには、文字の行間を調整するline-height
プロパティや文字の字間を調整するletter-spacing
プロパティがあります。
継承しないプロパティ
CSSのプロパティは、全て継承するプロパティではありません。
例として継承しないプロパティには、要素の境界に枠線を指定するborder
プロパティが挙げられます。次のCSSでは、span
要素にborder
プロパティで実線が指定されます。
See the Pen 継承の例3 by miyajima yuya (@pikawaka) on CodePen.
上記では、span
要素の境界だけに実線が引かれていますね。
border
プロパティは継承されないので、次のようにCSSでspan
要素の親要素であるp
要素に指定してもspan
要素には反映されません。
See the Pen 継承の例4 by miyajima yuya (@pikawaka) on CodePen.
p
要素とspan
要素の境界に実線を引く場合は、以下のCSSのように各要素に対してborder
プロパティで指定する必要があります。
See the Pen 継承の例5 by miyajima yuya (@pikawaka) on CodePen.
継承しないプロパティは、上記のborder
プロパティ以外にも、これから学習するボックスモデルのプロパティ・display
プロパティがあります。
現段階では、継承しないプロパティもあるということだけ覚えておこう
この章のまとめ
重要なポイントをおさえよう!
- カラーコードの6桁は、2桁ずつがRGB(赤、緑、青)の色の強さを表す
- CSSには、スタイルが親要素から子要素へ引き継がれる(継承)プロパティがある
- 継承できるプロパティは、親要素に指定すると子要素にも反映される