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 アットルールは、カスタム フォントを指定してテキストを表示できるため、ウェブデザインに役立ちます。@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-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
にする必要があります。
斜体と斜体を使用する
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
を使用して、非表示コンテンツの表示方法を指定します。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
は、それぞれテキスト要素の最初の文字と最初の行をターゲットとします。
::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
汎用フォールバックとして使用できるキーワードは次のどれですか。
italic
sans-serif
helvetica
serif
sci-fi
monospace
各単語の最初の文字を大文字に変換するには、どのステートメントを使用すればよいですか?(例: This is a sentence.
➡ This Is A Sentence.
)
text-case: capitalize;
text-capitalize: true;
font-variant: capitalize;
font-style: capitals;
text-transform: capitalize;
正誤問題: text-orientation
を使用してテキストを左揃え、右揃え、中央揃えにします。
テキストの行間のスペースを変更するために使用できる CSS プロパティはどれですか。
line-spacing
baseline-distance
leading
line-height
リソース
- フォントに関するおすすめの方法では、フォントのインポート、フォントのレンダリング、ウェブでフォントを利用する際のおすすめの方法について説明します。
- MDN 基本的なテキストとフォント スタイル。