2021-01-27 CSSで出来るFlexBoxとGridレイアウトの使い方とフレキシブルデザイン|Webデザインの教科書
Webデザインの教科書
- CSS 中級編 -
Scroll

WebサイトのレイアウトGridとFlexboxの特徴と使い方

今回はWebサイトのデザインには欠かせない、レイアウトの仕方を紹介します。

最近はスマホでWebサイトを見ることが多くなりました。

パソコンで見る時・スマホで見る時のレイアウトは柔軟に対応が必要です。

それなら、レイアウトの仕方とスマホ対応を一緒にやっちゃいましょう!!

レイアウトの仕組み

Webサイトのレイアウトはどのように作られるのでしょうか?

実はWebサイトのレイアウトの仕方は大きく分けて2種類しかありません。

2種類だけならすぐできちゃいそうですね!!

レイアウトの種類
CSS

レイアウトの仕方は大きく分けて2種類あります。

横並びにする」方法と「好きなところに配置する」方法でWebサイトは出来ています。

この2種類の方法を作って、パソコンやスマホといった端末ごとに見やすいレイアウトを作っていきます。

  • 横並びにする
    要素
    要素

    要素を縦並びから横並びに変えてレイアウトしていく方法です。

    たくさんの画像を横並びのしたり、メニューの項目を横並びに表示したり、さまざまなところで使われている方法です。

    横並びにする方法は2通りあり、目的に合わせて使い分けます。

    • フレックスボックス
      1
      2
      3
      4

      親要素子要素の関係を利用して横並びにする方法です。

      親要素の決めた範囲の中で子要素がすべて横並びになります。

    • グリッドレイアウト
      2
      1
      3

      親要素子要素の関係を利用して横並びにする方法です。

      親要素に格子状の枠を作成します。

      子要素は枠の中の好きなところに配置して横並びにします。

  • 好きなところに配置する
    要素
    要素

    好きなところに要素を配置する方法です。

    親要素が決めた範囲内で好きなところに子要素を配置することが出来ます。

    複雑なレイアウトを組みたい時にとても便利な方法です。

この2種類の方法でレイアウトを組み立てていきます。

そんなに難しくないので、とりあえずやってみましょう。

フレックスボックス

まずは、フレックスボックス横並びにしてみましょう。

フレックスボックスはたった1行で横並びに出来ちゃいます。

横並びにする

<ul class="menu">
<li>部屋</li>
<li>サービス</li>
<li>アクセス</li>
<li>料金</li>
</ul>
.menu {
display: flex;
list-style: none;
padding: 0;
width: 100%;
background: #01558d;
color: white;
}
.menu li {
width: 100%;
text-align: center;
padding: 5px 0;
}
  • 部屋
  • サービス
  • アクセス
  • 料金
フレックスボックス
1
2
3
4

フレックスボックスは横並びにするためのCSSプロパティです。

親要素にフレックスボックスを指定することで、すべての子要素が横並びになります。

  • FlexBox
    <li></li>
    <li></li>
    <li></li>

    親要素の「ul」タグにFlexBoxを指定して、子要素をすべて横並びにします。

    CSSで「display」プロパティを使って、値を「flex」を指定します。

    .menu {
    display: flex;
    }
    これはなぜ指定したの?
    • 「list-style: none」とは?
      部屋
      サービス
      料金

      ulタグに指定した「list-style」はなにをしているのでしょうか?

      「list-style」はulタグを使った時に自動で表示される「」を操作します。

      この値を「none」を指定して「」を消去しています。

      ul {
      list-style: none;
      }
    • liタグに「width: 100%」
      部屋100%
      サービス100%
      料金100%

      liタグの「width: 100%」はなぜ指定したのでしょうか?

      理由はFlexBoxの特徴を利用するために指定しています。

      親要素のulタグにFlexBoxを指定して子要素のliタグを横並びにした時、liタグは自動で横幅を調整されます。

      liタグの横幅を「100%」にしたものを3つ並べた時、実際の横幅は「33.33%」まで自動で縮小します。

      「%」で指定している時に限りますが、柔軟に対応してくれるFlexBoxの小技です。

      ul {
      display: flex;
      }
      li {
      width: 100%;
      }

実はフレックスボックスは横並びにするだけではありません。

要素を中心に持ってくる機能も用意されています。

要素の中央寄せ

<div class="animals">
<div class="name">
イヌ
</div>
<div class="name">
ネコ
</div>
<div class="name">
ヒツジ
</div>
</div>
.animals {
width: 100%;
height: 200px;
background: #006993;
display: flex;
justify-content: center;
align-items: center;
}
.animals .name {
color: white;
border: solid 2px;
border-radius: 20px;
padding: 15px;
}
イヌ
ネコ
ヒツジ
要素を中央寄せする
Flex

フレックスボックスには子要素を横並びにするだけではありません。

子要素の状態を操作する機能が備わっています。

