HTML/CSS入門編｜14章：擬似要素の使い方を学ぼう

INDEX

HTML/CSS入門編 14章擬似要素の使い方を学ぼう

この章の目安学習時間:65分

この章では、要素内の特定の部分に対してスタイル指定を行う擬似要素の使い方を学びます。
より洗練されたデザインをCSSで実現するために多用されますので、ぜひ使い方をマスターしてください。

演習素材について
本章では、「14章擬似要素の使い方を学ぼう」フォルダ内の演習データを使用します。
「14章擬似要素の使い方を学ぼう」フォルダの中には、「breadcrumbs-lesson」「midashi_design-lesson」「photo-gallery-space-between」「position_absolute_fluid_layout」フォルダが入っています。

「14章擬似要素の使い方を学ぼう」フォルダ
- start：作業前のデータが入っています。
- fin：完成データが入っています。

演習を行う際には、「start」フォルダ内のファイルを使用してください。
自分で書いたコードがうまく表示されないときは、「fin」フォルダ内の完成データとの違いを探してみると良いでしょう。

※「HTML/CSS入門編はじめに - Webページのことを知ろう」の「【0-4】HTML/CSS 入門編演習素材のダウンロード」節で、本教材の演習で使用するデータをまとめてダウンロードすることができます。

【14-1】擬似要素とは

目安の学習時間:5分

擬似要素とは、HTMLのソースコード中には存在しない特定の部分に、要素が存在するかのようにスタイリング指定を行うためのCSSセレクタの記述方法のことです。
擬似要素にはいろいろな種類のものがありますが、次の書式で記述します。
- セレクタの後に「::」（ダブルコロン）と擬似要素名をつなげて表現します。
主な擬似要素には以下のようなものがあります。

■ 主な擬似要素

擬似要素	説明
::before	指定した要素内の先頭
::after	指定した要素内の末尾
::first-letter	指定した要素の最初の1文字
::first-line	指定した要素の最初の1行
::placeholder	フォームのプレースホルダーのスタイル変更
::selection	選択されたテキストのスタイル変更

これらの擬似要素の中で、最もよく使われるのは ::before と ::after です。
【14-2】〜【14-5】では、サンプルファイルを作成しながら、この2つの擬似要素の実践的な使い方を紹介していきます。

※「::before」は「指定した要素内の先頭」という意味の擬似要素です。

【14-2】パンくずリストをつくろう

目安の学習時間:15分

Webサイトの補助的なナビゲーションとしてよく設置されるパンくずリストを、擬似要素を使ってコーディングしてみたいと思います。

ここからの演習では、「breadcrumbs-lesson」フォルダ内のファイルを使用します。

演習の準備

「start」フォルダ内のindex.htmlと「css」フォルダ内のstyle.cssをエディターで開きます。
ブラウザプレビューします。

index.htmlには必要なHTMLタグが記述されています。
style.cssが関連付けられています。
reset.cssはまだ関連付けされていません。

■ start/index.html

<!DOCTYPE HTML>
<html>

<head>
  <meta charset="UTF-8">
  <title>パンくずリストを作ろう</title>
  <!-- <link href="css/reset.css" rel="stylesheet" type="text/css"> -->
  <link href="css/style.css" rel="stylesheet" type="text/css">
</head>

<body>
  <h1>パンくずリストをつくろう</h1>

  <nav>
    <ol class="breadcrumbs">
      <li><a href="#">HOME</a></li>
      <li><a href="#">レシピ</a></li>
      <li><a href="#">イタリア料理</a></li>
      <li>パスタ</li>
    </ol>
  </nav>

</body>

</html>

HTML/CSS入門編サンプルコード14-1

■ style.css

@charset "UTF-8";

body {
  font-family: sans-serif;
}

h1 {
  font-size: 30px;
  font-weight: bold;
  margin: 30px 0 30px 30px;
}

ol {
  margin: 0 0 0 40px;
}

HTML/CSS入門編サンプルコード14-2

パンくずリストとは？
パンくずリスト（英語：breadcrumbs）とは、Webサイトのページ階層をリスト形式で表示し、「今見ているページが、サイト内のどこに位置しているか」をユーザーに分かりやすく伝えるために用いられるナビゲーションの一種です。

例1. レシピサイト

ホーム › レシピ › イタリア料理 › パスタ

例2. コーポレートサイト

HOME › 会社情報 › 採用情報 › 募集要項

このような見た目のナビゲーションがパンくずリストです。
右端の現在ページの項目以外にはaタグでリンクを設定します。

■ パンくずリストを設置するメリット
パンくずリストをページの上部（ヘッダー直下）に設置することにより、次の利点があります。

