【Chapter2】フォントとテキスト

概要と目標フォントやテキストに関する
プロパティを覚えよう。

文字の大きさや文字の太さなど、
フォントやテキストに関するプロパティを学習しましょう。

今回のゴール

RERUN

文字サイズ `font-size` プロパティ

font(フォント)-size(サイズ)は、文字の大きさを変更するプロパティ。
様々な値が指定できるが、アクセシビリティの観点から「px」などの絶対単位の使用は控える。
初期値は「medium」でブラウザで設定している基準のフォントサイズになる。(多くのブラウザの初期値は 16px)

初期値	値の継承	適用対象	相対値の基準
`medium`	する	全要素	親要素の `font-size`

主な値
指定できる値	説明
実数 + 単位	実数に単位を付けて指定 (例: 1.5em など)
パーセンテージ	親要素の `font-size` に対するパーセンテージで指定 (例: 150%)
キーワード	`xx-small` `x-small` `small` `medium` （初期値） `large` `x-large` `xx-large` (表示サイズはブラウザによって異なる) と `smaller`: １段階小さく `larger`: 1段階大きく

`font-size`プロパティを
使ってみよう。

「css-lessons」 › 「chapter02」 › 「font」フォルダ内の「index.html」をテキストエディタで開く
HTMLの内容を確認

chapter02/font/index.html

<h1>フォント関連のプロパティ</h1>
<p>
  ここはp要素でマークアップされており、<br>
  何のスタイルも適用していません。
</p>
<hr>
<p class="font1">
  ここはp要素でマークアップされており、<br>
  class属性に「<em>font1</em>」が指定されています。
</p>
<hr>
<p class="font2">
  ここはp要素でマークアップされており、<br>
  class属性に「<em>font2</em>」が指定されています。
</p>

「css-lessons」 › 「chapter02」 › 「font」フォルダ内の「style.css」をテキストエディタで開く
class名「font1」、class名「font2」の文字サイズを変更するCSSを記述

chapter02/font/style.css

.font1 {
  font-size: .75em;
}

.font2 {
  font-size: 2em;
}

上書き保存
「css-lessons」 › 「chapter02」› 「font」フォルダ内の「index.html」をダブルクリック。
文字サイズが変更されたかを確認

ブラウザでの表示例

RERUN

新しいウインドウで表示する

文字の書体 `font-family` プロパティ

font(フォント)-family(ファミリー)は、書体を指定するプロパティ。
書体名や書体の種類を表すキーワードで指定する。
覧者の環境に指定した書体がない場合に備え「, (半角カンマ)」区切りで複数の候補を指定する。
適用させたい順に候補を指定し、利用可能書体があればその書体が適用される。

初期値	値の継承	適用対象
ブラウザで設定されているフォント	する	全要素

主な値
指定できる値	説明
書体名	フォントファミリーの名称を指定。(フォント名にスペースがある場合は、引用符で囲む)
総称名	`serif` (明朝) `sans-serif` (ゴシック) `monospace` (等幅フォント) `cursive` （草書体） `fantasy` （装飾）

`font-family`プロパティを
使ってみよう

「css-lessons」 › 「chapter02」 › 「font」フォルダ内の「style.css」をテキストエディタで開く
class名「font1」の書体を「游ゴシック」、なければゴシック系のフォントにし、
class名「font2」の書体を「游明朝」、なければ「ヒラギノ明朝 ProN W3」、なければ「HG明朝E」、なければ明朝系のフォントにする

chapter02/font/style.css

.font1 {
  font-size: .75em;
  font-family: 游ゴシック, sans-serif;
}

.font2 {
  font-size: 2em;
  font-family: 游明朝, "ヒラギノ明朝 ProN W3", HG明朝E, serif;
}

上書き保存
「css-lessons」 › 「chapter02」› 「font」フォルダ内の「index.html」をダブルクリック。
文字サイズが変更されたかを確認

ブラウザでの表示例