justify-content」と「align-items」というプロパティを使って子要素の中心に持ってくるといったことが出来ます。

  • justify-content
    1
    2
    3

    「justify-content」は左右の間隔を揃えるプロパティです。

    親要素に「justify-content」を指定して、子要素の左右の間隔を寄せたり離したりすることが出来ます。

    指定できる値は「center」「flex-start」「flex-end」「space-around」「space-between」の5つが用意されています。

    • center
      1
      2
      3
      4

      子要素をすべて中央寄せします。

      .animals {
      display: flex;
      justify-content: center;
      }
    • flex-start
      1
      2
      3
      4

      子要素をすべて左寄せします。

      .animals {
      display: flex;
      justify-content: flex-start;
      }
    • flex-end
      1
      2
      3
      4

      子要素をすべて右寄せします。

      .animals {
      display: flex;
      justify-content: flex-end;
      }
    • space-around
      1
      2
      3
      4

      子要素はすべて等間隔で並びます。

      .animals {
      display: flex;
      justify-content: space-around;
      }
    • space-between
      1
      2
      3
      4

      両端の子要素は左右に寄せて、後は等間隔で並びます。

      .animals {
      display: flex;
      justify-content: space-between;
      }
  • align-items
    1
    2
    3

    「align-items」は上下の間隔を揃えるプロパティです。

    親要素に「align-items」を指定して、子要素を上寄せ・下寄せ・中央寄せすることが出来ます。

    指定できる値は「center」「flex-start」「flex-end」「baseline」の4つが用意されています。

    • center
      1
      2
      3
      4

      子要素をすべて中央寄せします。

      .animals {
      display: flex;
      align-items: center;
      }
    • flex-start
      1
      2
      3
      4

      子要素をすべて上寄せします。

      .animals {
      display: flex;
      align-items: flex-start;
      }
    • flex-end
      1
      2
      3
      4

      子要素をすべて下寄せします。

      .animals {
      display: flex;
      align-items: flex-end;
      }
    • baseline
      1
      2
      3
      4

      子要素のテキストの位置で揃えます。

      高さがそれぞれ違う時に、テキストの位置で揃えることが出来ます。

      .animals {
      display: flex;
      align-items: baseline;
      }
テキストの中央寄せ
FlexBox
FlexBox

フレックスボックスの中央寄せはテキストにも適用することが出来ます。

横幅や高さが指定されている時、なにもしなければテキストは左上にあります。

テキストを中央寄せしたい要素にフレックスボックスを使うと、テキストが中心に来るようになります。

<div class="text">
Flexbox
</div>
.text {
width: 100px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
}

フレックスボックスを横並びにしてたけど、やっぱ縦並びに戻したいって時ないですか?

画面が小さいスマホでは横並びのままでは不便な時があります。

スマホ対応には欠かせない機能なので知っておくとGOODです。

並ぶ方向を変える

<div class="animals">
<div class="name">
イヌ
</div>
<div class="name">
ネコ
</div>
<div class="name">
ヒツジ
</div>
</div>
.animals {
width: 100%;
height: 200px;
background: #006993;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.animals .name {
width: 80px;
height: 80px;
color: white;
border: solid 2px;
border-radius: 20px;
display: flex;
justify-content: center;
align-items: center;
}
イヌ
ネコ
ヒツジ
並ぶ方向を変える
1
2
3
4
2
3
4

フレックスボックスを使って横並びにしていたものを、縦並びに戻すといったことが出来ます。

また、順番を反対に並べ替えることも出来ます。

flex-direction」というプロパティを使って、並ぶ向きや順番を変更します。

  • flex-direction

    子要素の並ぶ向き並ぶ順番を変更するプロパティです。

    親要素に「flex-direction」を指定して、子要素の並ぶ向きと並ぶ順番を変更します。

    指定できる値は「row」「column」「row-reverse」「column-reverse」の4つが用意されています。

    • row
      1
      2
      3
      4

      子要素をすべて横並びにします。

      この値は初期値で設定されているので、使う頻度は少ないと思います。

      「display: flex」だけでも同じように横並びになります。

      .animals {
      display: flex;
      flex-direction: row;
      }
    • column
      1
      2
      3
      4

      子要素をすべて縦並びにします。

      フレックスボックスで横並びにしていたものを、縦並びに戻したい時に使います。

      .animals {
      display: flex;
      flex-direction: column;
      }
    • row-reverse
      1
      2
      3
      4

      子要素をすべて反対に並び変えて横並びにします。

      右から左へ並ぶようになります。

      .animals {
      display: flex;
      flex-direction: row-reverse;
      }
    • column-reverse
      4
      3
      2
      1

      子要素をすべて反対に並び変えて縦並びにします。

      下から上へ並ぶようになります。

      .animals {
      display: flex;
      flex-direction: column-reverse;
      }
    縦並びにした時の注意

    フレックスボックスを使って横並び縦並びを切り替える時に注意しなければいけないことがあります。

    フレックスボックスの「justify-content」と「align-items」で子要素を揃えていましたが、横並び縦並びでは機能が反対になります。

    • 横並びの時
      1
      2
      3
      justify-content
      align-items

      子要素を横並びにしている時は「justify-content」は左右の間隔を揃えます。

      それに対して「align-items」は上下の間隔を揃えます。

      .animals {
      display: flex;
      justify-content: center;
      align-items: center;
      }
    • 縦並びの時
      1
      2
      3
      align-items
      justify-content

      子要素を縦並びにしている時は「align-items」が左右の間隔を揃えます。

      それに対して「justify-content」は上下の間隔を揃えます。

      flex-direction」で縦並びの「column」を指定している時は、反対の効果になります。

      .animals {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      }

次もスマホ対応には欠かせない機能です。

先ほどは縦並びに戻してスマホ対応しました。