・ 今、どのページを見ているかが一目で分かる。
・ 上の階層のページに戻れる。
・ サイトの構造を把握できる。

※補助的なナビゲーションとしてフッター付近に設置されることもあります。

■ どのようなサイトに必要？
パンくずリストは、全てのサイトに必須のナビゲーションではありませんが、次のような特徴を持つサイトに設置すると、サイトの操作性の向上に役立ちます。

・ 階層が深いサイト
  ・カテゴリ → サブカテゴリ → 詳細ページ という構造があるサイトに有用。
・ページ遷移が多い大規模なサイト
  ・ページ遷移のガイドとして有用。

反対に、スクロール主体で見せる縦長のシングルページには不要と言えるでしょう。

■ パンくずリストが設置されているサイト例

東京ディズニーリゾート https://www.tokyodisneyresort.jp/

■ 名前の由来は？
グリム童話『ヘンゼルとグレーテル』のエピソードが由来です。
森の中で迷わないように「パンくずを落としながら歩いた」ことから、元の場所に戻れる手がかりとしてのパンくずという発想です。

完成イメージを確認しよう

今回作成するパンくずリストは、トップページから4階層目のページに設置するパンくずリストを想定しています。

パンくずリストは、通常、階層リンクごとに区切りの記号を入れます。
- よく使われる記号は、矢印に似た「>」や「›」です。
- その他に、「/」や「|」などが使われることもあります。
最後の現在ページを表すリスト項目にはリンクを設定しないのが普通です。
- 今回は太字にして現在ページであることを強調します。

【画面収録】パンくずリスト完成

HTML/CSS 14-1

パンくずリストのHTMLマークアップを確認しよう

まずは、HTMLマークアップを確認しましょう。

パンくずリストのHTML構造化は、グローバルナビゲーションのようにulタグではなく、olタグを使って行うことが一般的に正しいとされています。
サイトの階層を表現するためには、番号付きリストが相応しいと考えられるからです。
また、パンくずリストの構造化には、必ずしもnavタグによるマークアップは必要とされませんが、パンくずリストもサイトにとって重要なナビゲーションのひとつであるとの判断から、セマンティックなマークアップを心がけ、navタグでリスト全体を囲んでいます。
olタグにのみclass名をつけ、他の要素は子孫セレクタで指定するというコーディング計画で作成していきます。

■ index.html（パンくずリストのマークアップ）

<nav>
  <ol class="breadcrumbs">
    <li><a href="#">HOME</a></li>
    <li><a href="#">レシピ</a></li>
    <li><a href="#">イタリア料理</a></li>
    <li>パスタ</li>
  </ol>
</nav>

HTML/CSS入門編サンプルコード14-3

また、コメントアウトされているreset.cssを関連付けるためのlinkタグを有効にしておきましょう。
reset.css内には ul,ol {list-style: none;} が記述されていますので、適用されると、リストの連番が非表示になります。

■ index.html（reset.cssを関連付けする）

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="UTF-8">
  <title>パンくずリストを作ろう</title>
  <link href="css/reset.css" rel="stylesheet" type="text/css">
  <link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<!--以下省略-->

HTML/CSS入門編サンプルコード14-4

■ ブラウザプレビュー（reset.css適用前）

■ ブラウザプレビュー（reset.css適用後）

Flexboxでli要素を横並びにしよう

CSSによるスタイリングを行います。

まずは、リストの項目（li要素）を横並びにしましょう。
親要素（ol要素 class名：breadcrumbs）にdisplay:flex;を指定します。

style.css

.breadcrumbs {
  display: flex;
}

HTML/CSS入門編サンプルコード14-5

■ ブラウザプレビュー

最後のli要素のみを太字にしよう

パンくずリストは最後のリスト項目が現在ページを表します。
現在ページであることを強調するために、太字にしてみたいと思います。
該当のliタグにclass名をつけてピンポイントでスタイル指定を行う方法でも良いのですが、今回は:last-childという擬似クラスを使い、セレクタで「最後の子要素」を指定します。

※擬似クラスについては「HTML/CSS入門編 6章よく使うセレクタを学ぼう」を参照

次のように記述すると、li要素の親要素（ol要素）内の最後の子要素（すなわち一番最後のli要素）を指定できます。

■ style.css

.breadcrumbs li:last-child {
  font-weight: bold; /*太字*/
}

HTML/CSS入門編サンプルコード14-6

■ ブラウザプレビュー

擬似要素 ::after を使って記号「›」を追加しよう

いよいよ擬似要素の登場です。

擬似要素 ::after は、指定した要素内の末尾という意味です。
li要素内の末尾を指定するためのセレクタは、.breadcrumbs li::after となります。
li要素内の末尾に「›」を追加するために、contentプロパティを使います。
追加された「›」の左右に5pxのマージンの指定もします。

