基本的なテキストとフォントのスタイル設定

HTML と CSS を使った作業ですでに経験したように、要素内のテキストは要素のコンテンツボックス内にレイアウトされます。 コンテンツ領域の左上（RTL 言語のコンテンツの場合は右上）から始まり、ラインの終りに向かって流れます。 終りに達すると、次のラインに進み、続けてすべてのコンテンツがボックスに配置されるまで次のラインに進みます。 テキストコンテンツは事実上一連のインライン要素のようにふるまい、互いに隣接するラインに配置され、ラインの終りに達するまで、または、<br> 要素を使用して手動で改行を強制しない限り改行を作成しません。

テキストを装飾するために使用される CSS プロパティは、一般的に次の 2 つのカテゴリーに分類されます。 この記事では、これらのプロパティを個別に説明します。

• フォントスタイル: テキストに適用されるフォントに影響するプロパティで、適用するフォント、大きさ、太字、斜体などに影響します。
• テキストのレイアウトスタイル: テキストの間隔やその他のレイアウト機能に影響するプロパティで、例えば、行間や文字間のスペースや、コンテンツボックス内でのテキストの配置方法などを操作できます。

フォントを装飾するためのプロパティを見るためにまっすぐに進みましょう。 この例では、次のような同じ HTML サンプルにいくつかの異なる CSS プロパティを適用します。

<h1>Tommy the cat</h1>

<p>Well I remember it as though it were a meal ago…</p>

<p>
  Said Tommy the Cat as he reeled back to clear whatever foreign matter may have
  nestled its way into his mighty throat. Many a fat alley rat had met its
  demise while staring point blank down the cavernous barrel of this awesome
  prowling machine. Truly a wonder of nature this urban predator — Tommy the cat
  had many a story to tell. But it was a rare occasion such as this that he did.
</p>

完成した例は Github にあります（ソースコードも参照してください）。

color プロパティは、選択された要素の前景のコンテンツの色を設定します（通常はテキストですが、text-decoration プロパティを使用してテキストに下線や上線を配置するなど、他のいくつかの要素を含めることもできます）。

color は次のように任意の CSS カラー単位を受け入れることができます。

p {
  color: red;
}

これにより、次のように段落は標準のブラウザーのデフォルトの黒ではなく赤になります。

<h1>Tommy the cat</h1>

<p>Well I remember it as though it were a meal ago…</p>

<p>
  Said Tommy the Cat as he reeled back to clear whatever foreign matter may have
  nestled its way into his mighty throat. Many a fat alley rat had met its
  demise while staring point blank down the cavernous barrel of this awesome
  prowling machine. Truly a wonder of nature this urban predator — Tommy the cat
  had many a story to tell. But it was a rare occasion such as this that he did.
</p>

テキストに別のフォントを設定するには、font-family プロパティを使用します — これにより、選択した要素に適用するブラウザーのフォント（またはフォントのリスト）を指定できます。 ウェブサイトにアクセスしているマシンで利用可能な場合にのみ、ブラウザーはフォントを適用します。 そうでない場合は、ブラウザーのデフォルトフォントを使用するだけです。 簡単な例はこんな感じです。

p {
  font-family: arial;
}

これにより、ページ上のすべての段落に、どのコンピューターでも見られる arial フォントが採用されます。

ウェブセーフフォント

フォントの入手可能性と言えば、すべてのシステムで一般的に利用でき、したがってそれほど心配することなく使用できるフォントの数は限られています。これらはいわゆるウェブセーフフォント (web safe fonts) です。

ほとんどの場合、ウェブ開発者は、テキストコンテンツの表示に使用されるフォントをより具体的に制御したいと考えています。 問題は、ウェブページを見るために使用されているコンピューターでどのフォントが利用可能かを知る方法を見つけることです。 あらゆる場合にこれを知る方法はありませんが、ウェブセーフフォントは最も使用されているオペレーティングシステム（Windows、Mac、最も一般的な Linux ディストリビューション、Android、および iOS）のほぼすべての実例で使用可能です。