次の方法は、横並びのまま折り返すようにしてスマホ対応する方法です。

要素の折り返し

<div class="pictures">
<img src="travel-1.jpg" alt="旅行写真-1">
<img src="travel-2.jpg" alt="旅行写真-2">
<img src="travel-3.jpg" alt="旅行写真-3">
<img src="travel-4.jpg" alt="旅行写真-4">
<img src="travel-5.jpg" alt="旅行写真-5">
<img src="travel-6.jpg" alt="旅行写真-6">
</div>
.pictures {
display: flex;
flex-wrap: wrap;
}
.pictures img {
width: 250px;
height: 200px;
margin: 5px;
}
要素の折り返す
1
2
3
4
5
6
7
8
9
10

フレックスボックスで横並びにしている時に、画面が小さいと綺麗に収まらないことがあります。

そんな時は自動で折り返すようにしましょう。

  • flex-wrap

    横並びの状態で子要素が収まりきらない時、折り返すように変更するプロパティです。

    指定できる値は「nowrap」「wrap」「wrap-reverse」の3つが用意されています。

    • nowrap
      1
      2
      3
      4
      5
      6
      7
      8

      nowrap」は子要素の折り返しはしません。

      親要素の大きさに収まらなかった時は、子要素が縮むことで調節されます。

      この値は初期値で設定されているので、「display: flex」だけでも同じようになります。

      .pictures {
      display: flex;
      flex-wrap: nowrap;
      }
    • wrap
      1
      2
      3
      4
      5
      6

      wrap」は子要素を折り返すようにします。

      親要素の大きさに収まらなかった時は、子要素を下に折り返します

      .pictures {
      display: flex;
      flex-wrap: wrap;
      }
    • wrap-reverse
      1
      2
      3
      4
      5
      6

      wrap-reverse」は子要素を折り返すようにします。

      親要素の大きさに収まらなかった時は、子要素を上に折り返します

      .pictures {
      display: flex;
      flex-wrap: wrap-reverse;
      }

それでは最後にこれをやってみましょう。

折り返した時に要素の位置を揃える方法です。

使う機会が多くないかもしれませんが、知っておくといざって時に使えそうですね。

折り返しを揃える

<div class="pictures">
<img src="travel-1.jpg" alt="旅行写真-1">
<img src="travel-2.jpg" alt="旅行写真-2">
<img src="travel-3.jpg" alt="旅行写真-3">
<img src="travel-4.jpg" alt="旅行写真-4">
<img src="travel-5.jpg" alt="旅行写真-5">
<img src="travel-6.jpg" alt="旅行写真-6">
</div>
.pictures {
height: 500px;
display: flex;
flex-wrap: wrap;
align-content: space-around;
}
.pictures img {
width: 250px;
margin: 5px;
}
折り返しを揃える
1
2
3
4
5
6
上下を揃える

フレックスボックスで子要素を折り返した時に、上下の間隔を寄せたり離したりすることが出来ます。

align-content」というプロパティを使って、子要素の上下の間隔を変更します。

  • align-content

    「align-content」は横並びで折り返している時に、上下の間隔を揃えるプロパティです。

    指定できる値は「center」「flex-start」「flex-end」「space-around」「space-between」の5つが用意されています。

    • center
      1
      2
      3
      4
      5
      6

      子要素をすべて中央寄せします。

      .pictures {
      height: 500px;
      display: flex;
      flex-wrap: wrap;
      align-content: center;
      }
    • flex-start
      1
      2
      3
      4
      5
      6

      子要素をすべて上寄せします。

      .pictures {
      height: 500px;
      display: flex;
      flex-wrap: wrap;
      align-content: flex-start;
      }
    • flex-end
      1
      2
      3
      4
      5
      6

      子要素をすべて下寄せします。

      .pictures {
      height: 500px;
      display: flex;
      flex-wrap: wrap;
      align-content: flex-end;
      }
    • space-around
      1
      2
      3
      4
      5
      6
      7
      8
      9

      子要素はすべて等間隔で並びます。

      .pictures {
      height: 500px;
      display: flex;
      flex-wrap: wrap;
      align-content: space-around;
      }
    • space-between
      1
      2
      3
      4
      5
      6
      7
      8
      9

      最上部と最下部に並ぶ子要素は上下に寄せて、後は等間隔で並びます。

      .pictures {
      height: 500px;
      display: flex;
      flex-wrap: wrap;
      align-content: space-between;
      }

フレックスボックス便利ですよね?

実はフレックスボックスの機能はまだまだあります。

今回はよく使うものだけを紹介しました。

ぜひいろいろお試しください。

グリッドレイアウト

今度はグリッドレイアアウトについて紹介していきます。

Webサイトのベースのレイアウトによく使われる方法です。

グリッドレイアウトはいくつか種類があるので、まずはそちらを紹介します。

グリッドの種類

グリッドレイアウトの種類
Grid
Area
Line
Layout

グリッドレイアウトは格子状の枠を作って、その枠に配置する方法でレイアウトします。

枠にはめる位置は自由に決めることが出来るので、好きなレイアウトを作成することが出来ます。