■ style.css

.breadcrumbs li::after {
  content: "›"; /*li要素内の末尾に「›」を追加*/
  margin: 0 5px; /*左右に5pxのマージン*/
}

HTML/CSS入門編サンプルコード14-7

ブラウザプレビュー

全てのli要素の末尾に「›」が追加されました。
しかし、ここで一つ問題があります。
- 一番最後のli要素「パスタ」の末尾に追加された「›」がパンくずリストには不要であるため、ここには追加されないようにしたいのです。
- そこで、現状のCSSのコードを、最後のli要素以外のli要素の末尾に「›」を追加するという意味に修正してみたいと思います。

contentプロパティとは

contentプロパティは、擬似要素 ::before や ::after とセットで使用されるプロパティです。
要素の前後にテキストや画像などのコンテンツを追加するために使います。
このプロパティを使うことで、HTMLのマークアップに直接変更を加えずに、CSSのみでコンテンツを挿入することができます。
このときに挿入されるコンテンツはinline要素です。

■ contentプロパティの記述方法

/*要素内の先頭にコンテンツを追加する*/
セレクタ::before{
    content: '追加する内容';
}

/*要素内の末尾にコンテンツを追加する*/
セレクタ::after{
    content: '追加する内容';
}

▪️使用例
HTML

<p>五反田花子</p>

HTML/CSS入門編サンプルコード14-8

CSS

p::before {
  content: "ようこそ";
}

p::after {
  content: "さん";
}

HTML/CSS入門編サンプルコード14-9

ブラウザプレビュー

最後のli要素以外のli要素の末尾に「›」を追加しよう

:not()という擬似クラスを使用すると、特定のセレクタを除外したセレクタの指定が可能です。
:not()の記述方法は次のとおりです。

■ 擬似クラス :not()の記述方法

セレクタ:not(除外したいセレクタ) {
  
}

擬似クラス :not()の記述方法

:not()と、擬似クラスの last-child（最後の子要素）を組み合わせることにより、最後のli要素以外のli要素の末尾に「›」を追加することができます。
次のようにコードを書き換えてみましょう。

.breadcrumbs li:not(:last-child)::after {
  content: "›";
  margin: 0 5px;
}

HTML/CSS入門編サンプルコード14-10

少し複雑なセレクタの記述になってしまいましたが、思い通りのスタイリングが実現できました。
擬似クラスと擬似要素の組み合わせで、このように込み入ったセレクタ表現もできますので、ぜひ習得して頂きたいと思います。

■ ブラウザプレビュー

テキストのスタイリングをしよう

最後に、リンクテキストと通常テキストのスタイリングを指定すれば完成です。
以下のコードで文字サイズや文字色、マウスホバー時の設定をします。

■ style.css

.breadcrumbs li {
  font-size: 14px;
  color: #333333;
}

.breadcrumbs a {
  color: #333333;
  text-decoration: none;
}

.breadcrumbs a:hover {
  text-decoration: underline;
}

HTML/CSS入門編サンプルコード14-11

以下は、CSSの全コードです。

■ style.css

@charset "UTF-8";

body {
  font-family: sans-serif;
}

h1 {
  font-size: 30px;
  font-weight: bold;
  margin: 30px 0 30px 30px;
}

ol {
  margin: 0 0 0 40px;
}

.breadcrumbs {
  display: flex;
}

.breadcrumbs li:last-child {
  font-weight: bold;
}

.breadcrumbs li:not(:last-child)::after {
  content: "›";
  margin: 0 5px;
}

.breadcrumbs li {
  font-size: 14px;
  color: #333333;
}

.breadcrumbs a {
  color: #333333;
  text-decoration: none;
}

.breadcrumbs a:hover {
  text-decoration: underline;
}

HTML/CSS入門編サンプルコード14-12

■ ブラウザプレビューパンくずリスト完成

【画面収録】パンくずリスト完成

HTML/CSS 14-2

【14-3】見出しをデザインしよう

目安の学習時間:15分

続いて、擬似要素を使った見出しデザインの方法を紹介します。

ここからの演習では、「midashi_design-lesson 」フォルダ内のファイルを使用します。

演習の準備

「start」フォルダ内のindex.htmlと「css」フォルダ内のstyle.cssをエディターで開きます。
ブラウザプレビューします。

3つあるh3要素を、それぞれ異なるデザインにスタイリングします。
見出しの書体と文字サイズは設定済みで、あらかじめ中央揃えにしてあります。

