【CSS】文字に関するプロパティ
フォント
color
文字色に関するプロパティです。 色についてはこちらの記事を参考にしてください。
color: red;
color: #0000ff;あいうえお
あいうえお
font-size
文字の大きさに関するプロパティです。 サイズの指定についてはこちらの記事を参考にしてください。
font-size: 20px;
font-size: 2em;あいうえお
あいうえお
font-family
フォントの種類に関するプロパティです。 カンマ区切りで複数指定することができます。 この場合、デバイスあるいは文字自体が対応していないフォントの場合は、次に指定したフォントが適用されるようになります。 最後には必ず総称ファミリ名を指定します。
font-family: 'メイリオ', sans-serif;
font-family: 'ＭＳ Ｐ明朝', serif;あいうえお
あいうえお
総称ファミリ名とは、フォントのカテゴリーのようなものです。 総称ファミリ名を最後に指定することで、デバイスで使用されているそのカテゴリーのフォントが適用されるようになります。
総称ファミリ名には以下のようなものがあります。
| 総称ファミリ名 | 説明 | サンプル |
|---|---|---|
sans-serif | ゴシック体 | 12345 abcde ABCDE あいうえお |
serif | 明朝体 | 12345 abcde ABCDE あいうえお |
monospace | 等幅 | 12345 abcde ABCDE あいうえお |
fantasy | 装飾体 | 12345 abcde ABCDE あいうえお |
cursive | 筆記体 | 12345 abcde ABCDE あいうえお |
font-familyには、Google Fontsのような WEB フォントを指定することができます。
WEB フォントについては、ここでは割愛します。
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300&display=swap" rel="stylesheet">font-family: 'Noto Sans JP', sans-serif;font-weight
文字の太さに関するプロパティです。 文字の太さは 100〜900 の 100 単位の数値またはその数値に関連付けられた名称で指定します。
| 値 | 名称 |
|---|---|
| 100 | thin |
| 200 | extra light |
| 300 | light |
| 400 | normal |
| 500 | medium |
| 600 | semi bold |
| 700 | bold |
| 800 | extra bold |
| 900 | black |
font-weight: 500;
font-weight: bold;あいうえお
あいうえお
フォントによってはすべての値（太さ）に対応していない場合があります。 その場合は近い値が選ばれるようになっています。
その他の値として、bolderとlighterを指定することができます。
これは現在の太さに対し、次に太い太さ、次に細い太さとなります。
font-style
フォントスタイルに関するプロパティで、イタリック体（italic）と斜体（oblique）を指定できます。
2 つは正確には違うものですが、ほとんどのフォントで違いがないためどちらかを覚えておけばよいと思います。
font-style: italic;
font-style: oblique;abcdefg ABCDEFG
abcdefg ABCDEFG
高さ・幅
line-height
行の高さに関するプロパティです。
pxのような単位の他に、単位なしの数値を指定することができます。
この場合は、フォントサイズに対する割合となります。
line-height: 2;
line-height: 18px;寿限無、寿限無、五劫擦すり切きれ、海砂利水魚の、水行末・雲来末・風来末、 喰う寝る処ところに住む処ところ、藪柑子の藪柑子、パイポ・パイポ・パイポのシューリンガン、 シューリンガンのグーリンダイ、グーリンダイのポンポコピーのポンポコナの、長久命の長助
寿限無、寿限無、五劫擦すり切きれ、海砂利水魚の、水行末・雲来末・風来末、 喰う寝る処ところに住む処ところ、藪柑子の藪柑子、パイポ・パイポ・パイポのシューリンガン、 シューリンガンのグーリンダイ、グーリンダイのポンポコピーのポンポコナの、長久命の長助
letter-spacing
字間のスペース幅に関するプロパティです。
pxなどの長さを指定します。
letter-spacing: 10px;寿限無、寿限無、五劫擦すり切きれ、海砂利水魚の、水行末・雲来末・風来末、 喰う寝る処ところに住む処ところ、藪柑子の藪柑子、パイポ・パイポ・パイポのシューリンガン、 シューリンガンのグーリンダイ、グーリンダイのポンポコピーのポンポコナの、長久命の長助
word-spacing
単語間のスペース幅に関するプロパティです。
pxなどの長さを指定します。
日本語には対応していません。
word-spacing: 2px;
word-spacing: 10px;I stand here today humbled by the task before us, grateful for the trust you have bestowed, mindful of the sacrifices borne by our ancestors. I thank President Bush for his service to our nation, as well as the generosity and cooperation he has shown throughout this transition.
I stand here today humbled by the task before us, grateful for the trust you have bestowed, mindful of the sacrifices borne by our ancestors. I thank President Bush for his service to our nation, as well as the generosity and cooperation he has shown throughout this transition.
位置
text-align
文字の水平方向の位置に関するプロパティです。 以下の値で文字位置を指定します。
text-align: center;| 値 | 説明 | サンプル |
|---|---|---|
left | 左寄せ | What do you like to do in your free time? |
center | 中央寄せ | What do you like to do in your free time? |
right | 右寄せ | What do you like to do in your free time? |
justify | 最終行以外は両端に合わせるように単語間（字間）のスペースを広げる | What do you like to do in your free time? |
vertical-align
文字の垂直方向の位置に関するプロパティです。
同一インライン上で、サイズの違う文字や画像を並べる際に使用し、以下の値またはpxなどの長さを指定します。
基準となるのは、親要素の文字サイズ、行の高さとなります。
<div>
<span>Text<sup>t</sup><sub>t</sub></span>
<span style="font-size: 1.5em; vertical-align: xxx">Text</span>
<span style="font-size: 0.5em; vertical-align: xxx">Text</span>
</div>| 値 | 説明 | サンプル |
|---|---|---|
base-line | ベースラインに合わせる | TextttTextText |
top | 行の上端に合わせる | TextttTextText |
bottom | 行の下端に合わせる | TextttTextText |
text-top | 文字の上端に合わせる | TextttTextText |
text-bottom | 文字の下端に合わせる | TextttTextText |
super | 上付き文字（<sup>）のベースラインに合わせる | TextttTextText |
sub | 下付き文字（<sub>）のベースラインに合わせる | TextttTextText |
middle | ベースライン + x-height/2 に合わせる※1 | TextttTextText |
※1 x-height は、文字「x」の高さのこと
またvertical-alignは、表のセルの垂直方向の位置調整にも使用できます。
| Top | Middle | Bottom |
折り返し
overflow-wrap
要素内の文字の折り返しに関するプロパティです。 通常、文字の折り返しは単語の区切りで行われますが、長い単語や URL などは折り返されず、文字が要素から溢れる場合があります。
単語の区切りではなく、要素内に収まるようにするには以下のようにプロパティを指定します。
デフォルトの値はnormalとなっています。
overflow-wrap: break-word;
/* または */
overflow-wrap: anywhere;white-space
ホワイトスペースに関するプロパティです。 ホワイトスペースとは、スペース、タブ、改行のことをひとまとめにした言い方です。
通常 HTML では、連続する半角スペースは 1 つにまとめられたり、改行は無視されます。
これらの設定を変更するのがwhite-spaceになります。
white-space: normal;white-spaceには以下の値と効果があります。
| 値 | 改行 | 空白（タブ） | 折り返し | 行末の空白 |
|---|---|---|---|---|
normal | 無効 | まとまる | あり | 除去 |
nowrap | 無効 | まとまる | なし | 除去 |
pre | 有効 | そのまま | なし | そのまま |
pre-wrap | 有効 | そのまま | あり | そのまま（折り返さない） |
pre-line | 有効 | まとまる | あり | 除去 |
break-spaces | 有効 | そのまま | あり | そのまま（折り返す） |
<!-- butの末尾に空白あり -->
<div style="white-space: xxx;">
Remote work is becoming more common in Tokyo,
but
there has been little progress in much of the rest of Japan.
</div>normal
nowrap
pre
pre-wrap
pre-line
break-spaces
text-overflow
文字（文章）の省略に関するプロパティです。
以下のように、white-spaceとoverflowを組み合わせることにより、文字が 1 行に収まるよう溢れた文字を...に省略します。
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;装飾
text-decoration
下線など文字に追加する線に関するプロパティです。
text-decorationは以下の 4 つのプロパティをまとめたものになります。
text-decoration: <text-decoration-line> || <text-decoration-style> || <text-decoration-color> || <text-decoration-thickness>text-decoration-line
線の種類に関するプロパティで、以下の値を設定します。
text-decoration-line: none;| 値 | 説明 | サンプル |
|---|---|---|
none | 線なし | Hello |
underline | 下線 | Hello |
overline | 上線 | Hello |
line-through | 取消線 | Hello |
値は複数指定することも可能です。
text-decoration-line: underline overline;text-decoration-color
線の色を設定します。
text-decoration-color: red;text-decoration-style
線のスタイルに関するプロパティで、以下の値を設定します。
text-decoration-style: solid;| 値 | 説明 | サンプル |
|---|---|---|
solid | 直線 | Hello |
double | 二重線 | Hello |
dotted | 点線 | Hello |
dashed | 破線 | Hello |
wavy | 波線 | Hello |
text-decoration-thickness
線の太さを設定します。
値にはpxなどの長さや%を指定します。
%は1emを100%とした太さとなります。
text-decoration-thickness: 2px;
text-decoration-thickness: 50%;また特別にfrom-fontという値を指定できます。
これは、フォント自体にtext-decorationに関する情報が含まれている場合はその情報を使用するという設定になります。
情報が存在しない場合はデフォルトの値となります。
サンプル
text-decorationは以下のように上記のプロパティをまとめて指定します。
text-decoration: underline green wavy 3px;
text-decoration: underline overline orange dashed;Hello
text-shadow
文字の影に関するプロパティです。 値には、水平方向、垂直方向、ぼかし、色を順に指定します。
text-shadow: 3px 5px 4px cyan;カンマで区切ることで、複数の影を設定することができます。
text-shadow: 3px 5px 4px cyan, -3px -5px 4px pink;