グリッドを作成する方法は「エリアベース」と「ラインベース」の2種類の書き方があります。

  • エリアベース
    ヘッダー
    サブ
    メイン

    エリアベースで作成する時は、上の図のように「ヘッダー」「サブ」「メイン」「フッター」の4つのエリアに名前を付けて分割します。

    名前が付いた4つのエリアにそれぞれ配置して、レイアウトを作成します。

    header
    header
    header
    sub
    main
    main
    1. 親要素の縦と横を3等分にして、それぞれエリアの名前を指定します。
    2. 分割して作られた4つのエリア「header」「sub」「main」「footer」にそれぞれの子要素を配置します。
    display: grid;
    grid-template-areas: "header header header"
    "sub main main"
    "footer footer footer";
  • ラインベース
    ヘッダー
    サブ
    メイン

    ラインベースで作成する時は、上の図のように縦と横にラインを引いて分割します。

    引いたラインが縦横に交わって、格子状の枠を作成します。

    「このラインからこのラインまで」といったように配置して、レイアウトを作成します。

    50px
    auto
    50px
    50px
    auto
    50px
    1. 親要素の縦と横にラインを引いて区切り線を作成します。
    2. 縦横のラインが交わって格子状を枠が作成され、ラインに番号が自動で割り振られます。
    3. ラインの番号を使って、子要素をそれぞれ配置します。

    左上から番号が割り振られた14の番号は、子要素の配置を指定する時に使用します。

    また、割り振られた番号は反対から数えることも可能です。

    反対から指定する場合は-1-4のようにマイナス値で指定します。

    display: grid;
    /* 縦ライン */
    grid-template-columns: 50px auto 50px;
    /* 横ライン */
    grid-template-rows: 50px auto 50px;

グリッドレイアウトは2種類のやり方があります。

正直どちらの方法でも結果は変わりません。

自分にあった方法で大丈夫だと思います。

まず最初は、エリアベースからやってみましょう。

エリアベース

<div class="schedule">
<div class="title">
スケジュール
</div>
<div class="time">
<img src="clock.jpg" alt="時計">
<div class="digital">
9:00
</div>
</div>
<div class="list">
<ul>
<li>起きる</li>
<li>朝ご飯を食べる</li>
<li>遊ぶ</li>
<li>昼ご飯を食べる</li>
<li>遊ぶ</li>
<li>夜ご飯を食べる</li>
<li>寝る</li>
</ul>
</div>
</div>
.schedule {
display: grid;
grid-template-areas:
"title title"
"time list";
grid-template-columns: 100px auto;
}
.schedule .title {
grid-area: title;
color: white;
background: #8e6f5c;
font-size: 1.5rem;
text-align: center;
}
.schedule .time {
grid-area: time;
background: #4b697f;
}
.schedule img {
width: 100%;
}
.schedule .digital {
color: #8e6f5c;
background: #c2b185;
border-top: solid 2px;
border-bottom: solid 2px;
text-align: center;
}
.schedule .list {
grid-area: list;
background: #dddddd;
}
スケジュール
9:00
  • 起きる
  • 朝ご飯を食べる
  • 遊ぶ
  • 昼ご飯を食べる
  • 遊ぶ
  • 夜ご飯を食べる
  • 寝る
エリアベースのグリッド
Title
Title(エリア)
Time (エリア)
List(エリア)

エリアベースのグリッドレイアウトは、名前付きのエリアを作成して分割します。

title」「title」「time」「list」の4つのエリアを作成してそれぞれ配置します。

  • エリアベースのグリッドの作成
    Title(エリア)
    Title(エリア)
    Time(エリア)
    List(エリア)

    「title」「title」「time」「list」の4つのエリアに分割してグリッドを作成します。

    .schedule {
    display: grid;
    grid-template-areas:
    "title title"
    "time list";
    }
  • エリアの大きさを変更
    Title(エリア)
    Title(エリア)
    Time (エリア)
    List (エリア)

    グリッドの左側を「100px」に固定して右側は自動的に調整されるようにします。

    .schedule {
    display: grid;
    grid-template-areas:
    "title title"
    "time list";
    grid-template-columns: 100px auto;
    }
  • グリッドに配置

    子要素をどこのエリアに配置するか指定します。

    title」「title」「time」「list」の4つのエリアに配置します。

    • タイトル
      Title(エリア)
      Title(エリア)
      Time(エリア)
      List(エリア)

      「スケジュール」の文字が入ったクラスを「title」エリアに配置します。

      同じ名前のエリアが複数ある時は、結合して一つのエリアになります。

      .schedule .title {
      grid-area: title;
      }
    • 時間
      Title(エリア)
      Title(エリア)
      Time(エリア)
      List(エリア)

      時計の画像と時刻があるクラスを「time」エリアに配置します。

      .schedule .time {
      grid-area: time;
      }
    • リスト
      Title(エリア)
      Title(エリア)
      Time(エリア)
      List(エリア)

      やることリストが入ったクラスを「list」エリアに配置します。

      .schedule .list {
      grid-area: list;
      }

意外と簡単でしたね!!

エリアベースの書き方は直感的に書くとこが出来ます。

次は少し自由度が高いラインベースの書き方をやってみましょう。

ラインベース