■ start/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>見出しをデザインしよう</title>
    <link href="css/reset.css" rel="stylesheet" type="text/css">
    <link href="css/style.css" rel="stylesheet" type="text/css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap"
      rel="stylesheet">
  </head>

  <body>
    <h1>見出しをデザインしよう</h1>

    <h2>ラインを引いた見出しデザイン1</h2>
    <h3 class="heading_line1">COMPANY</h3>

    <h2>ラインを引いた見出しデザイン2</h2>
    <h3 class="heading_line2">NEWS</h3>

    <h2>見出しの先頭にアイコンを表示しよう</h2>
    <h3 class="heading_icon">CONTACT</h3>
    
  </body>
</html>

HTML/CSS入門編サンプルコード14-13

■ style.css

@charset "UTF-8";

body {
  font-family: "Roboto", sans-serif;
}

h1 {
  font-size: 34px;
  text-align: center;
  margin: 30px 0 50px 30px;
}

h2 {
  font-size: 14px;
  font-weight: normal;
  text-align: center;
  margin-bottom: 20px;
}

h3 {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: 1px;
  text-align: center;
  margin-bottom: 70px;
}

HTML/CSS入門編サンプルコード14-14

■ ブラウザプレビュー（スタイリング前）

下がスタイリング後の完成した見出しデザインです。

■ ブラウザプレビュー　完成

ラインを引いた見出しをデザインしよう

ラインを引いた見出しデザイン1

■ HTML

<h2>ラインを引いた見出しデザイン1</h2>
<h3 class="heading_line1">COMPANY</h3>

HTML/CSS入門編サンプルコード14-15

■ CSS

.heading_line1 {
  color: #0487df; /*文字色　ブルー*/
  display: flex; /*Flexboxを有効にする*/
  flex-direction: column; /*縦方向にテキストと擬似要素のラインを整列*/
  align-items: center; /*中央揃え*/
}

.heading_line1::after {
  content: ""; /*h3要素の末尾に空のコンテンツを追加*/
  display: block; /*ブロック要素に変換*/
  width: 55px; /*幅*/
  height: 4px; /*高さ*/
  border-radius: 4px; /*角の丸み*/
  background-color: #0487df; /*背景色　ブルー*/
  margin-top: 8px; /*テキストとの間の余白*/
}

HTML/CSS入門編サンプルコード14-16

■ ブラウザプレビュー

解説

テキストの下に、テキスト幅よりも短いライン（太さ4px）が引かれたデザインの見出しです。
単にh3要素にborder-bottomを指定するだけでは、文字幅と同じラインになってしまいますので、このデザインをCSSによって実現するためには工夫が必要です。

▪️作成方法

h3要素の末尾に擬似要素 ::after で空のコンテンツを追加します。
※空のコンテンツは""で表します。
contentプロパティで追加したコンテンツはinline要素ですので、幅・高さが設定できません。そこで、displayプロパティでブロック要素に変換した後に、幅（55px）・高さ（4px）の指定を行います。
この細長い長方形のボックスに背景色（#0487df）を指定することにより、テキスト下のラインとしてスタイリングします。
border-radiusで角に丸みをつけ、margin-topでテキストとの間の余白を調整します。
h3要素には文字色を指定し、Flexboxで縦方向にテキストと擬似要素のラインを整列させ、中央揃えにすれば完成です。

ラインを引いた見出しデザイン2

■ HTML

<h2>ラインを引いた見出しデザイン2</h2>
<h3 class="heading_line2">NEWS</h3>

HTML/CSS入門編サンプルコード14-17

■ CSS

.heading_line2 {
  color: #06a837; /*文字色　グリーン*/
  display: flex; /*Flexboxを有効にする*/
  justify-content: center; /*子要素を水平方向に中央揃え*/
  align-items: center; /*子要素を垂直方向に中央揃え*/
}


.heading_line2::before,
.heading_line2::after {
  content: ""; /*h3要素内の先頭と末尾に擬似要素を追加*/
  display: block; /*ブロック要素に変換*/
  width: 30px; /*幅*/
  height: 4px; /*高さ*/
  background-color: #06a837; /*背景色　グリーン*/
}

.heading_line2::before {
  margin-right: 6px; /*左のラインとテキストの間の余白*/
}

.heading_line2::after {
  margin-left: 6px;/*右のラインとテキストの間の余白*/
}

HTML/CSS入門編サンプルコード14-18

ブラウザプレビュー

解説

テキストの左右に同じ幅のラインがあしらわれたデザインの見出しです。
これも擬似要素を使い作成することができます。

▪️作成方法

