The CSS Podcast - 036: Text & Typography
テキストはウェブの核となる構成要素の 1 つです。
ウェブサイトを作成するとき、必ずしもテキストのスタイルを設定する必要はありません。HTML にはかなり合理的なデフォルトのスタイルがあります。
ただし、ウェブサイトの大部分はテキストで占められる可能性が高いため、スタイルを追加して仕上げることは価値があります。基本的なプロパティをいくつか変更することで、ユーザーにとって読みやすさが大幅に向上します。
このモジュールでは、カスタム フォントをウェブページにインポートする @font-face ルールについて説明します。これにより、ユーザーがインストールしたフォントに関係なく、必要とする正確なタイポグラフィを使用できます。
その後、font-family、font-style、font-weight、font-size などの基本的な CSS フォント プロパティについて説明します。これらの基本事項によって、テキストのスタイルと読みやすさを両立させることができます。
また、text-indent や word-spacing などの段落固有のプロパティにも触れてから、変数フォントや疑似要素などの高度なトピックで締めくくります。これにより、タイポグラフィの制御をさらに洗練させることができます。
これらの CSS 手法の理解と応用を確かなものにするために、実践的な例とヒントを全体的に紹介しています。
@font-face ルール
@font-face CSS At-Rule はウェブデザインの重要な機能であり、カスタム フォントを指定してテキストを表示できます。@font-face の優れた点は、その汎用性です。リモート サーバーや、ユーザーのデバイスにインストールされているフォントからフォントを調達できます。
構文
@font-face {
font-family: "Trickster";
src:
local("Trickster"),
url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1),
url("trickster-outline.otf") format("opentype"),
url("trickster-outline.woff") format("woff")
}
記述子
ascent-override- 上昇指標をカスタマイズし、ベースラインより上のスペースに影響します。
descent-override- 降下指標を調整して、ベースラインの下のスペースに影響���ます。
font-display- ダウンロード ステータスに応じてフォントの表示動作を制御します。
font-family- フォント関連のプロパティで使用するフォントに名前を付けます。
font-stretch- 許容可能な水平方向のスケーリングを 1 つの値または範囲で設定します。
font-style- フォント スタイルを定義し、傾斜スタイルの角度範囲をサポートします。
font-weight- フォントの太さ、または使用可能な太さの範囲を指定します。
font-feature-settings- OpenType フォント機能へのアクセスを有効にします。
font-variation-settings- 可変フォント設定を微調整できます。
line-gap-override- フォントのデフォルトの線間隔をオーバーライドします。
size-adjust- フォントのアウトラインと指標にスケーリング ファクタを適用します。
src- フォントソース（ローカルまたはリモート）を定義します。これは、
@font-faceルールに必要です。src内でurl()とlocal()を組み合わせる方法は、ローカル フォントを使用できる場合はそれを使用し、フォールバックとしてリモート フォント ファイルに戻す一般的な方法です。ブラウザは宣言の順序に基づいてリソースに優先順位を付けるため、通常はlocal()をurl()の前���配置する必要があります。 unicode-range- このフォントで使用する文字を制限します。
説明
@font-face は、デザイナーがカスタム タイポグラフィを使用できるようにすることで、「ウェブセーフ」なフォントの制約から解放します。ユーザーのデバイス上のフォントを検索できる local() 関数により、インターネット接続に必ずしも依存しないシームレスなエクスペリエンスが実現します。
フォント MIME タイプ
| 形式 | MIME タイプ |
|---|---|
| TrueType | font/ttf |
| OpenType | font/otf |
| Web Open Font Format（ウェブ オープン フォント形式） | font/woff |
| Web Open Font Format 2 | font/woff2 |
@font-face と font-family の違い
CSS では、@font-face と font-family がよく混同されますが、目的は異なります。
すでに説明したように、@font-face は、ウェブ アプリケーションで使用するカスタム フォントを定義するために使用されるルールです。これにより、フォントのダウンロード先と読み込み中の表示方法をブラウザに指示し（font-display プロパティを使用）、ダウンロードする文字のサブセットを指定（unicode-range を使用）します。
一方、font-family は、特定のフォントまたはフォントのリストを要素に割り当てるために CSS ルール内で使用される CSS プロパティです。font-family にリストされるフォントは、ウェブセーフ フォント、システム フォント、または @font-face で定義されたカスタム フォントです。
まとめると、@font-face はフォントを宣言して名前を指定し、font-family はこの宣言されたフォントを HTML 要素に適用します。
両方の使用例を次に示します。
<table>
<thead>
<tr>
<th><p><pre>
@font-face {
font-family: "CustomFont";
src: url("customfont.woff2") format("woff2");
}
body {
font-family: "CustomFont", Arial, sans-serif;
}
この例では、@font-face が「CustomFont」を定義し、その場所をブラウザに伝えます。その後、font-family プロパティが body 要素にプロパティを適用し、「CustomFont」が使用できない場合はフォールバックとして Arial を使用します。
書体を変更する
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 の Meaning of Relative Weights をご覧ください。
文字のサイズを変更する
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 を使用して、非表示のコンテンツの表示方法を指定します。オプションは 2 つあります。clip（デフォルト）で、オーバーフローの位置でテキストを切り捨てます。ellipsis は、オーバーフローの位置に省略記号（...）を表示します。
空白文字を制御する
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 セクションをご覧ください。
可変フォント
通常、「normal」フォントでは、太字、斜体、縮小など、書体のバージョンごとに異なるファイルをインポートする必要があります。可変フォントは、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 プロパティは、small-caps や slashed-zero などのフォント バリエーションを選択できるさまざまな CSS プロパティの省略形です。この省略形に含まれる CSS プロパティは、font-variant-alternates、font-variant-caps、font-variant-east-asian、font-variant-ligatures、font-variant-numeric です。使用方法の詳細については、各プロパティのリンクをご覧ください。
理解度をチェックする
ウェブのタイポグラフィに関する知識をテストする
font-family の汎用的なフォールバックとして使用できるキーワードは次のうちどれですか。
serifmonospaceitalicfont-style には、italic は有効なキーワードであり、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 基本テキストとフォントのスタイル設定