実際のウェブセーフフォントのリストは、オペレーティングシステムが進化するにつれて変わりますが、少なくとも現時点では次のフォントをウェブセーフと見なすことをお勧めします（それらの多くは 90 年代後半から 2000 年代初頭にかけての Microsoft のウェブのコアフォントの先鞭のおかげで普及しました）。

既定のフォント

CSS はフォントに serif、sans-serif、monospace、cursive、fantasy の 5 つの総称名を定義しています。 これらは非常に一般的なものであり、それらの総称名を使用するときに使用される正確なフォントは各ブラウザー次第であり、それらが実行されているオペレーティングシステムごとに異なります。 これは、ブラウザーが最低限適切なフォントを提供するように最善を尽くそうとする場合の最悪のシナリオを表します。 serif、sans-serif、monospace はかなり予測可能であり、妥当なものを提供するはずです。 その一方で、cursive や fantasy はそれほど予測できないので、慎重に使用してテストすることをお勧めします。

5 つの名前は次のように定義されています。

My big red elephant

body {
  font-family: serif;
}

My big red elephant

body {
  font-family: sans-serif;
}

My big red elephant

body {
  font-family: monospace;
}

My big red elephant

body {
  font-family: cursive;
}

My big red elephant

body {
  font-family: fantasy;
}

フォントスタック

ウェブページで使用したいフォントの可用性を保証することはできないため（ウェブフォントでさえ何らかの理由で失敗する可能性もあります）、ブラウザーに複数のフォントから選択できるようにフォントスタック (font stack) を指定できます。 これは単に、次のようにカンマで区切られた複数のフォント名からなる font-family の値です。

p {
  font-family: "Trebuchet MS", Verdana, sans-serif;
}

そのような場合、ブラウザーはリストの先頭から始めて、そのフォントがマシンで利用可能かどうかを確認します。 そうであれば、そのフォントを選択した要素に適用します。 そうでない場合は、次のフォントに移動します。

列挙されているフォントがどれも利用できない場合、ブラウザーが少なくともほぼ適切なものを提供できるように、スタックの最後に適切な総称フォント名を指定することをお勧めします。 この点を強調するために、他のオプションが利用できない場合、段落にはブラウザーの既定の serif フォントを使用します — これは通常は Times New Roman です — これは sans-serif フォントには不適切です！

font-family の例

前の例に追加して、次のように段落に sans-serif フォントを付けます。

p {
  color: red;
  font-family: Helvetica, Arial, sans-serif;
}

これにより、次のような結果が得られます。

<h1>Tommy the cat</h1>

<p>Well I remember it as though it were a meal ago…</p>

<p>
  Said Tommy the Cat as he reeled back to clear whatever foreign matter may have
  nestled its way into his mighty throat. Many a fat alley rat had met its
  demise while staring point blank down the cavernous barrel of this awesome
  prowling machine. Truly a wonder of nature this urban predator — Tommy the cat
  had many a story to tell. But it was a rare occasion such as this that he did.
</p>

前のモジュールの CSS の値と単位の記事で、長さとサイズの単位を確認しました。 フォントサイズ（font-size プロパティで設定）は、これらの単位のほとんど（およびパーセントなどの他の単位）で測定された値を取ることができますが、テキストのサイズを設定するために使用する最も一般的な単位は次のとおりです。

• px (pixels): テキストを表示したい高さのピクセル数。 これは絶対的な単位です。それはほとんどどんな状況でもページ上のフォントの同じ最終的な計算値になります。
• em: 1 emは、現在スタイル設定している要素の親要素に設定されているフォント サイズ（具体的には、親要素の中に格納されている大文字の M の幅）に等しくなります。異なるフォントサイズを設定した入れ子要素がたくさんある場合、これは動作がトリッキーになる可能性がありますが、下記で説明するように実現可能です。面倒でしょうか？慣れてしまえばとても自然なことですし、 em を使用することで、テキストだけでなくすべてのもののサイズを設定することができます。ウェブサイト全体のサイズを em を使用して設定することができるので、メンテナンスが簡単になります。
• rem: これは em と同じように動作しますが、1 rem は親要素ではなく、文書のルート要素（つまり <html>）に設定したフォントサイズに等しくなります。これにより、フォントサイズの計算がとても簡単になります。