h3要素の先頭と末尾に擬似要素 ::before と ::after で空のコンテンツを追加します。
※空のコンテンツは""で表します。
contentプロパティで追加したコンテンツはinline要素ですので、幅・高さが設定できません。そこで、displayプロパティでブロック要素に変換した後に、幅（30px）・高さ（4px）の指定を行います。
この2つの長方形のボックスに背景色（#06a837）を指定することにより、テキストの左右にあるラインとしてスタイリングします。
h3要素には文字色を指定し、Flexboxで擬似要素とテキストを横並びにし、水平・垂直方向共に中央揃えの指定を行います。
テキストとラインの間隔をmarginで設定すれば完成です。

見出しの先頭にアイコンを表示しよう

■ HTML

<h2>見出しの先頭にアイコンを表示しよう</h2>
<h3 class="heading_icon">CONTACT</h3>

HTML/CSS入門編サンプルコード14-19

■ CSS

.heading_icon::before {
  content: ""; /*h3要素内の先頭に擬似要素を追加*/
  display: inline-block; /*幅・高さは指定できるが改行はしないインラインブロックの指定*/
  width: 38px; /*幅*/
  height: 20px; /*高さ*/
  background-image: url(../images/mail-icon.svg); /*背景画像を指定*/
  background-repeat: no-repeat; /*背景画像のリピートなし*/
  background-size: contain; /*背景画像が要素の中に収まるように縮小して表示*/
}

HTML/CSS入門編サンプルコード14-20

■ ブラウザプレビュー

解説

テキストの先頭にメールアイコン（svg画像）を添えたデザインの見出しです。
これも擬似要素を使い作成します。

▪️作成方法

h3要素の先頭に擬似要素 ::before で空のコンテンツを追加します。
※空のコンテンツは""で表します。
contentプロパティで追加したコンテンツはinline要素ですので、幅・高さが設定できません。幅・高さを設定した上で、擬似要素とテキストは改行せず横に並ぶように、displayプロパティでinline-blockを指定します。
このボックスに幅（38px）と高さ（20px）を指定し、メールアイコンの背景画像（mail-icon.svg）を指定します。
背景画像のリピートなし（background-repeat: no-repeat;）、背景画像サイズは要素の中に収まるように縮小して表示（background-size: contain;）の指定をすれば完成です。

【14-4】justify-content:space-between;で真ん中が空いてしまう問題に対処しよう

目安の学習時間:10分

次に、Flexboxでリストをjustify-content:space-between;で両端揃え・均等配置にした際に起こる問題の対処法を解説します。

ここからの演習では、「photo-gallery-space-between」フォルダ内のファイルを使用します。

HTML/CSS入門編 10章 Flexboxを学ぼう の【10-5】画像を等間隔に配置しよう で作成したレイアウトは、リストでマークアップした6枚の画像を3枚横並びにし、4枚目から折り返す指定をしました。
画像を増やしていけば、次は7枚目から折り返します。
このレイアウト方法の問題点は、両端揃えの指定がされているため、画像が2枚・5枚・8枚...になったときに、真ん中に1枚分の空白が出来てしまうことです。

ブラウザプレビュー（対処前）

この問題を、擬似要素を使って解決したいと思います。

画像が2枚並ぶ行が出来たときには左寄せになり、右端に画像1枚分の空白ができるレイアウトにできれば成功です。

演習の準備

「start」フォルダ内のindex.htmlと「css」フォルダ内のstyle.cssをエディターで開きます。
ブラウザプレビューします。

■ start/index.html

<!DOCTYPE HTML>
<html>

<head>
  <meta charset="UTF-8">
  <title>東京観光Photoギャラリー</title>
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <header>
    <h1>東京観光Photoギャラリー</h1>
  </header>

  <main class="gallery-contents">
    <ul>
      <li><img src="images/tokyo-photo01.jpg" alt="東京タワー"></li>
      <li><img src="images/tokyo-photo02.jpg" alt="浅草雷門"></li>
      <li><img src="images/tokyo-photo03.jpg" alt="スカイツリー"></li>
      <li><img src="images/tokyo-photo04.jpg" alt="原宿竹下通り"></li>
      <li><img src="images/tokyo-photo05.jpg" alt="新宿歌舞伎町"></li>
      <!-- <li><img src="images/tokyo-photo06.jpg" alt="秋葉原電気街"></li> -->
    </ul>
  </main>

  <footer>
    <p>
      Copyright &copy; Tokyo Travel Photo Gallery All Rights Reserved.
    </p>
  </footer>
</body>

</html>

HTML/CSS入門編サンプルコード14-21

■ style.css

h1 {
  font-size: 35px;
  text-align: center;
  margin: 40px 0;
}

footer p {
  text-align: center;
  margin: 10px 0 50px;
}

.gallery-contents {
  width: 85%;
  max-width: 1280px;
  margin: 0 auto;
}