RERUN

新しいウインドウで表示する

よく使われているフォント

font-familyは、多くのWebサイトが以下のようなフォントを指定している。
ただし、優先的に表示する書体の並び順はサイトによって様々。

ゴシック系

body {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", 游ゴシック体, YuGothic, 游ゴシック, "Yu Gothic", "ヒラギノ角ゴ ProN W3", Meiryo, "メイリオ", sans-serif;
}

明朝系

body {
  font-family: 游明朝, YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", serif;
}

※1. 同じ書体名を日本語と英語で両方指定しているのは、ブラウザによって日本語名を認識しなかったり、アルファベット表記を認識したかったりするため。

文字の太さ `font-weight` プロパティ

font(フォント)-weight(ウエイト)は、文字の太さを指定するプロパティ。
太さを表すキーワードで指定するか、太さの数値で指定する。

初期値	値の継承	適用対象
`normal`	する	全要素

主な値
指定できる値	説明
`normal`	適用書体の標準の太さ。(400に相当)
`bold`	適用書体の太字の太さ。(700に相当)
`lighter`	1段階細くなる
`bolder`	１段階太くなる
数値	`100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900` (`normal`と`bold`以外のウエイトが存在するフォントへの数値のウエイト)

`font-weight`プロパティを
使ってみよう

「css-lessons」 › 「chapter02」 › 「font」フォルダ内の「style.css」をテキストエディタで開く
h1」要素の文字の太さを「ノーマル」、
class名「font1」の文字の太さを「ボールド」、にする

chapter02/font/style.css

h1 {
  font-weight: normal;
}

.font1 {
  font-size: .75em;
  font-family: 游ゴシック, sans-serif;
  font-weight: bold;
}

.font2 {
  font-size: 2em;
  font-family: 游明朝, "ヒラギノ明朝 ProN W3", "HG明朝E", serif;
}

上書き保存
「css-lessons」 › 「chapter02」› 「font」フォルダ内の「index.html」をダブルクリック。
文字の太さが変更されたかを確認

ブラウザでの表示例

RERUN

新しいウインドウで表示する

文字のスタイル `font-style` プロパティ

font(フォント)-style(スタイル)は、文字のスタイル（斜体、イタリック体）を指定するプロパティ。
スタイルを表すキーワードで指定する。
ただし、日本語のフォントには「イタリック体」や「斜体」がないものがあるので、
いくら指定しても標準で表示される場合もある。

初期値	値の継承	適用対象
`normal`	する	全要素

主な値
指定できる値	説明
`normal`	標準のフォントで表示される
`italic`	イタリック体のフォントで表示される (ない場合は斜体のフォントで表示)
`oblique`	斜体のフォントで表示 (ない場合はイタリック体のフォントで表示)

`font-style`プロパティを
使ってみよう

「css-lessons」 › 「chapter02」 › 「font」フォルダ内の「style.css」をテキストエディタで開く
「em」要素のスタイルを「ノーマル」、
class名「font1」のスタイルを「イタリック体」にする

chapter02/font/style.css

h1 {
  font-weight: normal;
}

em {
  font-style: normal;
}

.font1 {
  font-size: .75em;
  font-family: 游ゴシック, sans-serif;
  font-weight: bold;
  font-style: italic;
}

.font2 {
  font-size: 2em;
  font-family: 游明朝, "ヒラギノ明朝 ProN W3", "HG明朝E", serif;
}

上書き保存
「css-lessons」 › 「chapter02」› 「font」フォルダ内の「index.html」をダブルクリック。
文字のスタイルが変更されたかを確認

ブラウザでの表示例

RERUN

新しいウインドウで表示する

行間 `line-height` プロパティ

line(ライン)-height(ハイト)は、行の高さの最小値を指定するプロパティ。
（行内にimg要素などの置換インライン要素がある場合、その高さが行の高さの計算に使われる。)
非置換インライン要素に指定する場合は、行の高さの計算に使われる値となる。

