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

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

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

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

• 横並びにする
  要素

  要素

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

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

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

  • フレックスボックス
    1

    2

    3

    4

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

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

  • グリッドレイアウト
    2

    1

    3

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

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

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

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

  要素

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

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

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

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

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

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

• エリアベース
  ヘッダー

  サブ

  メイン

  フッター

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

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

  header

  header

  header

  sub

  main

  main

  footer

  footer

  footer

  1. 親要素の縦と横を３等分にして、それぞれエリアの名前を指定します。
  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. ラインの番号を使って、子要素をそれぞれ配置します。

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

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

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

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

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

「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;
    }

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

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

• ラインベースのグリッドの作成
  アルバム

  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」の比率で広がります。

• グリッドに配置

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

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

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

  • タイトル
    アルバム

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

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

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

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

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

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

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

    左右は1と３、上下は2と4を指定して配置します。

    #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;
    }

• ラインベースのグリッドの作成

  ラインベースでグリッドを作成する時に、ラインに「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];
    }
• グリッドに配置

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

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

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

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

    2020 HOMEPAGE

    20px

    1fr

    20px

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

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

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

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

    2020 HOMEPAGE

    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;
    }
  • メイン記事
    サントリーニ島

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

    2020 HOMEPAGE

    20px

    1fr

    20px

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

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

    .main {
    grid-column-start: second;
    grid-column-end: third;
    grid-row-start: main;
    grid-row-end: footer;
    }
  • フッター
    サントリーニ島

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

    2020 HOMEPAGE

    20px

    1fr

    20px

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

    上下は「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

  親要素の「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;
    }

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

• fixed

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

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

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

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

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

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

  friendly

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

• レスポンシブ対応
  mobile

  responsive

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

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

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

• メディアクエリ

  メディアクエリはブラウザの大きさごとにリアルタイムで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;

    }
    }