HTML/CSS入門編｜10章：Flexboxを学ぼう

HTML・CSS

INDEX

HTML/CSS入門編　10章：Flexboxを学ぼう

この章の目安学習時間：240分

本章では、現在主流のCSSレイアウトの手法であるFlexboxを学びます。
横並び、縦並び、中央揃えなどの基本のレイアウトから、要素の細かなサイズや位置の調整までを柔軟に設定することができる大変便利な手法です。
Webページの要素を思い通りにレイアウトするために必須の重要テクニックですので、しっかりと学んでいきましょう。

【10-1】Flexboxの基本を学ぼう

目安の学習時間：25分

演習素材について
本章では、「10章Flexboxを学ぼう」フォルダ内の演習データを使用します。
「10章Flexboxを学ぼう」フォルダの中には、「flexbox-lesson」と「navigation-lesson」「photo-gallery」フォルダが入っています。

「10章Flexboxを学ぼう」フォルダ
- start：作業前のデータが入っています。
- fin：完成データが入っています。

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

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

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

演習の準備

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

flexbox-lesson.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Flexboxを学ぼう</title>
    <link rel="stylesheet" href="css/reset.css" />
    <link rel="stylesheet" href="css/style.css" />
  </head>

  <body>
    <h1 class="heading">Flexboxを学ぼう</h1>

    <div class="flex-container">
      <p class="flex-item">flexitem1</p>
      <p class="flex-item">flexitem2</p>
      <p class="flex-item">flexitem3</p>
      <p class="flex-item">flexitem4</p>
      <p class="flex-item">flexitem5</p>
    </div>
  </body>
</html>

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

※reset.css（ミニマム&シンプルリセット）を関連付けしてあります。

css/style.css

@charset "UTF-8";

.heading {
  width: 800px;
  margin: 20px auto;
}

.flex-container {
  width: 800px;
  margin: 40px auto;
  background-color: #9dedea;
  border: 4px solid #000;
}

.flex-item {
  color: #fff;
  background-color: #e65c5c;
  width: 120px;
}

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

※h1、div、p要素に最低限の視認性を確保するためのCSSを適用してあります。

サンプルファイルの説明

サンプルファイル flexbox-lesson.htmlとstyle.cssは、Flexbox（フレックスボックス）によるレイアウト方法を学習するための教材ファイルです。
div要素に含まれる複数のp要素に対して、さまざまなプロパティを使い、柔軟にレイアウトの調整を行う練習をしながら、Flexboxの実践的な利用方法を学びます。
各要素の視認性を上げるために、div要素には幅（800px）、背景色（水色）、ボーダー（黒）を、p要素には幅（120px）、背景色（赤）、文字色（白）をあらかじめ適用してあります。

divタグとは？

HTMLサンプルコード10-1で使われているdivタグでマークアップされたdiv要素は、汎用のブロックボックスで、情報としての意味は持ちませんが、特定の要素をグループ化して、レイアウトや装飾を適用するために使われます。
今後、よく使用するタグですので覚えておいてください。

divタグ

<div>グループ化する要素</div>

HTMLサンプルコード

ブラウザプレビュー

Flexboxのしくみを学ぼう

Flexbox（正式名称：フレキシブルレイアウトボックス）は、現在主流のCSSのレイアウトシステムです。
Flexboxでは、「フレックスコンテナ」と呼ばれる親要素の中に「フレックスアイテム」と呼ばれる子要素を並べていく、という概念を使いレイアウトを行います。
もっともシンプルな使い方は、ある要素（親要素）に「display:flex;」を指定すると、その直下の子要素がフレックスアイテム化され、横一列に並ぶというものです。

flexboxの基本ルール

親要素（コンテナ）にdisplay: flex;を指定する
flexboxが有効化され、子要素は自動的に「横並び」になる
子要素の配置やサイズは関連のプロパティで調整できる

【図解】Flexboxの基本構造

【図解】Flexboxを有効化する

さらに、フレックスアイテム化された子要素は、関連のプロパティを使用することにより、以下のように細かな配置やサイズの指定を行うことができます。

Flexboxでできる子要素の配置の指定

縦並び・横並びの変更
水平方向の揃え（均等・中央・右・左）
垂直方向の揃え（均等・中央・上・下）
折り返しの指定
子要素同士の間隔の指定
並び順の指定
伸縮の指定

【図解】例1. 均等配置

【図解】例2. 折り返し

【10-2】親要素に指定するプロパティを覚えよう

目安の学習時間:60分

Flexboxのプロパティは、親要素（flexコンテナ）に指定するプロパティと、子要素（flexアイテム）に指定するプロパティに分かれます。
まずは、親要素（flexコンテナ）に指定するプロパティを解説します。
Webページのレイアウトによく使うものばかりですので、ひとつひとつのコードを自分で入力し、ブラウザプレビューを行い、使用方法をしっかりと身につけていきましょう。

子要素を横並びにしよう（display:flex;）

まずは、基本の使い方であるflexboxを有効化する方法を覚えましょう。
flexboxを有効化するためには、親要素に対してdisplay:flex;を指定します。
初期設定では、子要素が横一列に並びます。

【図解】Flexboxを有効化して子要素を横並びにする

<div class="flex-container">
  <p class="flex-item">flexitem1</p>
  <p class="flex-item">flexitem2</p>
  <p class="flex-item">flexitem3</p>
  <p class="flex-item">flexitem4</p>
  <p class="flex-item">flexitem5</p>
</div>

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

.flex-container {
  width: 800px;
  margin: 40px auto;
  background-color: #9dedea;
  border: 4px solid #000;
  display: flex;
}