初期値	値の継承	適用対象	相対値の基準
`normal`	する	全要素	要素自身の`font-size`

主な値
指定できる値	説明
`normal`	ユーザーの環境によって異なる。 (フォントファミリーによっても異なり、おおよそ `1.2` というデフォルト値になる)
実数	要素自身のフォントサイズに対する倍率 (例: `1.5`) (継承時の予期しない結果を避けるために、最適な方法)
実数 + 単位	行ボックスの高さ (例: `1.5em` など)
パーセンテージ	要素自身の `font-size` に対するパーセンテージで指定 (例: `150%`)

`line-height`プロパティを
使ってみよう

「css-lessons」 › 「chapter02」 › 「font」フォルダ内の「style.css」をテキストエディタで開く
body」要素の行間を「1.5」に、
class名「font1」の行間を「2」にする

chapter02/font/style.css

body {
  line-height: 1.5;
}

h1 {
  font-weight: normal;
}

em {
  font-style: normal;
}

.font1 {
  font-size: .75em;
  font-family: 游ゴシック, sans-serif;
  font-weight: bold;
  font-style: italic;
  line-height: 2;
}

.font2 {
  font-size: 2em;
  font-family: 游明朝, "ヒラギノ明朝 ProN W3", "HG明朝E", serif;
}

上書き保存
「css-lessons」 › 「chapter02」› 「font」フォルダ内の「index.html」をダブルクリック。
行間が変更されたかを確認

ブラウザでの表示例

RERUN

新しいウインドウで表示する

フォント一括設定 `font` プロパティ

font(フォント)は、ここまで紹介してきたフォント関連のプロパティを一括で指定するプロパティ。
各プロパティの値は半角スペースで区切って指定する。（line-heightの値を除く）
ただし、各プロパティの値を指定する順番にルールがあるので注意する。

主な値
指定できる値	説明
`font-style` の値	`font-style` プロパティに指定できる値
`font-weight` の値	`font-weight` プロパティに指定できる値
`font-size` の値	`font-size` プロパティに指定できる値必須
`line-height` の値	`line-height` プロパティに指定できる値
`font-family` の値	`font-family` プロパティに指定できる値必須

上記以外でも指定できる値もあるが、現時点では使用できないものや、日本語環境であまり使わないものが多い。

指定順序

fontは、各プロパティの値を半角スペースで区切って指定する。（line-height以外）
ただし、下記のルールに従って、順番に指定する必要がある。

まず、必要に応じて font-styleとfont-weightの値を指定（どちらが先でもよく、省略時は、normal となる）
次に、font-sizeの値を指定（省略不可）
次に、必要に応じてfont-sizeの後ろに「/（スラッシュ）」を付けて、line-heightの値を指定
（省略時は、normal となる）
最後に、font-familyの値を指定（省略不可）

`font`プロパティを使ってみよう

「css-lessons」 › 「chapter02」 › 「font」フォルダ内の「style.css」をテキストエディタで開く
class名「font1」に指定されているfont関連のプロパティを「fontプロパティ」で書き換える。
（元々指定してあるプロパティはコメントアウトにする）

chapter02/font/style.css

body {
  line-height: 1.5;
}

h1 {
  font-weight: normal;
}

em {
  font-style: normal;
}

.font1 {
  /*
  font-size: .75em;
  font-family: 游ゴシック, sans-serif;
  font-weight: bold;
  font-style: italic;
  line-height: 2;
  */

  font: italic bold .75em/2 游ゴシック, sans-serif;
}

.font2 {
  font-size: 2em;
  font-family: 游明朝, "ヒラギノ明朝 ProN W3", "HG明朝E", serif;
}

上書き保存
「css-lessons」 › 「chapter02」› 「font」フォルダ内の「index.html」をダブルクリック。
表示が変わらないことを確認

ブラウザでの表示例

RERUN

新しいウインドウで表示する