.gallery-contents ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.gallery-contents li {
  width: 30%;
  margin-bottom: 50px;
}

HTML/CSS入門編サンプルコード14-22

※この演習ファイルのCSSの解説は、HTML/CSS入門編 10章 Flexboxを学ぼうの【10-5】画像を等間隔に配置しようを参照してください。

解決策　ul要素の末尾の子要素として擬似要素を追加する

以下のCSSのコードを追加することにより、真ん中が空いてしまう問題を解決することができます。

.gallery-contents ul::after {
  content: ""; /*ul要素内の末尾に擬似要素を追加*/
  display: block;  /*ブロック要素に変換*/
  width: 30%; /*幅*/
}

HTML/CSS入門編サンプルコード14-23

解説

ul要素内の末尾に::afterで擬似要素を追加することにより対処します。

ul要素の末尾に擬似要素 ::after で空のコンテンツを追加します。
※空のコンテンツは""で表します。
contentプロパティで追加したコンテンツはinline要素ですので、幅（width）が設定できません。幅を設定できるようにするために、displayプロパティでblockを指定し、ブロック要素に変換します。
ブロック要素に変換した擬似要素に、li要素に指定されている幅（width）と同じ値（30%）を指定します。これが最後のli要素の隣でつっかい棒のような役割を果たします。

※もし表示する画像が3枚・6枚・9枚...だったとしても、追加される擬似要素は幅のみで高さを持ちませんので、レイアウトには影響ありません。

■ ブラウザプレビュー（解決後）

■ 並べる画像が6枚のとき

応用・豆知識：gapプロパティを使った解決策

この「最後の行が崩れる問題」は、10章で学んだgapプロパティを使うと、よりシンプルに解決できます。

justify-content: space-between; を使う代わりに、gapでアイテム間の余白を直接指定します。（例: gap: 20px;）
この方法なら、アイテムは左から順に並び、最後の行のレイアウトも自然なまま崩れません。

擬似要素を使った方法はテクニックの一つとして有用ですが、gapプロパティが使える場面では、そちらの方がコードが単純になるため、現代ではより一般的な手法です。

【14-5】サイズ可変の絶対配置のレイアウトを作成しよう

目安の学習時間:20分

本章の最後に、前章で作成したpositionプロパティのサイズ固定の絶対配置レイアウトを、擬似要素を使ってサイズ可変のレイアウトにする方法を解説します。
この方法を使うと、基準ボックスである親要素の高さが自動的に伸縮しないという絶対配置の問題点に対処することができます。

ここからの演習では、「position_absolute_fluid_layout」フォルダ内のファイルを使用します。

演習の準備

「start」フォルダ内のindex.htmlと「css」フォルダ内のstyle.cssをエディターで開きます。
ブラウザプレビューします。

まずは下の画面収録で、前章で作成したサイズ固定の絶対配置レイアウト（前章で作成したもの）と、今回作成するサイズ可変の絶対配置レイアウト（本章で作成するもの）を比較してください。
違いがわかりましたか？

可変レイアウトとは、ページの要素のサイズが、ブラウザ幅に応じて自動的に調整されるようなデザインのことです。
具体的には、要素の幅や高さをpxではなく、%やfr、vwやvhなどの相対的な単位で設定することにより実現します。

このデザイン手法は、現在のWebデザインの主流となっています。
これまでにも、Flexboxやグリッドレイアウトを作成する過程で、可変レイアウトの方法は学んできましたが、positionプロパティを使った絶対配置の可変レイアウトの方法をマスターすることにより、より柔軟で自由度の高いWebサイトのデザインを行うことができるようになるでしょう。

【画面収録】サイズ固定の絶対配置レイアウト（前章で作成したもの）

HTML/CSS 14-3

【画面収録】サイズ可変の絶対配置レイアウト（本章で作成するもの）

HTML/CSS 14-4

絶対配置の可変レイアウトの問題点を知ろう

現状のCSSのコードは、下の【図解】絶対配置の固定レイアウト仕様に沿ってコーディングされたもので、以下のとおりです。（前章で作成したもの）
main要素とその子要素のwidth、heightやtop、bottom、left、rightなどのプロパティの値は、基本的にpx指定されています。（画像の高さはauto指定）

■ style.css（main要素とその子要素に指定されたコードのみ）

.main-contents {
    width: 1240px;
    height: 925px;
    margin: 0 auto;
    position: relative;
}

.page-title {
    color: #BB0000;
    font-family: "Road Rage", sans-serif;
    font-size: 200px;
    font-weight: 400;
    font-style: normal;
    position: absolute;
    top: 487px;
    left: 49px;
    z-index: 4;
}