.flex-item {
  color: #fff;
  background-color: #e65c5c;
  width: 120px;
}

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

ブラウザプレビュー

【画面収録】子要素を横並びにする

子要素の並ぶ向きの変更をしよう（flex-direction）

display:flex;で横並びにした子要素は、flex-directionプロパティで縦方向に並ぶ向きを変更することができます。
それだけでなく、縦並び・横並び共に逆順の指定も可能です。

flex-directionプロパティの値

1. row（初期値横並び）

row-reverse（横逆順）

column（縦並び）

column-reverse（縦逆順）

記述例　子要素を横逆順に並べる

.flex-container {
  width: 800px;
  margin: 40px auto;
  background-color: #9dedea;
  border: 4px solid #000;
  display: flex;
  flex-direction: row-reverse;
}

.flex-item {
  color: #fff;
  background-color: #e65c5c;
  width: 120px;
}

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

ブラウザプレビュー（row-reverse（横逆順））

ブラウザプレビュー（column（縦並び））

ブラウザプレビュー（column-reverse（縦逆順））

【画面収録】子要素の並ぶ向きを変更する

水平方向の揃えを指定しよう（justify-content）

display:flex;で横並びにした子要素は、justify-contentプロパティで水平方向の揃えを指定することができます。

justify-contentプロパティの値

1. flex-start（初期値左揃え）

2. flex-end（右揃え）

3. center（中央揃え）

4. space-between（均等配置・両端揃え）

5. space-around（均等配置・両端に余白）

space-betweenとspace-aroundの比較

値	両端のアイテムの位置	アイテム間の余白
space-between	端に接する	均等
space-around	少し内側に寄る	均等（両端は半分の余白サイズ）

justify-contentの注意点
flex-direction: column; を同時に指定した場合、justify-contentは「垂直方向」の揃えになります。

記述例　子要素を均等配置・両端揃えにする

.flex-container {
  width: 800px;
  margin: 40px auto;
  background-color: #9dedea;
  border: 4px solid #000;
  display: flex;
  justify-content:space-between;
}

.flex-item {
  color: #fff;
  background-color: #e65c5c;
  width: 120px;
}

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

ブラウザプレビュー（flex-end（右揃え））

ブラウザプレビュー（center（中央揃え））

ブラウザプレビュー（space-between（均等配置・両端揃え））

ブラウザプレビュー（space-around（均等配置・両端に余白））

【画面収録】水平方向の揃えを指定する

垂直方向の揃えを指定しよう（align-items）

display:flex;で横並びにした子要素は、align-itemsプロパティで垂直方向の揃えを指定することができます。
垂直方向の揃えを確認するために、親要素に高さ（height）200pxを指定してからalign-itemsを指定してみましょう。

align-itemsプロパティの値

stretch（初期値親要素と同じ高さになる）

flex-start（上揃え）

flex-end（下揃え）

center（中央揃え）

baseline（文字のベースラインが揃う）

align-itemsの注意点

親要素にdisplay:flex;を指定してflexboxを有効にした時点で、align-itemsプロパティの値はstretchが適用されています。
この値（stretch）は、子要素（flexアイテム）の高さが親要素（flexコンテナ）の高さいっぱいに伸びるという性質を持っています。
カラムレイアウトを作成する際には、この性質は制作者にとって都合が良いことが多いのですが、画像を子要素としていた場合などは、意図せず画像の高さが変わってしまい、表示崩れの原因となることがあります。
そのような場合、高さを伸ばしたくない子要素を別のタグで囲んだり、stretch以外の値を指定することにより対処することが可能です。
また、flex-direction: column; を同時に指定した場合は「水平方向」の揃えになります。

記述例1　子要素の垂直方向の位置を中央に設定する

.flex-container {
  width: 800px;
  height: 200px;
  margin: 40px auto;
  background-color: #9dedea;
  border: 4px solid #000;
  display: flex;
  align-items: center;
}

.flex-item {
  color: #fff;
  background-color: #e65c5c;
  width: 120px;
}

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

記述例2 baseline（文字のベースラインが揃う）

.flex-container {
  width: 800px;
  height: 200px;
  margin: 40px auto;
  background-color: #9dedea;
  border: 4px solid #000;
  display: flex;
  align-items: baseline;
}

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

※p要素にインラインで以下のCSS（font-sizeプロパティで異なる文字サイズ）を適用しています。

<div class="flex-container">
  <p class="flex-item" style="font-size:24px;">flexitem1</p>
  <p class="flex-item" style="font-size:10px;">flexitem2</p>
  <p class="flex-item" style="font-size:18px;">flexitem3</p>
  <p class="flex-item" style="font-size:16px;">flexitem4</p>
  <p class="flex-item" style="font-size:26px;">flexitem5</p>
</div>

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

ブラウザプレビュー（stretch（初期値親要素と同じ高さになる））

ブラウザプレビュー（flex-start（上揃え））

ブラウザプレビュー（flex-end（下揃え））

ブラウザプレビュー（center（中央揃え））

ブラウザプレビュー（baseline（異なる文字サイズでも文字のベースラインが揃う））

参考（異なる文字サイズでflex-startの場合）

【画面収録】垂直方向の揃えを指定する

子要素の折り返しを指定しよう（flex-wrap）

display:flex;で横並びにした子要素は、flex-wrapプロパティで折り返しの指定をすることができます。
初期値は折り返しの指定がされておらず（初期値：nowrap）、子要素の幅の合計が親要素の幅を超えた場合も、途中改行はされず、全てのアイテムが1行に収まるように縮小されます。
折り返しの確認をするために、HTMLサンプルコード10-10のように、子要素のpタグを増やしておきましょう。
また、親要素の高さ（height）は削除しておきます。