<div class="album">
<div class="title">
アルバム
</div>
<img src="album1.jpg" alt="アルバム1" id="album1">
<img src="album2.jpg" alt="アルバム2" id="album2">
<img src="album3.jpg" alt="アルバム3">
<img src="album4.jpg" alt="アルバム4">
<img src="album5.jpg" alt="アルバム5">
</div>
.album {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto 300px 300px 300px;
}
.album .title {
grid-column-start: 1;
grid-column-end: 4;
background: #01558d;
color: white;
text-align: center;
padding: 5px 0;
}
#album1 {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 4;
}
#album2 {
grid-column-start: -3;
grid-column-end: -1;
grid-row-start: -2;
grid-row-end: -1;
}
.album img {
width: 100%;
height: 100%;
object-fit: cover;
}
アルバム
ラインベースのグリッド
アルバム
300px
300px
300px
1fr
1fr
1fr
auto

ラインベースのグリッドレイアウトは、縦と横に区切り線を引いて分割します。

区切り線の本数と間隔は自由に決めることが出来るので、複雑なレイアウトも作成することが出来ます。

  • ラインベースのグリッドの作成
    アルバム
    300px
    300px
    300px
    1fr
    1fr
    1fr
    auto

    縦(column)と横(row)のラインを引いてグリッドを作成します。

    • 縦ライン(column)

      縦ラインを「1fr」の間隔で4本の区切り線を引きます。

      1fr」はグリッドレイアウト特有の単位で比率で大きさを決めます。

      今回の場合は「1fr 1fr 1fr」と指定するので、「1 : 1 : 1」の比率で広がります。

      .album {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      }
    • 横ライン(row)

      横ラインは「auto」と「300px」の間隔で5本の区切り線を引きます。

      一番上だけ「auto」にして、中の要素の高さに合わせるようにします。

      残りは「300px」の大きさで高さを固定します。

      .album {
      display: grid;
      grid-template-rows: auto 300px 300px 300px;
      }
    新しい単位「fr」
    1fr
    2fr
    1fr

    グリッドレイアウト特有の「fr」という単位は大きさの比率を表しています。

    「1fr 2fr 1fr」の場合は「1 : 2 : 1」の比率で広がります。

    もし「40px 1fr 2fr」のように「px」の固定値がある場合は、40pxを固定して残りを「1 : 2」の比率で広がります。

  • グリッドに配置

    子要素をどこのエリアに配置するか指定します。

    ラインベースのグリッドは区切り線を作成する時に、区切り線に自動で番号は振られます。

    割り振られた番号を使って「このラインからこのラインまで」といったように範囲を決めて配置します。

    • タイトル
      アルバム

      タイトルを一番上の両端に合わせて配置します。

      両端の14を指定して、タイトルを両端まで広げます。

      縦方向の位置はグリッドの特性を使います。

      グリッドの配置は指定がない時は、左上から空いてるところから自動で配置されます。

      この特性を利用して、縦方向の位置は指定していません。

      .album .title {
      grid-column-start: 1;
      grid-column-end: 4;
      }
    • 画像2
      アルバム

      縦と横の枠を2個ずつ使って画像の2を大きく配置します。

      左右は1、上下は24を指定して配置します。

      #album1 {
      grid-column-start: 1;
      grid-column-end: 2;
      grid-row-start: 2;
      grid-row-end: 4;
      }
    • 画像3
      アルバム

      横の枠を2個使って画像の2を細長く配置します。

      今回は配置する時にマイナス値で指定します。

      左右は-3-1、上下は-2-1を指定して配置します。

      #album2 {
      grid-column-start: -3;
      grid-column-end: -1;
      grid-row-start: -2;
      grid-row-end: -1;
      }
      マイナス値で配置

      グリッドに配置する時はマイナス値で指定することが出来ます。

      グリッドのラインを反対から数える時は、配置番号の開始と終了を「マイナス値」で指定することが出来ます。

      今回は画像を右下に配置するので、反対から数えた方が都合がよかったため全てマイナス値で指定しています。

      ちなみに下記の書き方でも構いません。

      grid-column-start: 2;
      grid-column-end: 4;
      grid-row-start: 4;
      grid-row-end: 5;
    • 残りの画像
      アルバム

      残りの456の画像はあえてなにも指定しません。

      グリッドの特性を利用して、左上から空いている枠に自動で配置されます。

    画像を綺麗に揃える

    画像を複数使用する時は、画像の大きさにどうしてもバラつきが出てしまいます。

    そんな時は「object-fit」というプロパティを使って揃えることが出来ます。

    • object-fit

      画像や動画のサイズが合わない時に、どのように揃えるか決めることが出来ます。

      object-fitの値を「cover」にすることで、画像や動画の比率を保ちながら綺麗に揃えてくれます。

      ただし、画像の大きさを指定していないと「object-fit」は効かないので、必ず大きさを指定してください。

      .album img {
      width: 300px;
      height: 200px;
      object-fit: cover;
      }

ラインベースはグリッドの大きさや配置位置を自由に決められます。

Webサイトのレイアウトによく使われる方法です。

最後に、ラインベースを使いやすくするためにカスタマイズしてみましょう。

ラインベース応用

