CSS ポッドキャスト - 036: テキストとタイポグラフィ
テキストはウェブの中核的な構成要素の 1 つです。
ウェブサイトを作成する際に、テキストのスタイルを設定する必要はありません。HTML には、実際には妥当なデフォルトのスタイルが用意されています。
ただし、テキストはウェブサイトの大部分を占める可能性が高いため、スタイルを加えて見やすくすることをおすすめします。いくつかの基本的なプロパティを変更することで、ユーザーの読書エクスペリエンスを大幅に向上させることができます。
このモジュールでは、まず font-family、font-style、font-weight、font-size など、CSS の基本的なフォント プロパティについて説明します。次に、テキストの段落に影響するプロパティ（text-indent や word-spacing など）を詳しく見ていきます。最後に、可変フォントや疑似要素など、より高度なトピックについて説明します。
書体を変更する
テキストの書体を変更するには、font-family を使用します。
font-family プロパティには、特定のフォント ファミリーまたは汎用のフォント ファミリーを参照する文字列のカンマ区切りリストを指定できます。「Helvetica」、「EB Garamond」、「Times New Roman」のように、特定のフォント ファミリーは引用符で囲まれた文字列です。汎用フォント ファミリーは、serif、sans-serif、monospace などのキーワードです（MDN のオプションの一覧をご覧ください）。ブラウザは、指定されたリストから最初に利用可能な書体を表示します。
font-family を使用する際は、ユーザーのブラウザで希望のフォントを利用できない場合に備え、汎用フォント ファミリーを少なくとも 1 つ指定する必要があります。通常、代替の汎用フォント ファミリーは優先フォントと同様になります。font-family: "Helvetica"（Sans-Serif フォント ファミリー）を使用する場合、代替フォントは sans-serif にする必要があります。
斜体や斜体を使用する
font-style を使用して、テキストを斜体にするかどうかを設定します。font-style には、normal、italic、oblique のいずれかのキーワードを指定できます。
テキストを太字にする
font-weight を使用して、テキストの「太字」を設定します。このプロパティには、キーワード値（normal、bold）、相対キーワード値（lighter、bolder）、数値（100～900）を指定できます。
キーワード normal と bold は、それぞれ 400 と 700 の数値と同じです。
キーワード lighter と bolder は親要素を基準にして計算されます。この値の決定方法を示した便利なチャートについては、MDN の相対重みの意味をご覧ください。
テキストのサイズを変更する
テキスト要素のサイズを制御するには、font-size を使用します。このプロパティには、長さの値、パーセンテージ、少数のキーワードの値を指定できます。
font-size は、長さとパーセンテージの値に加えて、いくつかのキーワード値（xx-small、x-small、small、medium、large、x-large、xx-large）といくつかの相対キーワード値（smaller、larger）を受け入れます。相対値は、親要素の font-size を基準とします。
行間のスペースを変更します
要素内の各行の高さを指定するには、line-height を使用します。このプロパティには、数値、長さ、パーセンテージ、またはキーワード normal のいずれかを指定できます。一般に、継承による問題を避けるため、長さや割合ではなく数値を使用することをおすすめします。
文字間のスペースを変更する
letter-spacing を使用して、テキスト内の文字間の水平方向のスペースの量を制御します。このプロパティは、em、px、rem などの長さの値を受け入れます。
この値を指定すると、文字間の自然なスペースが大きくなることに注意してください。以下のデモでは、個々の文字を選択して、レターボックスのサイズと letter-spacing による変化を確認してみましょう。
単語間のスペースを変更する
word-spacing を使用すると、テキスト内の単語間のスペースを増減できます。このプロパティは、em、px、rem などの長さの値を受け入れます。指定する長さは、通常のスペースに加えて余分なスペースを補うものです。つまり、word-spacing: 0 は word-spacing: normal と同等です。
font 省略形
省略形の font プロパティを使用すると、フォント関連の多数のプロパティを一度に設定できます。指定できるプロパティは、font-family、font-size、font-stretch、font-style、font-variant、font-weight、line-height です。
これらの宿泊施設の注文方法について詳しくは、MDN の font の記事をご覧ください。
テキストの大文字/小文字を変更する
text-transform を使用すると、元の HTML を変更することなく、テキストの大文字と小文字の使い方を変更できます。このプロパティでは、uppercase、lowercase、capitalize のキーワード値を使用できます。
テキストに下線、上線、斜線を追加する
text-decoration を使用してテキストに行を追加します。下線が一般的に使用されますが、テキストの上または右に行を追加することもできます。
text-decoration プロパティは、以下で説明するより具体的なプロパティの省略形です。
text-decoration-line プロパティには、キーワード underline、overline、line-through を指定できます。複数の行に複数のキーワードを指定することもできます。
text-decoration-color プロパティは、text-decoration-line からのすべての装飾の色を設定します。
text-decoration-style プロパティは、キーワード solid、double、dotted、dashed、wavy を受け入れます。
text-decoration-thickness プロパティは、任意の長さの値を受け取り、text-decoration-line からすべての装飾のストローク幅を設定します。
text-decoration プロパティは、上記のすべてのプロパティの省略形です。
テキストにインデントを追加する
text-indent を使用して、テキスト ブロックをインデントします。このプロパティは、長さ（10px、2em など）または含まれるブロックの幅に対する割合（%）で指定します。
はみ出したコンテンツや隠れたコンテンツに対処する
非表示コンテンツの表現方法を指定するには、text-overflow を使用します。オプションは、オーバーフロー箇所でテキストを切り捨てる clip（デフォルト）と、オーバーフロー箇所に省略記号（...）を表示する ellipsis の 2 つのオプションです。
空白文字を制御する
white-space プロパティは、要素内の空白文字の処理方法を指定するために使用します。詳しくは、MDN の white-space に関する記事をご覧ください。
white-space: pre は、ASCII アートや慎重にインデントされたコードブロックのレンダリングに役立ちます。
単語の区切りを制御する
word-break を使用して、行をオーバーフローさせるときの単語の「区切り」を変更します。デフォルトでは、ブラウザは単語を分割しません。word-break にキーワード値 break-all を使用すると、ブラウザは必要に応じて個々の文字で単語を区切ります。
テキストの配置を変更
text-align を使用すると、ブロック要素または表のセル要素内のテキストの水平方向の配置を指定できます。このプロパティは、キーワード値 left、right、start、end、center、justify、match-parent を受け入れます。
値 left と right は、テキストをブロックの左側と右側に揃えます。
start と end を使用して、現在の入力モードでのテキスト行の開始位置と終了位置を表します。そのため、start は英語では left、アラビア語では右から左（RTL）に記述する文字では right にマッピングされます。これらは論理アライメントです。詳しくは、論理プロパティ モジュールをご覧ください。
center を使用して、テキストをブロックの中央に揃えます。
justify の値を指定すると、テキストが整理され、テキストがブロックの左右の端に揃うように単語の間隔が自動的に変更されます。
テキストの向きを変更する
direction を使用して、テキストの向きを ltr（左から右、デフォルト）または rtl（右から左）に設定します。アラビア語、ヘブライ語、ペルシャ語などの一部の言語は右から左に記述するため、direction: rtl を使用してください。英語と、その他すべての左から右に記述する言語の場合は、direction: ltr を使用します。
テキストのフローを変更する
テキストの配置や配置を変更するには、writing-mode を使用します。デフォルトは horizontal-tb ですが、テキストを水平方向に流すために writing-mode を vertical-lr または vertical-rl に設定することもできます。
テキストの向きを変更する
text-orientation を使用して、テキスト内の文字の向きを指定します。このプロパティの有効な値は mixed と upright です。このプロパティは、writing-mode が horizontal-tb 以外に設定されている場合のみ関連します。
テキストに影を追加する
テキストに影を追加するには、text-shadow を使用します。このプロパティには、3 つの長さ（x-offset、y-offset、blur-radius）と色が必要です。
詳しくは、シャドウに関するモジュールの text-shadow セクションをご覧ください。
可変フォント
通常、「標準」フォントでは、太字、斜体、簡易など、書体のバージョンごとに異なるファイルをインポートする必要があります。可変フォントとは、さまざまな書体のバリエーションを 1 つのファイルに含めることができるフォントです。
詳しくは、可変フォントに関する記事をご覧ください。
疑似要素
::first-letter 疑似要素と ::first-line 疑似要素
::first-letter 疑似要素と ::first-line 疑似要素は、それぞれテキスト要素の最初の文字と 1 行目をターゲットにします。
::selection 疑似要素
::selection 疑似要素を使用すると、ユーザーが選択したテキストの外観を変更できます。
この疑似要素を使用する場合、特定の CSS プロパティ（color、background-color、text-decoration、text-shadow、stroke-color、fill-color、stroke-width）のみを使用できます。
font-variant
font-variant プロパティは、さまざまな CSS プロパティの省略形であり、small-caps や slashed-zero などのフォント バリエーションを選択できます。この省略形に含まれている CSS プロパティは、font-variant-alternates、font-variant-caps、font-variant-east-asian、font-variant-ligatures、font-variant-numeric です。使用方法の詳細については、各プロパティのリンクをご覧ください。
理解度チェック
ウェブのタイポグラフィに関する知識をテストします
font-family の一般的な代替として使用できるキーワードは次のうちどれですか。
serifmonospaceitalicitalic は font-style の有効なキーワードです。font-family ではありません。sci-fifantasy は font-family の有効な汎用的なフォールバックです。sans-serifhelvetica"Helvetica" は一般的なキーワードではなく、特定のフォント ファミリーを指します。各単語の最初の文字を大文字に変換するために使用する文はどれですか。例: This is a sentence. ➡ This Is A Sentence.
text-capitalize: true;text-case: capitalize;text-transform: capitalize;font-style: capitals;font-variant: capitalize;正誤問題: text-orientation を使用してテキストを左、右、または中央に揃える。
text-orientation は、直線内の文字の回転を変更します。テキスト行間のスペースを変更するには、次の CSS プロパティを使用します。
line-spacingbaseline-distanceline-height関連情報
- フォントに関するおすすめの方法では、フォントのインポート、フォントのレンダリング、ウェブでフォントを使用するためのその他のおすすめの方法について説明します。
- MDN Fundamental のテキストとフォントのスタイル設定。