flex-wrapプロパティの値

1. nowrap（初期値子要素が縮小されて1行に収まる）

2. wrap（親要素の幅で折り返す）

3. wrap-reverse（逆方向に折り返し）

記述例　親要素の幅で折り返す

<div class="flex-container">
  <p class="flex-item">flexitem1</p>
  <p class="flex-item">flexitem2</p>
  <p class="flex-item">flexitem3</p>
  <p class="flex-item">flexitem4</p>
  <p class="flex-item">flexitem5</p>
  <p class="flex-item">flexitem6</p>
  <p class="flex-item">flexitem7</p>
  <p class="flex-item">flexitem8</p>
  <p class="flex-item">flexitem9</p>
  <p class="flex-item">flexitem10</p>
</div>

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

.flex-container {
  width: 800px;
  margin: 40px auto;
  background-color: #9dedea;
  border: 4px solid #000;
  display: flex;
  flex-wrap: wrap;
}

.flex-item {
  color: #fff;
  background-color: #e65c5c;
  width: 120px;
}

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

ブラウザプレビュー（nowrap（初期値子要素が縮小されて1行に収まる））

ブラウザプレビュー（wrap（親要素の幅で折り返す））

ブラウザプレビュー（wrap-reverse（逆方向に折り返し））

【画面収録】子要素の折り返しを指定する

子要素同士の間隔を指定しよう（gap）

display:flex;で横並びにした子要素同士の間隔は、gapプロパティで設定することができます。

gapプロパティの利点

marginやpaddingを使わなくても要素同士の間隔を一括指定できます。
子要素間のみに適用され、最初や最後の要素には影響しません。

gapプロパティで間隔が設定される箇所

※上図赤矢印の箇所の間隔が設定されます。

記述例　子要素同士の間隔を縦横共に20pxに設定する

HTML

<div class="flex-container">
  <p class="flex-item">flexitem1</p>
  <p class="flex-item">flexitem2</p>
  <p class="flex-item">flexitem3</p>
  <p class="flex-item">flexitem4</p>
  <p class="flex-item">flexitem5</p>
  <p class="flex-item">flexitem6</p>
  <p class="flex-item">flexitem7</p>
  <p class="flex-item">flexitem8</p>
  <p class="flex-item">flexitem9</p>
  <p class="flex-item">flexitem10</p>
</div>

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

CSS

.flex-container {
  width: 800px;
  margin: 40px auto;
  background-color: #9dedea;
  border: 4px solid #000;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.flex-item {
  color: #fff;
  background-color: #e65c5c;
  width: 120px;
}

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

ブラウザプレビュー（子要素同士の間隔を縦横共に20pxに設定する）

【画面収録】子要素同士の間隔を設定する

gapプロパティで縦横の間隔を別々に設定しよう

gapプロパティは縦方向と横方向の間隔を別々に設定することもできます。

.flex-container {
  width: 800px;
  margin: 40px auto;
  background-color: #9dedea;
  border: 4px solid #000;
  display: flex;
  flex-wrap: wrap;
  gap: 40px 20px;
}

.flex-item {
  color: #fff;
  background-color: #e65c5c;
  width: 120px;
}

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

ブラウザプレビュー（子要素同士の間隔を縦40px、横20pxに設定する）

【画面収録】子要素同士縦横の間隔を別々に設定する

複数行の子要素の縦方向の配置を指定しよう（align-content）

display:flex;で横並びにした複数行の子要素は、align-contentプロパティで縦方向の配置の指定をすることができます。
align-contentは、複数行の子要素をひとまとまりにして全体の配置を指定するプロパティです。
複数行の配置を確認するために、HTML/CSS入門編サンプルコード10-15のように、子要素のpタグを増やしておきましょう。
align-contentは利用可能な余白スペースに対して働くプロパティであるため、heightが設定されていないと効果がありません。
親要素の高さ（height）を300pxに設定しておきます。

align-contentプロパティの注意点

単一行では効果がなく、複数行になった場合にのみ適用されます。
複数行にするため、flex-wrap: wrap;が必須です。
単一行の場合はalign-itemsを使用します。
親要素にheightが指定されていないと効果がありません。

align-contentプロパティの値

1. stretch（初期値親要素の高さいっぱいに均等に広がる）

2. flex-start（上揃え）

3. flex-end（下揃え）

4. center（中央揃え）

5. space-between（均等配置・両端揃え）

6. space-around（均等配置・両端に余白）

記述例　中央揃え

HTML

<div class="flex-container">
    <p class="flex-item">flexitem1</p>
    <p class="flex-item">flexitem2</p>
    <p class="flex-item">flexitem3</p>
    <p class="flex-item">flexitem4</p>
    <p class="flex-item">flexitem5</p>
    <p class="flex-item">flexitem6</p>
    <p class="flex-item">flexitem7</p>
    <p class="flex-item">flexitem8</p>
    <p class="flex-item">flexitem9</p>
    <p class="flex-item">flexitem10</p>
    <p class="flex-item">flexitem11</p>
    <p class="flex-item">flexitem12</p>
    <p class="flex-item">flexitem13</p>
    <p class="flex-item">flexitem14</p>
    <p class="flex-item">flexitem15</p>
  </div>

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

CSS

.flex-container {
  width: 800px;
  height: 300px;
  margin: 40px auto;
  background-color: #9dedea;
  border: 4px solid #000;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-content: center;
}

.flex-item {
  color: #fff;
  background-color: #e65c5c;
  width: 120px;
}

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