要素の font-size は、その要素の親要素から継承されます。 これはすべてドキュメント全体のルート要素 — <html> — で始まり、font-size はブラウザー間で標準で 16px に設定されています。 ルート要素内の段落（またはブラウザーによって設定された異なるサイズを持たない他の要素）は、最終サイズが 16px になります。 他の要素は既定のサイズが異なる場合があります。 例えば、 h1 要素のサイズは既定で 2em に設定されているため、最終的なサイズは 32px になります。

入れ子になった要素のフォントサイズを変更し始めると、物事はより複雑になります。 例えば、ページに <article> 要素があり、その font-size を 1.5em（これは計算すると 24px の最終的なサイズになります）に設定し、次に <article> 要素内の段落に 20px で計算したフォントサイズを使用するようにしたい場合に、あなたは何 em の値を使用しますか？

<!-- 文書のベースフォントサイズは 16px です -->
<article>
  <!-- ここのフォントサイズが 1.5em の場合 -->
  <p>My paragraph</p>
  <!-- 20px のフォントサイズにするにはどう計算しますか？ -->
</article>

その em 値を 20 / 24 、つまり 0.83333333 em に設定する必要があります。この計算は複雑なので、スタイル設定には注意が必要です。可能であれば、 rem を使用することで、物事を単純にすることができ、コンテナー要素の font-size を設定することは避けることができます。

CSS は、テキストの視覚的な太さや強調を変更するために次の 4 つの共通のプロパティを提供します。

• font-style: イタリック体テキストのオンとオフを切り替えるために使用されます。 可能な値は次のとおりです（何らかの理由でイタリック装飾をオフにしたい場合を除いて、これを使用することはめったにありません）。

  • normal: テキストを通常のフォントに設定します（既存のイタリック体をオフにします）。
  • italic: 利用できる場合は、イタリック体版のフォントを使用するようにテキストを設定します。 利用できない場合は、代わりに oblique でイタリック体をシミュレートします。
  • oblique: 通常版を斜めにして作成された、イタリック体フォントのシミュレート版を使用するようにテキストを設定します。

• font-weight: テキストの太さを設定します。 利用可能なフォントのバリエーションが多数ある場合（-light、-normal、-bold、-extrabold、-black など）、これには多くの値がありますが、現実的には normal と bold 以外のものを使用することはほとんどありません。

  • normal, bold: 標準および太字のフォントの太さ。
  • lighter, bolder: 現在の要素の太さを、親要素の太さよりも 1 段階細くまたは太くします。
  • 100 ～ 900: 必要に応じて、上記のキーワードよりもきめ細かい制御を提供する太さの数値。

• text-transform: フォントを変換するように設定できます。 値は次のとおりです。

  • none: 変換を禁止します。
  • uppercase: すべてのテキストを大文字に変換します。
  • lowercase: すべてのテキストを小文字に変換します。
  • capitalize: すべての単語を最初の文字が大文字になるように変換します。
  • full-width: すべてのグリフを等幅フォントに似た固定された正方形の中に書くように変換します。例えば、ラテン文字とアジア言語 (中国語、日本語、韓国語など) の字体に配置できるようにします。（訳注: 全角文字に変換します。）

• text-decoration: フォントのテキスト装飾を設定/設定解除します（主にリンクの既定の下線を解除するために使用します）。 使用可能な値は次のとおりです。

  • none: 既に存在するテキスト装飾をすべて解除します。
  • underline: テキストに下線を引きます。
  • overline: テキストに上線を付けます。
  • line-through: テキストの上に取り消し線を引きます。

  text-decoration は、複数の装飾を同時に追加したい場合、例えば text-decoration: underline overline のように、一度に複数の値を受け入れることができることに注意してください。また、 text-decoration は text-decoration-line、text-decoration-style、text-decoration-color の一括指定プロパティであることにも注意してください。例えば text-decoration: line-through red wavy のように、これらのプロパティ値の組み合わせを使用して、興味深い効果を生み出すことができます。

例にこれらのプロパティをいくつか追加してみましょう。

新しい結果はこんな感じです。

<h1>Tommy the cat</h1>