<div class="layout">
<h1 class="title">
サントリーニ島にあるイアの街
</h1>
<img class="top-image" src="oia.jpg" alt="イアの街">
<div class="main">
<p>
この神秘的な景色はギリシャのサントリーニ島の北西部にある「イア」と呼ばれるところ。
</p>
</div>
<div class="footer">
2020 HOMEPAGE
</div>
</div>
.layout {
display: grid;
grid-template-columns:
[left] 20px [second] 1fr [third] 20px [right];
grid-template-rows:
[title] auto [image] auto [main] auto [footer] auto [bottom];
background: #00aad4;
color: white;
}
.title {
grid-column-start: second;
grid-column-end: third;
grid-row-start: title;
grid-row-end: image;
}
.top-image {
grid-column-start: left;
grid-column-end: right;
grid-row-start: image;
grid-row-end: main;
width: 100%;
}
.main {
grid-column-start: second;
grid-column-end: third;
grid-row-start: main;
grid-row-end: footer;
}
.footer {
grid-column-start: left;
grid-column-end: right;
grid-row-start: footer;
grid-row-end: bottom;
background: #1881a8;
text-align: center;
padding: 5px 0;
}
サントリーニ島にあるイアの街

この神秘的な景色はギリシャのサントリーニ島の北西部にある「イア」と呼ばれるところ。

建物全体が白を基調に美しい街並みが広がり、まるでたくさんの雪が積もっているかのよう。

また夜になると街全体がオレンジに灯り始め、なんとも幻想的な景色が広がります。

グリッドラインに名前をつける
サントリーニ島にあるイアの街

この神秘的な景色はギリシャのサントリーニ島の北西部にある「イア」と呼ばれるところ。

20px
1fr
20px
  • ラインベースのグリッドの作成

    ラインベースでグリッドを作成する時に、ラインに「left」「right」「title」「main」といった名前を付けることが出来ます。

    名前付きのラインを作成する時は、[]で名前を囲って作成します。

    • 縦ライン(column)

      縦ラインの左から順に「left」「second」「third」「right」の名前がついたラインを作成します。

      それぞれのラインの間隔は「20px」「1fr」「20px」の大きさを空けます。

      .layout {
      display: grid;
      grid-template-columns:
      [left] 20px [second] 1fr [third] 20px [right];
      }
    • 横ライン(row)

      横ラインの上から順に「title」「image」「main」「footer」「bottom」の名前がついたラインを作成します。

      それぞれのラインの間隔はすべて「auto」にして、要素の高さで柔軟に対応するようにします。

      .layout {
      display: grid;
      grid-template-rows:
      [title] auto [image] auto [main] auto [footer] auto [bottom];
      }
  • グリッドに配置

    グリッドラインの名前を使って、子要素を配置します。

    通常のラインベースの配置の書き方とほとんど同じです。

    • タイトル
      サントリーニ島

      サントリーニ島の北西部にある「イア」...

      20px
      1fr
      20px

      タイトルを一番上に配置します。

      上下は「title」「image」左右は「second」「third」を指定します。

      .title {
      grid-column-start: second;
      grid-column-end: third;
      grid-row-start: title;
      grid-row-end: image;
      }
    • トップ画像
      サントリーニ島

      サントリーニ島の北西部にある「イア」...

      20px
      1fr
      20px

      画像をタイトルの下に配置します。

      上下は「image」「main」左右は「left」「right」を指定します。

      .top-image {
      grid-column-start: left;
      grid-column-end: right;
      grid-row-start: image;
      grid-row-end: main;
      }
    • メイン記事
      サントリーニ島

      サントリーニ島の北西部にある「イア」...

      20px
      1fr
      20px

      メインの記事を配置します。

      上下は「main」「footer」左右は「second」「third」を指定します。

      .main {
      grid-column-start: second;
      grid-column-end: third;
      grid-row-start: main;
      grid-row-end: footer;
      }
    • フッター

      一番下にフッターを配置します。

      上下は「footer」「bottom」左右は「left」「right」を指定します。

      .footer {
      grid-column-start: left;
      grid-column-end: right;
      grid-row-start: footer;
      grid-row-end: bottom;
      }

以上でグリッドレイアウトは終了です。

お疲れ様でした。

一度理解すればなんてことないと思います。

ちょっとずつ頑張っていきましょう。

好きな場所に配置する

今度は好きなところに配置する方法をやってみましょう。

好きなところといっても、動かせる範囲を決めて配置します。

ポジションの種類

ポジション
要素

要素を好きな時に配置する時、動かせる範囲を決めます。

決めれた範囲の中で「ここに配置する!!」と明確に指定する必要があります。

場所の指定をする時は「子要素の左上の部分を親要素の左上に置く」と指定して配置します。

  • ポジションの種類

    ポジションの種類がいくつかあり、使い分けが必要になります。

    ポジションには「static」「relative」「absolute」「fixed」の4種類あります。

    ですが、実際よく使われるのは3種類だけです。

    • static
      絶対動かないよ!!

      初期値で設定されている値です

      初期値の「static」の状態だと配置が出来ないため、この値を「relative」「absolute」「fixed」のどれかに変更して配置します。

    • relative
      この中なら好きな所に
      移動していいよ!!

      配置が出来る範囲を設定する値です。

      この値が設定されている要素の中を自由に移動が出来ます。

      親要素に「relative」子要素に「absolute」という関係でセットで使います。

    • absolute
      上にいるrelativeくんが良いって
      言われた所なら動くよ!!

      配置する場所を設定する値です。

      親要素の「relative」の範囲の中で移動することが出来ます。

    • fixed
      画面にくっ付いちゃう!!
      スクロールしてもここにいるよ!!

      画面に固定して配置する値です。

      パソコンやスマホなどの画面の中で、スクロールしても付いてくるようになります。

      例としてはこのサイトの右下にあるが「fixed」の値で、画面の右下に固定してあります。