ブラウザプレビュー（stretch（初期値親要素の高さいっぱいに均等に広がる））

ブラウザプレビュー（flex-start（上揃え））

ブラウザプレビュー（flex-end（下揃え））

ブラウザプレビュー（center（中央揃え））

ブラウザプレビュー（space-between（均等配置・両端揃え））

ブラウザプレビュー（space-around（均等配置・両端に余白））

【画面収録】複数行の子要素の縦方向の配置を指定する

以上が、親要素（flexコンテナ）に指定するプロパティです。
これらのプロパティは、複数の種類を組み合わせて使用することも可能です。
例えば、ある要素の横位置をjustify-content:space-between;で均等配置・両端揃えにすると同時に、align-items:center;で縦位置を中央にするなど。

【10-3】子要素に指定するプロパティを覚えよう

目安の学習時間：60分

続いて、子要素（flexアイテム）に指定するプロパティの解説をします。
子要素に指定するプロパティは、基本的に親要素に指定するプロパティで作成した土台となるレイアウトを補完するために使用するイメージです。

子要素が並ぶ順序を指定しよう（order）

通常、HTMLの各要素は記述された順番で表示されますが、display:flex;でアイテム化された子要素が並ぶ順序は、orderプロパティで指定することができます。

orderプロパティの値の記述方法

数値が小さい要素ほど先に表示される（整数値：-1などの負の値も設定できる）
数値が同じ場合は、HTMLの順序が適用される。
数値の初期値は0で、order: -1; の要素は、order: 0; の要素より前に配置される。

orderプロパティで指定した順序

※orderプロパティで指定した順番で子要素が表示される

orderプロパティの注意点

orderプロパティは見た目の順序が変更されるだけですので、スクリーンリーダー（音声読み上げ）では元の順番で読み上げられます。
したがって、要素の論理的順序が重要なコンテンツのレイアウト時に、orderプロパティに頼ることは避けた方がよいでしょう。

記述例（HTML）

<div class="flex-container">
  <p class="flex-item item1">flexitem1</p>
  <p class="flex-item item2">flexitem2</p>
  <p class="flex-item item3">flexitem3</p>
  <p class="flex-item item4">flexitem4</p>
  <p class="flex-item item5">flexitem5</p>
</div>

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

※orderプロパティは子要素ひとつひとつに個別に設定するため、上記HTML/CSS入門編サンプルコード10-17のように、各要素に異なるclass名をつけておきます。
元々書かれていたclass名（flex-item）の後に半角スペースを空けてから2つめのclass名（item1〜item5）を追加しましょう。

※複数のclass名の付け方は、「HTML/CSS入門編 6章よく使うセレクタを学ぼう」の「マルチクラスをおぼえよう」節を参照してください。

記述例（CSS）

.item1 {
  order: 3;
}

.item2 {
  order: 1;
}

.item3 {
  order: 5;
}

.item4 {
  order: 4;
}

.item5 {
  order: 2;
}

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

ブラウザプレビュー

【画面収録】子要素が並ぶ順序を指定する

子要素が伸びる比率を指定しよう（flex-grow）

flex-growプロパティは、子要素（フレックスアイテム）の「伸びる比率」を指定するプロパティです。
親要素（フレックスコンテナ）の余白がある場合、flex-growの値に応じた割合で余白を埋めます。

flex-growプロパティの値の記述方法

子要素にflex-grow: 1; を設定すると、親要素に余白がある場合に均等に伸びる。
特定の子要素の値を2以上にすると、他の子要素に対してその比率で伸びる。
例えば、flex-grow: 2;の要素は、flex-grow: 1;の要素の2倍の割合で伸びる。
数値の初期値は0で、flex-grow:0;の場合は、子要素の幅は伸びない。

flex-growプロパティで指定した伸びる比率

※flex-growプロパティで指定した比率で子要素が親要素の余白を埋める
※子要素2は子要素1と子要素3に対して2倍の幅に伸びる

flex-growプロパティの注意点

親要素に余白がなければflex-growは効きません。

記述例（HTML）

<div class="flex-container">
  <p class="flex-item item1">flexitem1</p>
  <p class="flex-item item2">flexitem2</p>
  <p class="flex-item item3">flexitem3</p>
</div>

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

記述例（CSS）

.item1 {
  background-color: #e65c5c;/*赤*/
  flex-grow: 1;/* 伸びる */
}

.item2 {
  background-color: #e6d15c;/*黄*/
  flex-grow: 2;/* 2倍の比率で伸びる */
}

.item3 {
  background-color: #d15ce6;/*紫*/
  flex-grow: 1;/* 伸びる */
}

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

ブラウザプレビュー

【画面収録】子要素が伸びる比率を指定する

子要素が縮む比率を指定しよう（flex-shrink）

flex-shrinkプロパティは、子要素（フレックスアイテム）の「縮む比率」を指定するプロパティです。
子要素の幅の合計が、親要素の幅を超えた場合、どの要素がどの程度の割合で縮むかを指定します。

flex-shrinkプロパティの値の記述方法

子要素にflex-shrink: 1;を設定すると、親要素の幅に子要素が収まりきらなくなった場合、均等に縮みます。
特定の子要素の値を2以上にすると、他の子要素に対してその比率で縮みます。
例えばflex-shrink: 2;の要素は、flex-shrink: 1;の要素の2倍の割合で縮みます。
数値の初期値は1で、flex-shrink: 0;の場合は、その要素の幅は縮みません。

flex-shrinkプロパティで指定した縮む比率

※親要素の幅に子要素が収まりきらない場合、子要素のflex-shrinkの値に応じた比率で縮む。