テキストの行揃え `text-align` プロパティ

text(テキスト)-align(アライン)は、テキストの行揃えを指定するプロパティ。
ブロックレベル要素に指定し、中のインライン要素の行揃えを行う。

初期値	値の継承	適用対象
`start`	する	ブロック

主な値
指定できる値	説明
`left`	左揃え
`center`	中央揃え
`right`	右揃え
`justify`	両端揃え
`start`	文章の方向が左から右であれば `left` 、右から左であれば `right` CSS3 新
`end`	文章の方向が左から右であれば `right` 、右から左であれば `left` CSS3 新
`match-parent`	`start` と `end` の値を親要素の `direction` に従って、 `left` か `right` に置き換える CSS3 新

`text-align`プロパティを使ってみよう

「css-lessons」 › 「chapter02」 › 「text」フォルダ内の「index.html」をテキストエディタで開く
HTMLの内容を確認する

chapter02/text/index.html

<h1>テキスト関連のプロパティ</h1>
<p>
  ここはp要素でマークアップされており、<br>
  何のスタイルも適用していません。
</p>
<hr>
<p class="text1">
  ここはp要素でマークアップされており、<br>
  class属性に「<em>text1</em>」が指定されています。<br>
  <a href="#">これはアンカーテキストです。</a>
</p>
<hr>
<p class="text2" lang="en">
  It is marked up with p elements,<br>
  and "<em>text2</em>" is specified in the class attribute.<br>
  <a href="#">This is anchor text.</a>
</p>
</body>
</html>

「css-lessons」 › 「chapter02」 › 「text」フォルダ内の「style.css」をテキストエディタで開く
class名「text1」とclass名「text2」に行揃えを指定する

chapter02/text/style.css

.text1 {
  text-align: right;
}

.text2 {
  text-align: center;
}

上書き保存
「css-lessons」 › 「chapter02」› 「text」フォルダ内の「index.html」をダブルクリック。
行揃えされていることを確認

ブラウザでの表示例

RERUN

新しいウインドウで表示する

テキストの装飾 `text-decoration` プロパティ

text(テキスト)-decoration(デコレーション)は、テキストの装飾を指定するプロパティ。
CSS3より、text-decoration-color、text-decoration-line、
text-decoration-style のショートハンド(一括設定)用のプロパティになったが、
ここでは、CSS2.1 での内容で記載。

初期値	値の継承	適用対象
`none`	しない	全要素

主な値
指定できる値	説明
`none`	装飾なし
`underline`	下線
`overline`	上線
`line-through`	打ち消し線

`text-decoration`プロパティを
使ってみよう

「css-lessons」 › 「chapter02」 › 「text」フォルダ内の「style.css」をテキストエディタで開く
「a要素」の下線をなしに、「em要素」に、打ち消し線を指定する

chapter02/text/style.css

a {
  text-decoration: none;
}

em {
  text-decoration: line-through;
}

.text1 {
  text-align: right;
}

.text2 {
  text-align: center;
}

上書き保存
「css-lessons」 › 「chapter02」› 「text」フォルダ内の「index.html」をダブルクリック。
装飾が変更されていることを確認

ブラウザでの表示例

RERUN

新しいウインドウで表示する

テキストの変形 `text-transform` プロパティ

text(テキスト)-transform(トランスフォーム)は、アルファベットを大文字や小文字に変換するプロパティ。
ソースコード上に全て大文字でかけばそのまま大文字で表示されるが、
音声読み上げソフトなどが正しく読み上げられない可能性がある。

初期値	値の継承	適用対象
`none`	する	全要素

主な値
指定できる値	説明
`uppercase`	半角のアルファベットをすべて大文字に変換
`lowercase`	半角のアルファベットをすべて小文字に変換
`capitalize`	半角のアルファベットの各単語の先頭の文字だけを大文字に変換
`none`	変換せずにそのまま表示

`text-transform`プロパティを
使ってみよう