<p>Well I remember it as though it were a meal ago…</p>

<p>
  Said Tommy the Cat as he reeled back to clear whatever foreign matter may have
  nestled its way into his mighty throat. Many a fat alley rat had met its
  demise while staring point blank down the cavernous barrel of this awesome
  prowling machine. Truly a wonder of nature this urban predator — Tommy the cat
  had many a story to tell. But it was a rare occasion such as this that he did.
</p>

html {
  font-size: 10px;
}

h1 {
  font-size: 5rem;
  text-transform: capitalize;
}

h1 + p {
  font-weight: bold;
}

p {
  font-size: 1.5rem;
  color: red;
  font-family: Helvetica, Arial, sans-serif;
}

text-shadow プロパティを使ってテキストにドロップシャドウを付けることができます。 次の例に示すように、これは最大 4 つの値を取ります。

text-shadow: 4px 4px 5px red;

4 つのプロパティは次のとおりです。

1. 元のテキストからの影の水平方向のオフセット。これは、ほとんどの CSS の長さとサイズの単位を取ることができますが、最も一般的には px を使用します。この値は含める必要があります。
2. 元のテキストからの影の垂直方向のオフセット。基本的に水平方向のオフセットと同じようにふるまいますが、影を左右ではなく上下に移動する点が異なります。 この値は含める必要があります。
3. ぼかし半径。値が大きいほど、影はより広く拡散されます。 この値が含まれていない場合、既定値は 0 になり、ぼかしは行われません。 これは、ほとんどの CSS の長さとサイズの単位を取ることができます。
4. 影のベースカラー — 任意の CSS カラー単位 を取ります。含まれていない場合、既定値は currentcolor であり、影の色は要素の color プロパティから導かれます。

複数の影

複数の影の値をカンマで区切って記述することで、次のように同じテキストに複数の影を付けることができます。

h1 {
  text-shadow:
    1px 1px 1px red,
    2px 2px 1px red;
}

これを Tommy the cat の例の h1 要素に適用すると、結果は次のようになります。

<h1>Tommy the cat</h1>

<p>Well I remember it as though it were a meal ago…</p>

<p>
  Said Tommy the Cat as he reeled back to clear whatever foreign matter may have
  nestled its way into his mighty throat. Many a fat alley rat had met its
  demise while staring point blank down the cavernous barrel of this awesome
  prowling machine. Truly a wonder of nature this urban predator — Tommy the cat
  had many a story to tell. But it was a rare occasion such as this that he did.
</p>

html {
  font-size: 10px;
}

h1 {
  font-size: 5rem;
  text-transform: capitalize;
}

h1 + p {
  font-weight: bold;
}

p {
  font-size: 1.5rem;
  color: red;
  font-family: Helvetica, Arial, sans-serif;
}

基本的なフォントのプロパティ以外の方法で、テキストのレイアウトに影響を与えるために使用できるプロパティを見てみましょう。

text-align プロパティは、テキストを含むコンテンツボックス内でのテキストの配置方法を制御するために使用されます。 利用可能な値は次の通りで、通常のワードプロセッサーアプリケーションとほとんど同じように機能します。

• left: テキストを左揃えにします。
• right: テキストを右揃えにします。
• center: テキストを中央揃えにします。
• justify: テキストを両端揃えにします。 すべてのテキストのラインが同じ幅になるように、単語の間隔を変えてテキストを広げます。 これは慎重に使用する必要があります — 特に、長い単語が多数含まれている段落に適用すると、ひどく見えます。 もしこれを使うつもりなら、hyphens のような他の何かを使用して、複数ラインにまたがる長い単語を分割することも考えてください。

例の h1 に、text-align: center; を適用した場合、次のようになるでしょう。

<h1>Tommy the cat</h1>

<p>Well I remember it as though it were a meal ago…</p>

<p>
  Said Tommy the Cat as he reeled back to clear whatever foreign matter may have
  nestled its way into his mighty throat. Many a fat alley rat had met its
  demise while staring point blank down the cavernous barrel of this awesome
  prowling machine. Truly a wonder of nature this urban predator — Tommy the cat
  had many a story to tell. But it was a rare occasion such as this that he did.