flex-shrinkプロパティの注意点

- 親要素に十分なスペースがある場合は、値を設定しても変化しない。
親要素にflex-wrap:wrap;があると、子要素が親要素の幅を超えると折り返してしまうので、flex-wrap:nowrap;を指定する。

flex-shrinkは、「親要素の幅が足りないとき」に効果が出るため、プレビューで縮む様子を確認しやすくするために、子要素の幅の合計が親要素の幅を超えるように指定しておきましょう。

記述例（HTML）

<div class="flex-container">
  <p class="flex-item item1">flexitem1</p>
  <p class="flex-item item2">flexitem2</p>
  <p class="flex-item item3">flexitem3</p>
</div>

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

記述例（CSS）

.flex-container {
  width: 800px;
  margin: 40px auto;
  background-color: #9dedea;
  border: 4px solid #000;
  display: flex;
  flex-wrap: nowrap;
}

.flex-item {
  width: 500px;
  color: #fff;
  background-color: #e65c5c;
}

.item1 {
  background-color: #e65c5c;/*赤*/
}

.item2 {
  background-color: #e6d15c;/*黄*/
  flex-shrink: 2;
}

.item3 {
  background-color: #d15ce6;/*紫*/
}

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

ブラウザプレビュー

【画面収録】子要素が縮む比率を指定する

子要素の初期サイズを指定しよう（flex-basis）

flex-basisプロパティは、子要素の初期サイズを決めるプロパティです。
widthやheightの代わりに子要素のサイズ指定をするために使用します。

プロパティ	説明
width / height	pxなどの固定値を指定した場合は基本的に伸縮しない（ただしmin/max-widthなどの制約やauto/%指定では伸縮する場合あり）
flex-basis	flex-growやflex-shrinkの基準となるサイズを指定する

flex-basisプロパティの注意点

flex-directionの値により指定される方向が変わります。
flex-direction:row;のとき → 横幅（width）が指定される。
flex-direction:column;のとき → 高さ（height）が指定される。

flexプロパティについて

flex-grow,flex-shrink,flex-basisの3つのプロパティをまとめて設定できるショートハンドプロパティがflexプロパティです。

記述例

.flex-item {
  flex: 2 1 200px;
}

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

上のプロパティでは、以下のように設定をしています。
flex-grow: 2; → 余ったスペースがあれば、2倍の割合で伸びる

flex-shrink: 1; → 親要素の幅にアイテムが収まりきらない場合、均等に縮む。

flex-basis: 200px; → アイテムの初期サイズが200px。

子要素の垂直方向の揃えを個別に指定しよう（align-self）

align-selfプロパティは、個々の子要素の縦方向の位置を調整するために使用するプロパティです。
特定の子要素（flexアイテム）に対して個別の位置調整が可能になります。

align-selfプロパティの注意点

親コンテナの縦方向（クロス軸）に余白がないと、見た目の変化が現れません。（例：親コンテナにheightが指定されていない、など）
これは個別のアイテムを揃えるためのプロパティです。
すべてのアイテムを一度に揃えるには、親コンテナにalign-itemsを指定します。
複数行全体の配置を調整するalign-contentプロパティとは役割が異なりますので、混同しないようにしましょう。

align-selfプロパティの値

auto（初期値親要素のalign-itemsの値が継承される）

flex-start（上揃え）

flex-end（下揃え）

center（中央揃え）

stretch（親コンテナの高さに合わせてアイテムを伸ばす）

baseline

記述例　中央揃え

<div class="flex-container">
  <p class="flex-item item1">flexitem1</p>
  <p class="flex-item item2">flexitem2</p>
  <p class="flex-item item3">flexitem3</p>
</div>

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

.flex-container {
  width: 800px;
  height: 200px;
  margin: 40px auto;
  background-color: #9dedea;
  border: 4px solid #000;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.flex-item {
  width: 200px;
  color: #fff;
  background-color: #e65c5c;
}

.item1 {
  background-color: #e65c5c;/*赤*/
}

.item2 {
  background-color: #e6d15c; /*黄*/
  align-self: center;
}

.item3 {
  background-color: #d15ce6;/*紫*/
}

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

ブラウザプレビュー

auto（初期値親要素のalign-itemsの値が継承される

flex-start（上揃え）

flex-end（下揃え）

center（中央揃え）

stretch

baseline

【10-4】ナビゲーションを作成しよう

目安の学習時間：50分

Flexboxの機能をひと通り学んだところで、Webサイトの構成要素として重要なナビゲーションを作成してみましょう。
ナビゲーションとは、ユーザーがWebサイト内をスムーズにページ遷移するためにデザインされたリンクやメニューの集まりのことです。
下の完成サンプルを確認してください。

【画面収録】ナビゲーション完成サンプル

ブラウザプレビュー

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

演習の準備

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

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>ナビゲーションをデザインしよう</title>
  </head>

  <body>
    <nav class="gnav">
      <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>
  </body>
</html>

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

ブラウザプレビュー

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>ナビゲーションをデザインしよう</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/style.css">
  </head>
  ・・・中略・・・
</html>

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

ブラウザプレビュー

reset.css（ミニマム&シンプルリセット）

* {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
}

ul,
ol {
        list-style: none;
}

img {
        max-width: 100%;
        height: auto;
        display: block;
}

button,
input,
textarea,
select {
        font: inherit;
}

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

※リセットCSSについては前章「HTML/CSS入門編 9章リセットCSSを学ぼう」を参照してください。

style.css

@charset "UTF-8";

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

ブラウザプレビュー

※reset.cssが適用されると、不要な余白がリセットされます。

【画面収録】CSSファイルの関連付け