.mainvisual-img {
    width: 620px;
    height: auto;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 3;
}

.photo1-img {
    width: 358px;
    height: auto;
    position: absolute;
    top: 64px;
    left: 0;
    z-index: 1;
}

.photo2-img {
    width: 240px;
    height: auto;
    position: absolute;
    top: 243px;
    left: 278px;
    z-index: 2;
}

HTML/CSS入門編サンプルコード14-24

【図解】絶対配置の固定レイアウト仕様

上記の固定レイアウトを、下の【図解】絶対配置の可変レイアウト仕様に沿って可変レイアウトに修正してみましょう。
まずは、「.main-contents（main要素）」「.page-title（h1要素）」「.mainvisual-img（img要素）」「.photo1-img（img要素）」「.photo2-img（img要素）」に指定されているwidth、heightやtop、bottom、left、rightなどのプロパティの値を、「【図解】絶対配置の可変レイアウト仕様」の仕様通りに%指定に書き換えます。（0が指定されているところはそのままにしておきます。）
ここでのポイントは、main要素の高さをどのように指定するか、ということです。
- 例えば、main要素（.main-contents）のheightを100%と指定したとしても、高さは設定されません。※ブラウザプレビュー（main要素のheightを100%と指定した場合）参照
- なぜなら、heightの%指定が有効になるのは、親要素にheightが指定されているときのみだからです。
- そうかといって、基準ボックスのheightを元のpx指定のままにすると、ブラウザ幅によってはコンテンツのはみ出しや、大きな余白の発生といった問題が生じます。※【画面収録】（main要素のheightを925pxと指定した場合）参照
  - heightのpxの数値を変えて調整しようとしても、どこかに必ず表示の不具合が出ます。

■ style.css（%指定に書き換えたもの）

.main-contents {
  width: 85%; /*%指定に書き換え*/
  max-width: 1440px; /*最大幅を追加*/
  height: 925px;
  margin: 0 auto;
  position: relative;
}

.page-title {
  color: #bb0000;
  font-family: "Road Rage", sans-serif;
  font-size: 200px;
  font-weight: 400;
  font-style: normal;
  position: absolute;
  top: 50%; /*%指定に書き換え*/
  left: 9%; /*%指定に書き換え*/
  z-index: 4;
}

.mainvisual-img {
  width: 50%;/*%指定に書き換え*/
  height: auto;
  position: absolute;
  top: 0;/*そのまま*/
  right: 0;/*そのまま*/
  z-index: 3;
}

.photo1-img {
  width: 28%;/*%指定に書き換え*/
  height: auto;/*そのまま*/
  position: absolute;
  top: 7%; /*%指定に書き換え*/
  left: 0; /*そのまま*/
  z-index: 1;
}

.photo2-img {
  width: 18%; /*%指定に書き換え*/
  height: auto; /*そのまま*/
  position: absolute;
  top: 22%; /*%指定に書き換え*/
  left: 22%; /*%指定に書き換え*/
  z-index: 2;
}

HTML/CSS入門編サンプルコード14-25

【図解】絶対配置の可変レイアウト仕様

■ ブラウザプレビュー（main要素のheightを100%と指定した場合）

※親要素にheightが指定されていなければheightの%指定は無効になる。

【画面収録】（main要素のheightを925pxと指定した場合）

HTML/CSS 14-5

※ブラウザ幅を広げればコンテンツがフッターにはみ出し、狭めれば大きな余白ができる。

絶対配置の可変レイアウトの問題点が理解できましたでしょうか？

この問題を解決するために、擬似要素とpadding-topを使います。

擬似要素を使って基準ボックスに可変の高さを与えよう

main要素（.main-contents）内の先頭に擬似要素を追加し、padding-topを%で指定します。
このpadding-topにより、ボックスに擬似的な高さを与えます。
heightと違い、padding-topは親要素にheightの指定がされていなくても、%指定が効きます。
しかし、注意点は、widthに対するパーセンテージになるということです。
- 例えばpadding-top:100%;を指定すると、ボックスは正方形になります。
今回はコンテンツの縦横の比率がおおよそ100：75になりますので、padding-top:75%;を指定します。
main要素（.main-contents）には高さ（height）を指定しません。
ダミー背景色は、表示確認をして問題がなければ消しましょう。

■ style.css

.main-contents {
    width: 85%;
    max-width: 1440px;
    /*高さは指定しない*/
    margin: 0 auto;
    position: relative;
}

.main-contents::before {
  content: ""; /*main要素内の先頭に擬似要素を追加*/
  display: block; /*ブロック要素に変換*/
  padding-top: 75%; /*擬似要素にpadding-topを%指定 要素の幅に対するパーセンテージが設定される*/
  background-color: aqua; /*ダミー背景色*/
}

