はじめに
この記事では、CSSの基本的なプロパティの中でもテキストのスタイリングでよく使われるプロパティについてご紹介します。
使い方や注意点、便利な使い方などについて解説しますが、一度に全てを覚える必要はありません。「こうしたい時はどのプロパティを使えばいいんだっけ？」となった時に調べられるよう、何が出来るかに重点を置くと良いでしょう。
この記事の対象者
- ウェブ制作を基礎から学びたい人
- CSSの基本について学びたい方
- テキストのスタイリングについて学びたい方
この記事の目標
- 特定の要素にフォントを指定できる
- テキストの太さ・色・大きさを変更できる
- テキストの配置を変更できる
- テキストの行間・字間を調整できる
この記事で使用するCSSプロパティ
- font-family
- font-size
- font-weight
- color
- text-align
- line-height
- letter-spacing
テキストでよく使うプロパティ
テキストはウェブページの中で重要なコンテンツの一部です。テキストのスタイルを適切に設定することで、読みやすさやデザインの一貫性を向上させることができます。テキストに関連するプロパティについて、使い方や注意点、便利な使い方などを解説します。
font-family
テキストのフォントを指定します。複数のフォントを指定し、ユーザー環境によって先頭から順番にマッチするフォントが探索されます。末尾には総称フォントという、特定のフォント名を持たないもの（sans-serif, serif, cursive, monospaceなど）を指定することが一般的です。
font-familyが指定されていなければユーザーエージェントスタイルシートが適用されます。また、font-familyの値は子孫要素に継承されるので、body要素に指定することでウェブサイト全体の基本フォントを設定することができます。
body {
font-family: Verdana, Meiryo, "Hiragino Kaku Gothic ProN", sans-serif;
}font-size
文字の大きさを指定します。px値以外にも様々な単位で指定することができます。
- px： 絶対値として指定
- em：親要素のフォントサイズからの相対値
- rem：html要素のフォントサイズからの相対値
以下はemとremの違いの例です。
html {
font-size: 16px;
}
.txt-wrap {
font-size: 20px;
}
.txt-wrap > .txt {
font-size: 1em; // 結果:20px
font-size: 1rem; // 結果:16px
}「.txt-wrap > .txt」の記述は「.txt-wrap直下の.txt」を指定するためのセレクタです。つまり、.txtから見たら.txt-wrapが親要素になります。
emは親要素のfont-sizeの相対値を算出します。1emで100%なので、.txt-wrapと同じ20pxになります。
また、remはhtmlのfont-sizeの相対値を算出するので、この例では1remでhtmlと同じ16pxということになります。
emは親要素にfont-sizeが設定されていない場合、更にその親の要素を基準にします。いずれにも指定が無ければ最終的にHTMLの値を基準にすることになり、remと同じ結果になります。
html {
font-size: 16px;
}
.txt-wrap {
font-size: 20px;
}
.txt {
font-size: 1em; // 16px
font-size: 1rem; // 16px
}この例では、.txt-wrapにはfont-sizeの指定がしてありますが、.txtが.txt-wrapの子要素でない場合はhtmlのfont-sizeが基準になるのでemとremは同じになります。
他にもvwやvh等が使えますが、font-sizeの値として適切に扱うには工夫が必要なのでここでは割愛します。
font-weight
文字の太さを指定します。一般的にはnormalやboldの値を使用することが多いですが、100から900の数値で指定することもできます（1と10の位は切り上げられます）。数値指定の場合、400がnormalに、700がboldに該当します。
font-weightの値が低すぎると視力の弱い方にとって読みづらくなっていしまい、ユーザビリティを損なう可能性があります。
また、使用しているフォントが指定したい値に対応していない場合はfont-weightは効かないので注意が必要です。
font-weight: 100;
font-weight: 101; // 200と解釈される
font-weight: 300;
font-weight: 400; // normalと同じ
font-weight: 500;
font-weight: 600;
font-weight: 700; // boldと同じ
font-weight: 800;
font-weight: 900;color
テキストの色を指定します。redなどの色名やRGB値、HEXコード（#0000000など、カラーコードとも言われます）で指定できます。ウェブ制作では基本的にデザインカンプから色の値を読み取りますが、一般的にはHEXコードが使用されます。
HEXコードは6桁の16進数でRGB値を表現します。#から始まり、赤、緑、青の3色をそれぞれ2桁で表し、各桁は0～fの値が入ります。各色は16進数の2桁なので16×16で0～255通りの表現ができ、6桁で1677万7216色（フルカラー）を扱うことができます。
/* 色名 */
color: red; // 赤
color: green; // 緑
color: blue; // 青
/* RGB値 */
color: rgb(255, 0, 0); // 赤
color: rgb(0, 255, 0); // 緑
color: rgb(0. 0. 255); // 青
/* HEXコード */
color: #ff0000; // 赤
color: #00ff00; // 緑
color: #0000ff; // 青また、RGB値やHEXコードでの指定ではアルファ値（透明度）を表現することもできます。
/* RGB値 */
color: rgba(255, 0, 0, 0); // 透明
color: rgba(255, 0, 0, 0.5); // 半透明の赤
color: rgba(255, 0, 0, 1) // 赤
/* HEXコード */
color: #ff000000; // 透明
color: #ff000080; // 半透明の赤
color: #ff0000ff; // 赤また、colorは子孫要素にも継承されるので、body要素に対して指定することでウェブサイト全体の文字色を設定することもできます。
body {
color: #030303;
font-family: Verdana, Meiryo, "Hiragino Kaku Gothic ProN", sans-serif;
}text-align
テキストの水平方向の配置を指定します。初期値は左寄せでleftとなっていますが、center、rightと指定することで中央寄せや右寄せにすることができます。
/* 左寄せ */
.txt-left {
text-align: left;
}
/* 中央寄せ */
.txt-center {
text-align: center;
}
/* 右寄せ */
.txt-right {
text-align: right;
}CSSにはブロック要素とインライン要素という概念があり、HTMLの要素のほとんどはいずれかに分類されます。
text-alignはブロック要素に指定するプロパティなので、テキストなどに部分的に意味を持たせるstrongやspanなどのインライン要素に指定しても効きません。
<p><span>テキストが入ります。</span></p>/* 以下は効きません */
span {
text-align: center;
}
/* 以下は効きます */
p {
text-align: center;
}また、text-alignは指定した要素の子孫要素全てに継承されます。
<section class="section-wrap">
<h2>中央寄せになります。</h2>
<p>中央寄せになります。</p>
<section>
<h3>中央寄せになります。</h3>
<p>中央寄せになります。</p>
</section>
</section>
<p>このテキストは中央寄せになりません。</p>.section-wrap {
text-align: center;
}この例では、text-alignを指定している要素は.section-wrapのみですが、実際に表示すると子孫要素であるpやh2、h3、全てが中央寄せになります。また、.section-wrapの外側にあるp要素には適用されません。
継承を利用することでCSSの記述を減らすことができますが、要素毎に継承される全てのプロパティを把握することは困難なので予期せぬ表示崩れを招く可能性があります。コーディングは常に分かりやすさが求められるので、継承を利用する際は保守性を考える必要があることに注意しましょう。
line-height
行の高さを指定します。デフォルトの値はnormalで、ブラウザのユーザーエージェントスタイルシートに依存します。値は数値やem、%で指定できますが、emや%は予期せぬ表示崩れを起こす可能性があるので使用せず、一般的には数値で指定します。
数値指定はその要素のfont-sizeの値を基準にし、1であればfont-sizeと同じ高さになり、2ならfont-sizeの2倍になります。通常の段落であればアクセシビリティに配慮して1.5以上に指定すると読みやすい高さになります。
p {
font-size: 16px;
line-height: 1.5; // 高さは24pxになります
}この例では、font-sizeが16pxなので各行は上下に4pxの余白を作り、行間は8pxになります。
line-heightを行間指定と認識している方もいますが、あくまでも行の高さを指定するプロパティなので一番上の行にも4pxの余白ができることに注意しましょう。
また、line-heightは子孫要素にも継承されるので、body要素に記述することでウェブサイト全体の基準値を設定することができます。
body {
color: #030303;
font-family: Verdana, Meiryo, "Hiragino Kaku Gothic ProN", sans-serif;
line-height: 1.5;
}letter-spacing
文字間を指定します。デフォルトの値はnormalで、フォントの種類にもよりますが通常は読みやすいように適度に余白を持って表示されます。pxやemで値を指定することで、デフォルトの文字間を調整することができます。
p {
font-size: 16px;
letter-spacing: 0.2em; // 文字間を通常より3.2px広げます
}emの単位を指定すると、その要素のfont-sizeを基準に余白が計算されます。この例では、font-sizeが16pxなので0.2emの値は3.2pxと指定した場合と同じになります。
また、letter-spacingも子孫要素に継承されますが、emの単位を指定した場合、px値に計算された後の数値が継承されるので注意しなければいけません。
body {
font-size: 16px;
letter-spacing: 0.1em;
}この例では、font-sizeの16pxを基準として計算され、1.6pxが調整値になります。
この1.6pxという値は、段落や見出しなどbody内の全ての要素のletter-spacingに適用されます。文字間のバランスを崩す可能性があり、求めるスタイリングでもないと思うので注意しましょう。
ちなみに、要素毎のfont-sizeを基準にemの計算を行う場合は全称セレクタを使用することで実現できます。
* {
letter-spacing: 0.1em;
}最後に
CSSで使用される基本的なプロパティとして、テキストのスタイリングでよく使われるものについてご紹介しました。
この記事を読んで気付いた方もいるかもしれませんが、今回ご紹介したプロパティは全て子孫要素に継承されます。その中でも、letter-spacingの継承は相対値ではなく絶対値になってしまうので扱いには注意が必要です。
また、全称セレクタでの指定方法をご紹介しましたが、このセレクタは全ての要素にスタイルを当てるものなので多様すると混乱を招く恐れがあります。
テキスト関連のプロパティには他にも、テキストに影をつけるtext-shadowやインデントを入れるtext-indent、下線や打ち消し線を入れるtext-decorationなどがあります。使用頻度としてはそれほど多くないのでここでは割愛しましたが、気になる方は調べてみると良いでしょう。