reset.cssで余白をリセットすることにより、コーディングの準備ができました。
それでは、レイアウトや装飾の指定をstyle.cssに記述していきましょう。

ナビゲーションの情報構造を確認しよう

セマンティック要素とは

ナビゲーションのHTML構造図

ナビゲーションメニューのHTMLマークアップは、ulタグとliタグを使いリストとして構造化します。
各リスト項目はaタグでマークアップし、href属性でリンク先のページのファイルパスを指定しますが、今回はサンプルの作成であるため、リンク先は「#」としてページ遷移を無効にしておきます。
ul、li、aタグで構造化されたリストをさらにnavタグで囲みます。
navタグは、Webサイト固有のパーツを意味づけするためのタグの1つで、ナビゲーション部分を表します。
nav要素のように、コンテンツの意味や目的に基づいてマークアップするための要素のことを、セマンティック要素と呼びます。
「セマンティック（semantic）」とは「意味のある」という意味です。
h1やp、ul、ol要素なども意味を持つのでセマンティック要素ですが、見出しや段落テキスト、リストなどは、Webページに限らず、一般的な文書やレポート、論文などにも使われる概念であり、これらは基本的な文書の構造を定義するための要素です。
一方で、HTML5にはWebサイトの構造の意味づけに特化したタグが多数用意されています。

※下の表「HTML5の主なセマンティック要素一覧」を参照してください。

index.html

<nav class="gnav">
  <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>

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

HTML5の主なセマンティック要素一覧

タグ	意味・用途
<header>	ページやセクションのヘッダー部分通常はロゴやタイトル、ナビゲーションが含まれる
<nav>	ナビゲーションメニュー（主要なリンクの集まり）
<section>	セクション（テーマごとのまとまり）
<article>	独立したコンテンツとしての記事（ブログ記事やニュース記事など）
<aside>	補足情報（サイドバーなど）
<main>	ページの主要なコンテンツ部分
<footer>	フッター（コピーライトやサイト情報など）
<figure>	画像・図表などのコンテンツを含む要素
<figcaption>	<figure>のキャプション（説明文）
<mark>	強調したいテキスト
<time>	日付・時間の表記

上記のセマンティック要素は、Webページのレイアウトや装飾面のみを考慮するならば、全てdivタグ（情報としての意味を持たない汎用ブロック要素）で代用することが可能です。
しかし、divタグではなく、これらのセマンティック要素を使いWebページの情報を構造化することにより、以下のメリットがあります。

セマンティック要素を使うメリット
・コードの可読性の向上（視覚的にも論理的にも情報の流れが理解しやすくなる）
・コンテンツの役割が明確になることによるメンテナンス性の向上
・SEO（検索エンジン最適化）効果がある。（検索エンジンがページの意味を理解しやすくなり、コンテンツの評価が向上する）
・アクセシビリティの向上（スクリーンリーダーがページの構造を正確に認識し、視覚障害のあるユーザーにとって有用）

以上のことから、HTMLタグによるWebページの構造化を行う際には、上記のセマンティック要素を使うことを心がけましょう。

サイズと背景色を指定しよう

次の仕様でナビゲーションをコーディングします。

スタイリング仕様

プロパティ	値
幅	100%（ブラウザ幅いっぱい）
高さ	60px
背景色	#cb122a
li要素間の余白	35px
文字の装飾	下線なし
文字サイズ	14px
文字色	#ffffff（白）
文字の太さ	太字
書体	ゴシック（サンセリフ）
文字の影	1px 1px 3px #000000（黒）
マウスホバー時の文字の影	1px 1px 3px #ffffff（白）

サイズ（幅・高さ）と背景色の指定はnav要素に対して行います。
nav要素にはclass名（gnav）をつけてclassセレクタでCSSを記述しましょう。

style.css

@charset "UTF-8";

.gnav {
  width: 100%;
  height: 60px;
  background-color: #cb122a;
}

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

ナビゲーションの設計図

【画面収録】サイズと背景色を指定する

ブラウザプレビュー

li要素を横並びにしよう

続いて、Flexboxを有効にしてli要素を横並びにします。
li要素間の余白は35pxに設定します。
li要素を横並びにするためには、その直接の親要素であるul要素に対してdisplay:flex;を指定します。（nav要素ではないので注意！）
ulタグにclass名をつけてclassセレクタでCSSを記述してもよいですし、nav要素から始まる子孫セレクタでCSSを記述してもよいです。
今回は子孫セレクタを使用します。

style.css

@charset "UTF-8";

.gnav {
  width: 100%;
  height: 60px;
  background-color: #cb122a;
}

.gnav ul {
  display: flex;
  gap: 35px;
}

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

ブラウザプレビュー

【画面収録】 li要素を横並びにする

ul要素の水平・垂直方向の揃えを中央にしよう

ナビゲーション項目全体（ul要素）は、縦・横方向ともに中央に配置します。
ul要素の直接の親要素であるnav要素のFlexboxを有効にすれば、子要素であるul要素の揃えの指定をすることが可能になります。
今回のケースのようにFlexboxのアイテム（子要素）が1つしかないときも、このような使い方が可能です。
justify-contentプロパティの値をcenterに設定すれば、子要素であるul要素の横位置が中央になります。
align-itemsプロパティの値をcenterに設定すれば、子要素であるul要素の縦位置が中央になります。

style.css

@charset "UTF-8";

.gnav {
  width: 100%;
  height: 60px;
  background-color: #cb122a;
  display: flex;
  justify-content: center;
  align-items: center;
}

.gnav ul {
  display: flex;
  gap: 35px;
}

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

ブラウザプレビュー