「relative」「absolute」「fixed」を使い分けが重要です。

それでは、実際にやってみましょう!!

要素を配置する

<div class="paris">
<img src="paris.jpg" alt="夕方のパリ">
<div class="place">
エッフェル塔 / パリ
</div>
<div class="date">
2012 / 5 / 20
</div>
</div>
.paris {
position: relative;
}
.paris .place {
position: absolute;
top: 0;
left: 0;
background: rgba(255,255,255,.6);
padding: 0 10px;
}
.paris .date {
position: absolute;
bottom: 0;
right: 0;
background: rgba(255,255,255,.6);
padding: 0 10px;
}
.paris img {
width: 100%;
}
エッフェル塔 / パリ
2012 / 5 / 20
要素を配置する
エッフェル塔
1864 / 5 / 20
  • relative

    親要素の「paris」クラスに「relative」を設定します。

    「paris」クラスの中にある子要素は、「paris」クラスの範囲の中で移動が出来る状態になります。

    .paris {
    position: relative;
    }
  • absolute

    absolute」を使って「paris」クラスの中にある子要素を配置していきます。

    今回は「place」クラスと「date」クラスの2つの要素を配置します。

    • placeクラス
      palceクラス

      「place」クラスの左上を親要素の「paris」クラスの左上に合わせます。

      top」と「left」を使って、親要素の左上から「0px」離して配置します。

      値が「0px」の時は、「0」で省略することが出来ます。

      .paris .place {
      position: absolute;
      top: 0;
      left: 0;
      }
    • dateクラス
      dateクラス

      「date」クラスの右下を親要素の「paris」クラスの右下に合わせます。

      bottom」と「right」を使って、親要素の左上から「0px」離して配置します。

      .paris .date {
      position: absolute;
      bottom: 0;
      right: 0;
      }
要素の角を合わせる

要素を移動する時の「top」「left」「right」「bottom」ってなにを基準にしてるの?

どれも要素の角を基準にしていますが、組み合わせによってどの角が基準になるのか変わってきます。

  • 左上の角
    palceクラス

    top」と「left」を指定した時は要素の左上が基準になります。

    .paris .place {
    position: absolute;
    top: 0;
    left: 0;
    }
  • 右上の角
    palceクラス

    top」と「right」を指定した時は要素の右上が基準になります。

    .paris .place {
    position: absolute;
    top: 0;
    right: 0;
    }
  • 左下の角
    palceクラス

    left」と「bottom」を指定した時は要素の左下が基準になります。

    .paris .place {
    position: absolute;
    left: 0;
    bottom: 0;
    }
  • 右下の角
    palceクラス

    right」と「bottom」を指定した時は要素の右下が基準になります。

    .paris .place {
    position: absolute;
    right: 0;
    bottom: 0;
    }
  • 4方向すべての角
    placeクラス

    top」「left」「right」「bottom」を指定した時は要素のすべての角が基準になります。

    値がすべて「0」の時は、親要素と同じ大きさになるまで広がります。

    .paris .place {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    }

親要素に「relative」子要素に「absolute」をセットで覚えておきましょう。

「relative」がないと動かないので注意してください。

画面に固定する

<div class="sheep">
<img src="image.jpg" alt="ヒツジさん">
</div>
.sheep {
position: fixed;
right: 40px;
bottom: 120px;
width: 80px;
}
.sheep img {
width: 100%;
}

画面の右下にヒツジが出来ます。

画面にくっついてるので、スクロールしてもずっと付いていきます。

ちなみに右下のヒツジを押すと帰ります。

画面に固定する

「sheep」クラスの画像をパソコンやスマホなどの画面に固定して、スクロールしても付いてくるようにします。

  • fixed

    fixed」を使って「sheep」クラスを画面の右下に固定します。

    画面の右から「40px」下から「120px」離して固定します。

    .sheep {
    position: fixed;
    right: 40px;
    bottom: 120px;
    }

そんなに難しくないですね。

「fixed」でよく使うものは画面に固定して、使いやすいサイトにしちゃいましょう。

実は「fixed」によく似た方法がもう一つあります。

スクロールで固定する

<div class="one"></div>
<div class="space"></div>
<div class="two"></div>
<div class="space"></div>
<div class="three"></div>
<div class="space"></div>
.one {
position: sticky;
top: 0;
width: 60px;
background: #e4bcbc;
}
.two {
position: sticky;
top: 60px;
width: 120px;
background: #7183ac;
}
.three {
position: sticky;
top: 120px;
width: 180px;
background: #7183ac;
}
.one , .two , .three {
height: 60px;
margin: auto;
border-radius: 10px;
}
.space {
height: 150px;
border-top: solid 10px #cccccc;
}
スクロールして画面に固定する
Sticky

sticky」はパソコンやスマホなどの画面に固定して、スクロールしても付いてくるようにします。