</p>

html {
  font-size: 10px;
}

h1 {
  font-size: 5rem;
  text-transform: capitalize;
  text-shadow:
    1px 1px 1px red,
    2px 2px 1px red;
  text-align: center;
}

h1 + p {
  font-weight: bold;
}

p {
  font-size: 1.5rem;
  color: red;
  font-family: Helvetica, Arial, sans-serif;
}

line-height プロパティはテキストの各行の高さを設定します。これはほとんどの長さとサイズの単位をとることができますが、乗数として機能し、一般的に最良の選択肢と考えられる単位なしの値をとることもできます。 font-size が乗算されて line-height が得られます。 本文は行が離れていると、一般的に見栄えがよく、読みやすくなります。 推奨される行の高さは約 1.5 〜 2 （倍の高さ）です。テキストの行をフォントの高さの 1.6 倍に設定するには、次のようにします。

p {
  line-height: 1.6;
}

この例の <p> 要素にこれを適用すると、次のようになります。

<h1>Tommy the cat</h1>

<p>Well I remember it as though it were a meal ago…</p>

<p>
  Said Tommy the Cat as he reeled back to clear whatever foreign matter may have
  nestled its way into his mighty throat. Many a fat alley rat had met its
  demise while staring point blank down the cavernous barrel of this awesome
  prowling machine. Truly a wonder of nature this urban predator — Tommy the cat
  had many a story to tell. But it was a rare occasion such as this that he did.
</p>

html {
  font-size: 10px;
}

h1 {
  font-size: 5rem;
  text-transform: capitalize;
  text-shadow:
    1px 1px 1px red,
    2px 2px 1px red;
  text-align: center;
}

h1 + p {
  font-weight: bold;
}

p {
  font-size: 1.5rem;
  color: red;
  font-family: Helvetica, Arial, sans-serif;
  line-height: 1.6;
}

letter-spacing プロパティと word-spacing プロパティを使用すると、テキスト内の文字と単語の間隔を設定できます。 これらはあまり使用しませんが、ある外観を得るためや、特に濃いフォントの読みやすさを向上させるために使用することがあります。 それらはほとんどの長さとサイズの単位を取ることができます。

例として、この例の <p> 要素の最初の行に次を適用したとします。

p::first-line {
  letter-spacing: 4px;
  word-spacing: 4px;
}

次のようになります。

<h1>Tommy the cat</h1>

<p>Well I remember it as though it were a meal ago…</p>

<p>
  Said Tommy the Cat as he reeled back to clear whatever foreign matter may have
  nestled its way into his mighty throat. Many a fat alley rat had met its
  demise while staring point blank down the cavernous barrel of this awesome
  prowling machine. Truly a wonder of nature this urban predator — Tommy the cat
  had many a story to tell. But it was a rare occasion such as this that he did.
</p>

html {
  font-size: 10px;
}

h1 {
  font-size: 5rem;
  text-transform: capitalize;
  text-shadow:
    1px 1px 1px red,
    2px 2px 1px red;
  text-align: center;
  letter-spacing: 2px;
}

h1 + p {
  font-weight: bold;
}

p {
  font-size: 1.5rem;
  color: red;
  font-family: Helvetica, Arial, sans-serif;
  line-height: 1.6;
  letter-spacing: 1px;
}

上記のプロパティは、ウェブページ上でテキストを装飾する方法のアイデアを与えますが、使うことができるもっと多くのプロパティがあります。 ここでは最も重要なものだけを取り上げたいと思います。 上記の使い方に慣れてきたら、次のことも調べてください。

フォントスタイルです。

