テキストとタイポグラフィ

テキストは、ウェブのコアとなる構成要素の 1 つです。

ウェブサイトを作成するときに、テキストにスタイルを設定する必要はありません。HTML には、かなり合理的なデフォルトのスタイルが用意されています。

ただし、ウェブサイトの大部分はテキストで構成されるため、スタイルを追加して見栄えを良くすることは価値があります。いくつかの基本的なプロパティを変更するだけで、ユーザーの読みやすさが大幅に改善されます。

このモジュールでは、カスタム フォントをウェブページにインポートできる @font-face ルールから始めます。これにより、ユーザーがインストールしたフォントとは関係なく、必要なタイポグラフィを正確に使用できます。

次に、font-familyfont-stylefont-weightfont-size など、重要な CSS フォント プロパティについて説明します。これらの基本を理解することで、スタイルと読みやすさの両方のためにテキストを操作する準備が整います。

また、text-indentword-spacing などの段落固有のプロパティについても説明します。最後に、可変フォントや疑似要素などの高度なトピックについて説明します。これにより、タイポグラフィの制御をさらに細かく行うことができます。

これらの CSS テクニックの理解と応用を深めるために、実用的な例とヒントが随所に示されています。

@font-face ルール

@font-face CSS アットルールは、カスタム フォントを指定してテキストを表示できるため、ウェブデザインに役立ちます。@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
許容される水平方向のスケーリングを設定します。単一の値または範囲で指定します。
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-facefont-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 をフォールバックとして使用します。

書体を変更する

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

font-family を使用してテキストの書体を変えます。

font-family プロパティは、特定のフォント ファミリーまたは汎用フォント ファミリーを参照する文字列のカンマ区切りリストを受け入れます。特定のフォント ファミリーは、引用符付きの文字列(「Helvetica」、「EB Garamond」、「Times New Roman」など)です。汎用フォント ファミリーは、serifsans-serifmonospace などのキーワードです(MDN でオプションの一覧をご覧ください)。指定されたリストから、使用可能な最初の書体がブラウザに表示されます。

font-family を使用する場合は、ユーザーのブラウザに希望するフォントがない場合に備えて、汎用フォント ファミリーを少なくとも 1 つ指定する必要があります。通常、代替の汎用フォント ファミリーは、優先するフォントと類似している必要があります。font-family: "Helvetica"(サンセリフ フォント ファミリー)を使用する場合は、代替フォントも sans-serif にする必要があります。

斜体フォントを使用する

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

font-style を使用して、テキストを斜体にするかどうかを設定します。font-style は、normalitalicoblique のいずれかのキーワードを受け入れます。

テキストを太字にする

Browser Support

  • Chrome: 2.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

font-weight を使用して、テキストの太さを設定します。このプロパティには、キーワード値(normalbold)、相対キーワード値(lighterbolder)、数値(100900)を指定できます。

キーワード normalbold は、それぞれ数値 400700 と同等です。

キーワード lighterbolder は、親要素を基準に計算されます。この値の決定方法を示す便利なグラフについては、MDN の相対重み付けの意味をご覧ください。

テキストのサイズを変更する

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

テキスト要素のサイズを制御するには、font-size を使用します。このプロパティには、長さの値、割合、いくつかのキーワード値を指定できます。

font-size は、長さと割合の値に加えて、いくつかの絶対キーワード値(xx-smallx-smallsmallmediumlargex-largexx-large)といくつかの相対キーワード値(smallerlarger)を受け入れます。相対値は、親要素の font-size を基準とします。

行間のスペースを変更する

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

line-height を使用して、要素内の各行の高さを指定します。このプロパティには、数値、長さ、割合、キーワード normal を指定できます。通常、継承に関する問題を回避するため、長さや割合ではなく数値を使用することをおすすめします。

文字間のスペースを変更する

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

letter-spacing を使用すると、テキスト内の文字間の水平方向のスペースの量を制御できます。このプロパティには、empxrem などの長さの値を指定できます。

指定した値は、文字間の自然なスペースを増やす効果があります。次のデモでは、個々の文字を選択して、レターボックスのサイズと letter-spacing による変化を確認します。

単語間のスペースを変更する

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

word-spacing を使用すると、テキスト内の各単語の間隔を長くしたり短くしたりできます。このプロパティには、empxrem などの長さの値を指定できます。指定する長さは、通常のスペースに加えて余分なスペースです。つまり、word-spacing: 0word-spacing: normal と同等です。

font の略記

省略形の font プロパティを使用すると、フォント関連のプロパティを一度に設定できます。使用可能なプロパティのリストは、font-familyfont-sizefont-stretchfont-stylefont-variantfont-weightline-height です。

これらのプロパティの順序付け方法について詳しくは、MDN の font に関する記事をご覧ください。

テキストの大文字と小文字を変更する

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

text-transform を使用すると、基盤となる HTML を変更せずにテキストの大文字と小文字を変更できます。このプロパティは、uppercaselowercasecapitalize のキーワード値を受け入れます。

テキストに下線、上線、貫通線を追加する

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

text-decoration を使用して、テキストに行を追加します。最もよく使われるのは下線ですが、テキストの上に線を引いたり、テキストの真ん中に線を引いたりすることもできます。

text-decoration プロパティは、後で詳しく説明するより具体的なプロパティの省略形です。

text-decoration-line プロパティでは、underlineoverlineline-through というキーワードを使用できます。複数行に複数のキーワードを指定することもできます。

text-decoration-color プロパティは、text-decoration-line のすべての装飾の色を設定します。

text-decoration-style プロパティでは、soliddoubledotteddashedwavy のキーワードを使用できます。