HTML/CSS入門編サンプルコード14-26

可変の高さを与えるもう一つの方法
擬似要素にpadding-topを%指定する方法以外には、aspect-ratioプロパティを使う方法があります。
aspect-ratioプロパティとは、要素の幅と高さの比率を指定できるCSSプロパティです。
今回の場合は、main要素にaspect-ratio: 100 / 75;と指定すれば、擬似要素を使う方法と結果は同じになります。
aspect-ratioは一部のブラウザ（Internet Explorer）では未対応のプロパティですが、モダンブラウザや最近のスマートフォンは全対応していますので、使用にほぼ問題はありません。こちらの方がわかりやすくてスマートですね。

.main-contents {
  width: 85%;
  max-width: 1440px;
  aspect-ratio: 100/75; /*ボックスの幅と高さの比率を指定*/
  margin: 0 auto;
  position: relative;
}

HTML/CSS入門編サンプルコード14-27

【図解】コンテンツの縦横比

【画面収録】擬似要素を使って基準ボックスに可変の高さを与える

HTML/CSS 14-6

h1要素の文字サイズを可変にしよう

最後に、h1要素の文字サイズを可変にすれば完成です。

ブラウザ幅に応じて文字サイズを可変にするためには、font-sizeプロパティの値をvw単位で指定します。
vw（viewport width）は、デバイスの画面サイズを表す単位です。
1vw = ブラウザ画面幅の1% と考えます。
- これは、文字1つ分のサイズが、画面幅の1%のサイズで可変するということです。
- 例えば、font-size : 14vw; は、文字1つのサイズがブラウザ画面幅の14%のサイズで可変するということです。

文字サイズをvw単位で指定するときの注意点
文字サイズをvw単位で指定するときの注意点は、ブラウザ画面幅に応じて文字サイズが可変するので、画面幅によっては、文字サイズが大きすぎたり小さすぎたりすることがあるという点です。

この問題に対処するために、clamp関数を使い、文字サイズの最小値と最大値を指定することが推奨されます。

■ clamp関数の書式

clamp(最小値, 推奨値, 最大値)

※clampは「制限する」の意

この書式でh1要素（.page-title）の文字サイズを適切に指定すると、次のようになります。

■ style.css

font-size: clamp(80px, 14vw, 240px);

HTML/CSS入門編サンプルコード14-28

これは、文字サイズが基本的に14vwで可変するが、ブラウザ幅を狭めても80px以下にはならず、ブラウザ幅を広げても240pxより大きくはならないという意味です。

【画面収録】h1要素の文字サイズを可変にする

HTML/CSS 14-7

完成

■ 完成版CSS全コード

@charset "UTF-8";

.header {
    width: 100%;
    height: 140px;
}

.menu {
    background-color: #292929;
    width: 50px;
    height: 50px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: fixed;
    top: 30px;
    right: 40px;
    z-index: 5;
}

.menu__line {
    display: block;
    width: 30px;
    height: 2px;
    background-color: #ffffff;
}

.menu__line--top {
    margin-bottom: 5px;
}

.menu__line--bottom {
    margin-top: 5px;
}

.main-contents {
    width: 85%;
    max-width: 1440px;
    /* aspect-ratio: 100/75; */
    margin: 0 auto;
    position: relative;
}

.main-contents::before {
    content: "";
    display: block;
    padding-top: 75%;
}

.page-title {
    color: #BB0000;
    font-family: "Road Rage", sans-serif;
    font-size: clamp(80px, 14vw, 240px);
    /*clampは「制限する」の意*/
    font-weight: 400;
    font-style: normal;
    position: absolute;
    top: 50%;
    left: 9%;
    z-index: 4;
}

.mainvisual-img {
    width: 50%;
    height: auto;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 3;
}

.photo1-img {
    width: 28%;
    height: auto;
    position: absolute;
    top: 7%;
    left: 0;
    z-index: 1;
}

.photo2-img {
    width: 18%;
    height: auto;
    position: absolute;
    top: 22%;
    left: 22%;
    z-index: 2;
}

.footer {
    height: 258px;
    background-color: #292929;
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer__copyright {
    font-size: 16px;
    color: #ffffff;
    font-family: "Roboto", sans-serif;
    font-weight: 100;
    font-style: normal;
    letter-spacing: 1px;
}

HTML/CSS入門編サンプルコード14-29

【画面収録】サイズ可変の絶対配置レイアウト完成

HTML/CSS 14-8

これで「HTML/CSS入門編 14章擬似要素の使い方を学ぼう」の解説を終わります。
次の章に進みましょう。

前の章に戻る次の章に進む