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

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

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

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

横並びにする

要素

要素

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

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

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

フレックスボックス

1

2

3

4

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

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

グリッドレイアウト

2

1

3

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

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

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

好きなところに配置する

要素

要素

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

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

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

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

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

FlexBox

<li></li>
<li></li>
<li></li>

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

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

.menu {

display: 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-evenly

1

2

3

4

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

.animals {

display: flex;
justify-content: space-evenly;

}

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;

}

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

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

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

}

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

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

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;

}

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

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

1

2

3

4

5

6

7

8

9

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

.pictures {

height: 500px;
display: flex;
flex-wrap: wrap;
align-content: space-evenly;

}

space-between

1

2

3

4

5

6

7

8

9

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

.pictures {

height: 500px;
display: flex;
flex-wrap: wrap;
align-content: space-between;

}

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

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

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

エリアベース

ヘッダー

サブ

メイン

フッター

エリアベースで作成する時は、上の図のように「ヘッダー」「サブ」「メイン」「フッター」の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と3、上下は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の画像はあえてなにも指定しません。

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

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

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

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

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

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

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;

}

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

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

sticky

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

タイミング

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

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

動作

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

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

注意

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

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

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

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

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

モバイルフレンドリー

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: block;

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

}

}