【画面収録】ul要素の水平・垂直方向の揃えを中央に設定する

リンクテキストの装飾を指定しよう

土台となるレイアウトの作成ができましたので、リンクテキストの装飾に移りましょう。
以下のプロパティを使い、テキストの装飾を行います。

プロパティ	値
文字の装飾（text-decoration）	下線なし
文字サイズ（font-size）	14px
文字色（color）	#ffffff（白）
文字の太さ（font-weight）	太字（bold）
書体（font-family）	ゴシック（サンセリフ）
文字の影（text-shadow）	1px 1px 3px #000000（黒）

一般的なWebサイトではa要素はメインのナビゲーション項目以外の場所にも使用しますので、今回は子孫セレクタを使いnav要素の子孫要素であるa要素を指定してスタイリングを行います。

style.css

@charset "UTF-8";

.gnav {
    width: 100%;
    height: 60px;
    background-color: #cb122a;
    display: flex;
    justify-content: center;
    align-items: center;
}

.gnav ul {
    display: flex;
    justify-content: center;
    gap: 35px;
}

.gnav a {
    color: #fff;
    text-decoration: none;
    font-family: sans-serif;
    font-weight: bold;
    font-size: 14px;
    text-shadow: 1px 1px 3px #000000;
}

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

ブラウザプレビュー

【画面収録】リンクテキストの装飾を指定する

マウスホバー時のリンクテキストをスタイリングしよう

最後に、マウスホバー時のリンクテキストを装飾して完成です。
今回は、text-shadowプロパティの色を白に設定し、グロー効果（発光している感じ）を出します。
マウスホバー時の設定は擬似クラス：hoverを使います。
※HTML/CSS入門編 5章 CSSの基本を学ぼうの【5-6】リンクテキストにCSSを設定しようを参照してください。

プロパティ	値
マウスホバー時の文字の影（text-shadow）	1px 1px 3px #ffffff（白）

style.css

@charset "UTF-8";

.gnav {
    width: 100%;
    height: 60px;
    background-color: #cb122a;
    display: flex;
    justify-content: center;
    align-items: center;
}

.gnav ul {
    display: flex;
    justify-content: center;
    gap: 35px;
}

.gnav a {
    color: #fff;
    text-decoration: none;
    font-family: sans-serif;
    font-weight: bold;
    font-size: 14px;
    text-shadow: 1px 1px 3px #000000;
}

.gnav a:hover {
  text-shadow: 1px 1px 3px #ffffff;
}

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

ブラウザプレビュー

【画面収録】マウスホバー時のリンクテキストをスタイリングする

【10-5】画像を等間隔に配置しよう

目安の学習時間：45分

ナビゲーションと同じく、ulタグとliタグでマークアップしてよく作成するものに、画像をギャラリー形式で等間隔に並べて配置するレイアウトがあります。
サムネイルギャラリーなどと呼ぶこともあるこのレイアウトを、Flexboxで作成してみましょう。
ここからの演習では、「photo-gallery」フォルダ内のファイルを使用します。

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

【画面収録】東京観光Photoギャラリー完成サンプル

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

index.html

<!DOCTYPE HTML>
<html>

<head>
  <meta charset="UTF-8">
  <title>東京観光Photoギャラリー</title>
</head>

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

  <main>
    <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入門編サンプルコード10-37

続いて、CSSファイルを関連付けします。
cssフォルダ内には、reset.cssとstyle.cssが入っています。
reset.cssには前章で学習したミニマム&シンプルリセットのコードが書かれています。
両ファイルともlinkタグを使って関連付けしてください。
reset.cssを先に読み込ませます。
画像の周囲の余白や、リストのマーカー（黒丸）が消去されたことを確認しましょう。
スタイリングに使うstyle.cssをエディターで開きましょう。
h1要素とfooter内のp要素に対しては、簡単なCSSがあらかじめ適用されています。

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>

・・・以下省略・・・

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

■ style.css

@charset "UTF-8";

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

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

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

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

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

reset.cssで余白をリセットすることにより、コーディングの準備ができました。
それでは、レイアウトの指定をstyle.cssに記述していきましょう。

Photoギャラリーの情報構造を確認しよう

今回のようなサムネイルギャラリーのHTMLマークアップは、ulタグとliタグを使いリストとして構造化します。
li要素の子要素としてimg要素を1つずつ定義します。
意味的にリスト構造が適切な理由は、1枚1枚の画像が、画像一覧の中の1つの項目としての役割を持つからです。
このHTML構造には、Flexboxを使って等間隔に整列させやすいという利点もあります。

今回は、このギャラリー部分をページのメインコンテンツとして考え、セマンティック要素のmainタグ（ページの主要なコンテンツ部分を表すタグ）で囲んでいます。
CSSを記述する前に、下のPhotoギャラリーのHTML構造図をよく確認し、HTMLのコードと照らし合わせておきましょう。

index.html（ギャラリー部分）

<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>

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

PhotoギャラリーのHTML構造図

レイアウト仕様を確認しよう

今回は、次の設計方針に従い、Photoギャラリーをコーディングします。

Photoギャラリーの設計方針
・ブラウザウィンドウの横幅に対してコンテンツ幅が85%の比率で可変する。
・コンテンツの最大幅は1280px（これ以上広がらない）とする。
・写真は3枚ずつ均等サイズ（コンテンツに対して30%の幅）で横並びにし、コンテンツ幅に応じてサイズは可変する。
・余りの10%分の余白は5%ずつ2箇所に振り分ける。

Photoギャラリーの設計図

メインコンテンツ（main要素）の幅を指定しよう