text-decoration-thickness プロパティは任意の長さの値を受け取り、text-decoration-line からすべての装飾のストロークの太さを設定します。

text-decoration プロパティは、上記のすべてのプロパティの省略形です。

テキストにインデントを追加する

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

text-indent を使用して、テキストのブロックにインデントを追加します。このプロパティには、長さ(例: 10px2em)または、親ブロックの幅のパーセンテージを指定します。

はみ出たコンテンツや非表示のコンテンツに対処する

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 7.
  • Safari: 1.3.

Source

text-overflow を使用して、非表示コンテンツの表示方法を指定します。2 つのオプションがあります。clip(デフォルト)は、オーバーフローした時点でテキストを切り捨てます。ellipsis は、オーバーフローした時点で省略記号(...)を表示します。

空白を制御する

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

white-space プロパティは、要素内の空白文字の処理方法を指定するのに使用します。詳しくは、MDN の white-space に関する記事をご覧ください。

white-space: pre は、ASCII アートや慎重にインデントされたコードブロックのレンダリングに役立ちます。

単語の分割方法を管理する

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 15.
  • Safari: 3.

Source

word-break を使用すると、行がオーバーフローしたときに単語を「分割」する方法を変えることができます。デフォルトでは、ブラウザは単語を分割しません。word-break にキーワード値 break-all を使用すると、必要に応じて単語を個々の文字で分割するようにブラウザに指示します。

テキストの配置を変更する

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

text-align を使用して、ブロック要素またはテーブルセル要素内のテキストの水平方向の配置を指定します。このプロパティには、キーワード値 leftrightstartendcenterjustifymatch-parent を指定できます。

leftright は、それぞれブロックの左側と右側にテキストを配置します。

startend を使用して、現在の入力モードでのテキスト行の開始位置と終了位置を表します。したがって、start は英語では left にマッピングされますが、右から左(RTL)に記述されるアラビア語スクリプトでは right にマッピングされます。これらは論理アライメントです。詳しくは、論理プロパティ モジュールをご覧ください。

center を使用して、テキストをブロックの中央に配置します。

justify の値は、テキストを整理し、単語の間隔を自動的に変更して、テキストがブロックの左右の端に揃うようにします。

テキストの向きを変更する

Browser Support

  • Chrome: 2.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

direction を使用して、テキストの向きを ltr(左から右、デフォルト)または rtl(右から左)に設定します。アラビア語、ヘブライ語、ペルシャ語などの言語は右から左に記述されるため、direction: rtl を使用する必要があります。英語とその他の左から右に記述する言語の場合は、direction: ltr を使用します。

テキストのフローを変更する

Browser Support

  • Chrome: 48.
  • Edge: 12.
  • Firefox: 41.
  • Safari: 10.1.

Source

writing-mode を使用して、テキストの流れと配置方法を変更します。デフォルトは horizontal-tb ですが、テキストを横方向に配置する場合は、writing-modevertical-lr または vertical-rl に設定することもできます。

テキストの向きを変更する

Browser Support

  • Chrome: 48.
  • Edge: 79.
  • Firefox: 41.
  • Safari: 14.

Source

text-orientation を使用して、テキスト内の文字の向きを指定します。このプロパティの有効な値は mixedupright です。このプロパティは、writing-modehorizontal-tb 以外に設定されている場合にのみ該当します。

テキストに影を追加する

Browser Support

  • Chrome: 2.
  • Edge: 12.
  • Firefox: 3.5.
  • Safari: 1.1.

Source

text-shadow を使用して、テキストにシャドウを追加します。このプロパティには、3 つの長さ(x-offsety-offsetblur-radius)と色を指定します。

詳しくは、シャドウに関するモジュールの text-shadow セクションをご覧ください。

可変フォント

通常、標準フォントでは、太字、斜体、コンデンスなど、書体のバージョンごとに異なるファイルをインポートする必要があります。可変フォントは、1 つのファイルにさまざまな書体のバリエーションを含めることができるフォントです。

Roboto Flex(幅と太さの組み合わせがランダム)

詳しくは、可変フォントに関する記事をご覧ください。

疑似要素

::first-letter::first-line の疑似要素

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

疑似要素 ::first-letter::first-line は、それぞれテキスト要素の最初の文字と最初の行をターゲットとします。

::selection 疑似要素

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 62.
  • Safari: 1.1.

Source

::selection 疑似要素を使用して、ユーザーが選択したテキストの外観を変更します。

この疑似要素を使用する場合は、特定の CSS プロパティ(colorbackground-colortext-decorationtext-shadowstroke-colorfill-colorstroke-width)のみを使用できます。

font-variant

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

font-variant プロパティは、small-capsslashed-zero などのフォント バリエーションを選択できる複数の CSS プロパティの省略形です。この省略形に含まれる CSS プロパティは、font-variant-alternatesfont-variant-capsfont-variant-east-asianfont-variant-ligaturesfont-variant-numeric です。各プロパティの使用方法について詳しくは、各プロパティのリンクをご覧ください。

理解度を確認する

ウェブのタイポグラフィに関する知識をテストする

font-family 汎用フォールバックとして使用できるキーワードは次のどれですか。

sans-serif
serif
sci-fi
monospace
italic
helvetica

各単語の最初の文字を大文字に変換するには、どのステートメントを使用すればよいですか?(例: This is a sentence.This Is A Sentence.

font-variant: capitalize;
font-style: capitals;
text-capitalize: true;
text-case: capitalize;
text-transform: capitalize;

正誤問題: text-orientation を使用してテキストを左揃え、右揃え、中央揃えにします。

False
正しい

テキストの行間のスペースを変更するために使用できる CSS プロパティはどれですか。

line-spacing
leading
line-height
baseline-distance

リソース