• font-variant: スモールキャップと通常の代替フォントを切り替えます。
• font-kerning: フォントのカーニングオプションのオンとオフを切り替えます。
• font-feature-settings: さまざまな OpenType フォント機能のオンとオフを切り替えます。
• font-variant-alternates: 与えられたフォントフェイスのための代替グリフの使用を制御します。
• font-variant-caps: 代替大文字グリフの使用を制御します。
• font-variant-east-asian: 日本語や中国語など、東アジアの文字の代替グリフの使用方法を制御します。
• font-variant-ligatures:テキストで使用される合字と文脈形式を制御します。
• font-variant-numeric: 数字、分数、および序数記号の代替グリフの使用方法を制御します。
• font-variant-position: 上付き文字または下付き文字として配置された、小さいサイズの代替グリフの使用方法を制御します。
• font-size-adjust: 実際のフォントサイズとは無関係にフォントの表示サイズを調整します。
• font-stretch: 与えられたフォントの可能な代替の伸縮バージョン間で切り替えます。
• text-underline-position: text-decoration-line プロパティの underline 値を使用して設定された下線の位置を指定します。
• text-rendering: テキストレンダリングの最適化を試します。

テキストのレイアウトスタイルです。

• text-indent: テキスト内容の最初のラインの始まりの前にどれだけの水平スペースを残すべきかを指定します。
• text-overflow: 表示されないオーバーフローしたコンテンツがユーザーに通知される方法を定義します。
• white-space: 要素内の空白とそれに関連する改行の扱い方を定義します。
• word-break: 単語内で改行するかどうかを指定します。
• direction: テキストの方向を定義します（これは言語に依存します。 通常、テキストの内容に結び付けられているので、HTML にその部分を処理させる方が良いです）。
• hyphens: サポートしている言語のハイフネーションをオンまたはオフにします。
• line-break: アジア言語の改行を緩和または強化します。
• text-align-last: ブロックの最後のラインまたは強制改行の直前のラインの配置方法を定義します。
• text-orientation: ライン内での文字の向きを定義します。
• overflow-wrap: オーバーフローを防ぐために、ブラウザーが単語内で改行できるかどうかを指定します。
• writing-mode: テキストのラインを水平に配置するか垂直に配置するか、およびそれに続いてラインが流れる方向を定義します。

多くのフォントプロパティは、一括指定プロパティの font を介して設定することもできます。 これらは、font-style、font-variant、font-weight、font-stretch、font-size、line-height、font-family の順に書きます。

これらすべてのプロパティのうち、font 一括指定プロパティを使用する場合に必要なのは、font-size と font-family のみです。

font-size プロパティと line-height プロパティの間にスラッシュを入れる必要があります。

完全な例は次のようになります。

font:
  italic normal bold normal 3em/1.5 Helvetica,
  Arial,
  sans-serif;

このアクティブラーニングセッションでは、具体的な演習はありません。 フォントやテキストのレイアウトのプロパティをいくつか試してみて、作成できるものを確認してください！ オフラインの HTML / CSS ファイルを使用してこれを行うか、下記のライブ編集可能な例にコードを入力することができます。

間違えた場合は、Reset ボタンを使用していつでもリセットできます。

<div
  class="body-wrapper"
  style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;">
  <h2>HTML 入力</h2>
  <textarea
    id="code"
    class="html-input"
    style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">
<p>Some sample text for your delight</p>
  </textarea>

  <h2>CSS 入力</h2>
  <textarea
    id="code"
    class="css-input"
    style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">
p {

}
  </textarea>

  <h2>出力</h2>
  <div
    class="output"
    style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"></div>
  <div class="controls">
    <input
      id="reset"
      type="button"
      value="Reset"
      style="margin: 10px 10px 0 0;" />
  </div>
</div>

const htmlInput = document.querySelector(".html-input");
const cssInput = document.querySelector(".css-input");
const reset = document.getElementById("reset");
let htmlCode = htmlInput.value;
let cssCode = cssInput.value;
const output = document.querySelector(".output");

const styleElem = document.createElement("style");
const headElem = document.querySelector("head");
headElem.appendChild(styleElem);

function drawOutput() {
  output.innerHTML = htmlInput.value;
  styleElem.textContent = cssInput.value;
}

reset.addEventListener("click", () => {
  htmlInput.value = htmlCode;
  cssInput.value = cssCode;
  drawOutput();
});

htmlInput.addEventListener("input", drawOutput);
cssInput.addEventListener("input", drawOutput);
window.addEventListener("load", drawOutput);

この記事のテキストで遊んで楽しんでください。次の記事では、HTML リストのスタイル設定について知っておくべきことをすべて説明します。

• Overview: テキストの装飾
• 次のページ