main要素のスタイル指定

プロパティ	値
幅	85%
最大幅	1280px
マージン	中央配置　上下のマージン：0

main要素に対して上記のプロパティを指定します。

mainタグにはclass名（gallery-contents）がついていますので、それを使いclassセレクタでCSSを記述してください。
まずは幅を指定しますが、ブラウザプレビューしたときのボックスの視認性を確保するため、仮の背景色を一緒に指定します。
このように、ボックスの視認性を確保するために、一時的に指定する背景色のことをダミー背景色といいます。
ダミー背景色を使うと、レイアウトが狙い通りに組み上がっているかどうかが、ひと目でわかりますので、ぜひ活用することをおすすめします。
左右のマージンをautoに設定し、main要素を中央配置します。
最大幅（max-width）を指定することにより、指定したサイズよりも大きくなることがありません。
ブラウザのウィンドウ幅を変えて、背景色をつけたmain要素が可変することを確認してください。

style.css

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

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

【画面収録】メインコンテンツの幅を指定する

max-widthとは

max-widthプロパティは、要素の最大幅を指定するプロパティです。
- 要素の幅が「これ以上大きくならないように」制限をかけるために使います。
- このプロパティを使うと、指定した値を超えて要素が広がることはなくなります。

どのような場合につかうの？

画像やブロックボックスが画面サイズに応じて拡大・縮小はするけど、ある幅以上には広がらないようにしたいときに使います。
現代的なWebデザインでは、PC、タブレット、スマートフォンなど全てのデバイスでコンテンツが画面サイズに応じて拡大・縮小する仕様が主流です。
特に大型のディスプレイでWebサイトを全画面表示する際、不自然な程コンテンツ幅が広がってしまうことを防止するために必須のプロパティであると言えるでしょう。
画像（img要素）に指定するとどうなるの？
- 画像は本来、画像ファイルの「元のサイズ（実寸）」でブラウザに表示されます。
- img要素にwidthプロパティで幅を%指定すれば、親要素の幅に応じて拡大・縮小されます。
- しかし、この設定のみだと、実寸を超えて拡大されたときに画質が荒くなってしまいます。
- img要素にmax-width: 100%を指定することにより、実寸を超えて拡大されないようになります。
- 一般的には、reset.cssに以下のCSSを書き込んでおくことが多いです。

img {
        max-width: 100%;
        /*画像の「実寸サイズ」よりは大きくならない*/
        height: auto; 
        /*アスペクト比（縦横比）が崩れず、自然に縮小*/
        display: block; /*画像の下の余白（隙間）を消す（インライン要素特有の隙間対策）*/
}

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

li要素を横並びにしよう

li要素の並び方は、今回のレイアウトの設計方針である以下の条件に沿ってコーディングします。

写真は3枚ずつ均等サイズ（コンテンツに対して30%の幅）で横並びにし、コンテンツ幅に応じてサイズは可変する。

まず、li要素の親要素であるul要素のFlexboxを有効化することにより、li要素を横並びにします。
ul要素には、以下のプロパティを指定してください。

ul要素のスタイル指定

プロパティ	値
Flexbox	有効
子要素の折り返し指定	親要素の幅で折り返す
水平方向の揃え	均等配置・両端揃え

style.css

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

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

1つ1つのli要素が親要素であるul要素の幅に対して3等分になる設定をします。
親要素の幅を100として考え、26%〜33%の間で子要素の幅の指定をします。

li要素のスタイル指定

プロパティ	値
幅	30%
下マージン	50px

style.css

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

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

img要素にはmax-width: 100%;がreset.cssで指定されていますので、元々画像幅は拡大・縮小する設定になっています。
従って、以上のスタイル指定により、仕様どおりのレイアウトになります。
レイアウトを確認できたら、ダミー背景色は消去します。

ブラウザプレビュー（完成）

【画面収録】li要素を横並びにする

これで「HTML/CSS入門編 10章 Flexboxを学ぼう」の解説を終わります。
次の章に進みましょう。

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

HTML/CSS入門編 10章：Flexboxを学ぼう

この章の目安学習時間：240分

【10-1】Flexboxの基本を学ぼう

目安の学習時間：25分

Flexboxのしくみを学ぼう

【10-2】親要素に指定するプロパティを覚えよう

目安の学習時間:60分

子要素を横並びにしよう（display:flex;）

子要素の並ぶ向きの変更をしよう（flex-direction）

水平方向の揃えを指定しよう（justify-content）

垂直方向の揃えを指定しよう（align-items）

子要素の折り返しを指定しよう（flex-wrap）

子要素同士の間隔を指定しよう（gap）

gapプロパティで縦横の間隔を別々に設定しよう

複数行の子要素の縦方向の配置を指定しよう（align-content）

【10-3】子要素に指定するプロパティを覚えよう

目安の学習時間：60分

子要素が並ぶ順序を指定しよう（order）

子要素が伸びる比率を指定しよう（flex-grow）

子要素が縮む比率を指定しよう（flex-shrink）

子要素の初期サイズを指定しよう（flex-basis）

flexプロパティについて

子要素の垂直方向の揃えを個別に指定しよう（align-self）

【10-4】ナビゲーションを作成しよう

目安の学習時間：50分

ナビゲーションの情報構造を確認しよう

サイズと背景色を指定しよう

li要素を横並びにしよう

ul要素の水平・垂直方向の揃えを中央にしよう

リンクテキストの装飾を指定しよう

マウスホバー時のリンクテキストをスタイリングしよう

【10-5】画像を等間隔に配置しよう

目安の学習時間：45分

HTML/CSS入門編　10章：Flexboxを学ぼう