「css-lessons」 › 「chapter02」 › 「text」フォルダ内の「style.css」をテキストエディタで開く
class名「text2」をすべて大文字に変換する

chapter02/text/style.css

a {
  text-decoration: none;
}

em {
  text-decoration: line-through;
}

.text1 {
  text-align: right;
}

.text2 {
  text-align: center;
  text-transform: uppercase;
}

上書き保存
「css-lessons」 › 「chapter02」› 「text」フォルダ内の「index.html」をダブルクリック。
大文字に変換されていることを確認

ブラウザでの表示例

RERUN

新しいウインドウで表示する

文字間のスペース `letter-spacing` プロパティ

letter(レター)-spacing(スペーシング)は、文字間のスペースを指定するプロパティ。

初期値	値の継承	適用対象
`normal`	する	全要素

主な値
指定できる値	説明
`normal`	通常の空き量
実数 + 単位	デフォルトの文字間に加えるスペース量を指定。負の値も指定可能 (例: `-.03em`)

`letter-spacing`プロパティを
使ってみよう

「css-lessons」 › 「chapter02」 › 「text」フォルダ内の「style.css」をテキストエディタで開く
class名「text1」や、 class名「text2」の文字間のスペースを変更する

chapter02/text/style.css

a {
  text-decoration: none;
}

em {
  text-decoration: line-through;
}

.text1 {
  text-align: right;
  letter-spacing: -.05em;
}

.text2 {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .1em;
}

上書き保存
「css-lessons」 › 「chapter02」› 「text」フォルダ内の「index.html」をダブルクリック。
文字間のスペースが変更されていることを確認

ブラウザでの表示例

RERUN

新しいウインドウで表示する

練習問題今回の理解度をチェック。

「chapter02」 › 「training」フォルダ内に「style.css」を作成し、
下記の問題を解いて下さい。

ブラウザでの完成例

RERUN

新しいウインドウで表示する

chapter02」 › 「training」フォルダ内に新規ファイルを作成して下さい。
- ファイル名： style.css
上記で作成したCSSファイルを、「training」フォルダ内にある「index.html」にリンクして下さい。

body要素に以下のスタイルを設定して下さい。

プロパティ	値
文字の書体	「游明朝」なければ、「ヒラギノ明朝 ProN W3」なければ、「HG明朝E」なければ、明朝系
行間	`1.6`

h1要素に以下のスタイルを設定して下さい。

プロパティ	値
文字の大きさ	`1.5em`
文字の太さ	`normal`

h2要素に以下のスタイルを設定して下さい。

プロパティ	値
テキストの行揃え	中央揃え
文字の大きさ	`2em`
文字間のスペース	`0.1em`

em要素に以下のスタイルを設定して下さい。

プロパティ	値
文字の太さ	太字
文字のスタイル	ノーマル

small要素に以下のスタイルを設定して下さい。

プロパティ	値
文字の大きさ	`0.75em`

各客室の「詳細を見る」に以下のスタイルを設定して下さい。

プロパティ	値
テキストの行揃え	右揃え

解答例