スクロールしても画面に付いてくる点では「fixed」同じですが、「sticky」と「fixed」に違いは、画面に固定されるタイミングは違います。

  • sticky

    sticky」は「fixed」とよく似ていますが、固定されるタイミング動作に違いがあります。

    • タイミング

      スクロールをして「sticky」が指定された要素が画面の上部まで来たら画面に固定されます。

      「fixed」の場合は、最初から画面に固定されているのに対して、「sticky」は要素が上部まで来たら固定されます。

    • 動作

      sticky」を指定した要素は、その親要素の中でしか画面に固定されません。

      スクロールして親要素の高さを超えると、「sticky」は画面の外に出るので固定されなくなります。

    • 注意

      top」で画面の上からどの位置で固定するか決めることが出来ます。

      top」が指定されていなかった場合は「sticky」は動きません。

      必ず「sticky」と「top」はセットで書きましょう。

    .one {
    position: sticky;
    top: 0;
    }

「sticky」は楽しい動きをしますね!!

ちょっと使うのに慣れが必要かもしれませんが、使い道は無限大です!!

モバイルフレンドリー

最近よく聞かれる「スマホ対応」という言葉。

「意味はわかるけど、なにするの?」について答えて行こうと思います。

そもそもスマホ対応ってなんでしょうか?

スマホ対応とは

スマホ対応
Mobile

スマホ対応とは、簡単に言うとスマホでも見やすいページにするという意味で使われます。

他にも「スマホ対応」と意味が似た「モバイルフレンドリー」と「レスポンシブ対応」という言葉があります。

  • モバイルフレンドリー
    mobile
    friendly

    モバイルフレンドリーとは、スマホやタブレットのようなモバイル端末でもWebサイトを見やすく・使いやすい(フレンドリーな)Webサイトのことを言います。

  • レスポンシブ対応
    mobile
    responsive

    レスポンシブ対応とは画面の大きさで向きでデザインやレイアウトを細かく変えて「モバイルフレンドリー」にするための対応のことを言います。

    具体的にはブラウザの大きさでレイアウトやデザインを変える方法があります。

    CSSで「360px」以下の時はこのレイアウト、「760px」以下の時はこのデザインのように、「メディアクエリ」というものを使ってCSSを分けることが出来ます。

簡単にやり方をいうと「メディアクエリ」というものを使えばスマホ対応が出来ます。

さっそくメディアクエリを使ってみましょう。

メディアクエリ

<div class="big">BIG</div>
<div class="small">SMALL</div>
.big , .small {
color: white;
border-radius: 20px;
padding: 20px 0;
text-align: center;
font-size: 30px;
}
.big {
background: #0099ff;
}
.small {
display: none;
background: #ff7a7a;
}
@media (max-width: 460px) {
.big {
display: none;
}
.small {
display: block;
}
}
メディアクエリ
  • メディアクエリ

    メディアクエリはブラウザの大きさごとにリアルタイムでCSSを変更してくれます。

    ブラウザの大きさは「px」で判断されます。

    • max-width
      Style範囲

      下記のようにCSSを書いた場合、ブラウザの大きさが「460px以下」の時に、CSSスタイルを上書きして適用します。

      「461px」以上の大きさの時はCSSスタイルは上書きされません。

      画面が小さくなった時にCSSスタイルを上書きするようなイメージになります。

      @media (max-width: 460px) {
      .big {
      display: none;
      }
      .small {
      display: block;
      }
      }
    • min-width
      Style範囲
      Style範囲

      下記のようにCSSを書いた場合、ブラウザの大きさが「460px以上」の時に、CSSスタイルを上書きして適用します。

      max-width」時とは反対に「459px」以下の大きさの時はCSSスタイルは上書きされません。

      画面が大きくなった時にCSSスタイルを上書きするようなイメージになります。

      @media (min-width: 460px) {
      .big {
      display: bl0ck;
      }
      .small {
      display: none;
      }
      }
    • portrait
      Portraint

      ブラウザ(ビューポート)の大きさが縦長の時にCSSスタイルを適用します。

      正確には横幅より縦幅の方が大きい時にスタイルが適用されます。

      必ずしもスマホを縦向きにした時という訳ではないので注意してください。

      @media (orientation: portrait) {
      .big {
      display: block;
      }
      .small {
      display: none;
      }
      }
    • landscape
      Landscape

      ブラウザ(ビューポート)の大きさが横長の時にCSSスタイルを適用します。

      正確には縦幅より横幅の方が大きい時にスタイルが適用されます。

      必ずしもスマホを横向きにした時という訳ではないので注意してください。

      @media (orientation: landscape) {
      .big {
      display: block;
      }
      .small {
      display: none;
      }
      }
要素を非表示

今回メディアクエリで切り替えるプロパティは「display」を使用しました。

「display」を使って要素を表示したり非表示にすることが出来ます。

  • 非表示

    displayの値を「none」を指定するとその要素は消えて見えなくなります。

    .big {
    display: none;
    }
  • 表示

    displayの値を「block」を指定するとその要素が表示されます。

    正確には「none」以外の「block」「flex」「grid」などを指定すると表示されます。

    .big {
    display: block;
    }

レイアウトは「FlexBox」「Grid」「Postion」の3つ方法。

スマホ対応は「メディアクエリ」でCSSを変更。

これをすべて習得したら、本格的なWEbサイトが作成が出来ます。

実際に作ってみよう

制作時間 60分
難易度
使用した
HTMLタグ
15種類
使用した
CSSプロパティ
31種類
対応表 パソコン
スマホ

それでは、実際に作ってみましょう。

「FlexBox」「Grid」「Postion」「メディアクエリ」すべて使って旅館風のホームページを作ってみます。

復習や腕試しにどうですか??