chapter02/training/index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>架空温泉 だみい屋</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>架空温泉 だみい屋</h1>
    <nav>
      <h2>サイト内メニュー</h2>
      <ul>
        <li><a href="#">お部屋</a></li>
        <li><a href="#">お食事</a></li>
        <li><a href="#">お風呂</a></li>
        <li><a href="#">施設案内</a></li>
        <li><a href="#">よくある質問</a></li>
        <li><a href="#">ご宿泊プラン・予約</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <section>
      <h2>大切な人と「ゆったり」過ごすお部屋。<br>ワンちゃんと「たっぷり」遊ぶお部屋。</h2>
      <p>
        だみい屋はビジネスや家族連れのお客様におすすめなスタンダードタイプのお部屋はもちろん、
        カップルにおすすめの<em>離れ</em>や、わんちゃん連れにおすすめな<em>ドッグラン付き</em>のお部屋をご用意致しております。
      </p>
      <section>
        <h3>ビジネスにおすすめ<br>スタンダード10畳</h3>
        <p>一番多い部屋数があるスタンダードの10畳のお部屋です。</p>
        <p class="text-right"><a href="#">スタンダード10畳の詳細を見る</a></p>
      </section>
      <section>
        <h3>カップルにおすすめ<br>離れ</h3>
        <p>プライベートな空間でゆったりできる、家族風呂付きの離れのお部屋です。</p>
        <p class="text-right"><a href="#">離れの詳細を見る</a></p>
      </section>
      <section>
        <h3>ワンちゃんにおすすめ<br>ドッグラン付き客室</h3>
        <p>ワンちゃんと一緒に旅行を楽しめる。ドッグラン付きのお部屋です。</p>
        <p class="text-right"><a href="#">ドッグラン付き客室の詳細を見る</a></p>
      </section>
    </section>

    <section>
      <h2>お客様の声</h2>
      <p>だみい屋に寄せられた「お客様の声」の一部をご紹介します。</p>
      <article>
        <h3>抜群のコストパフォーマンス！</h3>
        <p>部屋が広いくて料理もおいしい。繁華街からも近くてこの値段なら文句もないですね。</p>
        <footer>
          <p>S・Y さん</p>
        </footer>
      </article>
      <article>
        <h3>ドッグラン付きがうれしい！</h3>
        <p>
          温泉旅館で、ドッグランがついてる部屋があるのが嬉しいです。
          ただ、畳は少し凸凹してました。ワンちゃんがお部屋の中で走ってるからかな？
          まぁ私にとっては大満足な旅館でした。
        </p>
        <footer>
          <p>山田 さん</p>
        </footer>
      </article>
    </section>
  </main>

  <footer>
    <address>
      架空温泉 だみい屋<br>
      〒56X-00XX<br>
      大阪府架空市架空区架空1-1-1
    </address>
    <p><small>© 2018 架空温泉 だみい屋.</small></p>
  </footer>
</body>
</html>

chapter02/training/style.css

body {
  font-family: 游明朝, "ヒラギノ明朝 ProN W3", "HG明朝E", serif;
  line-height: 1.6;
}

h1 {
  font-size: 1.5em;
  font-weight: normal;
}

h2 {
  text-align: center;
  font-size: 2em;
  letter-spacing: 0.1em;
}

em {
  font-weight: bold;
  font-style: normal;
}

small {
  font-size: .75em;
}

.text-right {
  text-align: right;
}

解答例は全問題のチェックボックスが on になるとご覧いただけます。

まとめフォントやテキストに関する
プロパティはたくさんある。

フォント関連やテキスト関連に様々なプロパティがある
今回紹介したプロパティ以外にもあるので、調べてみるとよい。

フォント関連やテキスト関連様々なプロパティがある
font-sizeは相対単位で指定する
全て大文字のアルファベットは、text-transformで変換する

Chapter02 フォントとテキスト

font-sizeプロパティを使ってみよう。

font-familyプロパティを使ってみよう

font-weightプロパティを使ってみよう

font-styleプロパティを使ってみよう

line-heightプロパティを使ってみよう

指定順序

fontプロパティを使ってみよう

text-alignプロパティを使ってみよう

text-decorationプロパティを使ってみよう

text-transformプロパティを使ってみよう

letter-spacingプロパティを使ってみよう

`font-size`プロパティを
使ってみよう。

`font-family`プロパティを
使ってみよう

`font-weight`プロパティを
使ってみよう

`font-style`プロパティを
使ってみよう

`line-height`プロパティを
使ってみよう

`font`プロパティを使ってみよう

`text-align`プロパティを使ってみよう

`text-decoration`プロパティを
使ってみよう

`text-transform`プロパティを
使ってみよう

`letter-spacing`プロパティを
使ってみよう