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

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

Webデザインに欠かせないFlexboxとGridの使い方と違いについて紹介します。全体のレイアウトはGridを使って、細かなレイアウトはFlexboxを使いましょう。実際に作りながら使い方や特徴をまとめています。

class="digital">

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 { } .schedule .digital {

color: #8e6f5c; background: #c2b185; border-top: solid 2px; border-bottom: solid 2px; text-align: center;

} .schedule .list { grid-area: list; background: #dddddd; エリアベースのグリッド display: grid; grid-template-areas: "title title" "time list"; エリアの大きさを変更 display: grid; grid-template-areas: "title title" "time list"; grid-template-columns: 100px auto; .schedule .title { grid-area: title; .schedule .time { grid-area: time; .schedule .list { grid-area: list; ラインベース

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: 10px 0;

grid-column-start: 1; grid-column-end: 3; grid-row-start: 2; grid-row-end: 4; grid-column-start: -3; grid-column-end: -1; grid-row-start: -2; grid-row-end: -1; width: 100%; height: 100%; object-fit: cover; ラインベースのグリッド

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

display: grid; grid-template-columns: 1fr 1fr 1fr; display: grid; grid-template-rows: auto 300px 300px 300px;

「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 を大きく配置します。

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

grid-column-start: 1; grid-column-end: 3; grid-row-start: 2; grid-row-end: 4;

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

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

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;

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

width: 300px; height: 200px; object-fit: cover; 名前付きラインベース

Webデザインに欠かせないFlexboxとGridの使い方と違いについて紹介します。全体のレイアウトはGridを使って、細かなレイアウトはFlexboxを使いましょう。実際に作りながら使い方や特徴をまとめています。

サントリーニ島にあるイアの街

この神秘的な景色はギリシャのサントリーニ島の北西部にある「イア」と呼ばれるところ。 2020 HOMEPAGE 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;

grid-column-start: second; grid-column-end: third; grid-row-start: title; grid-row-end: image; padding: 10px 0;

grid-column-start: left; grid-column-end: right; grid-row-start: image; grid-row-end: main; width: 100%;

grid-column-start: second; grid-column-end: third; grid-row-start: main; grid-row-end: footer;

grid-column-start: left; grid-column-end: right; grid-row-start: footer; grid-row-end: bottom; background: #1881a8; text-align: center; padding: 10px 0;

サントリーニ島にあるイアの街 2020 HOMEPAGE グリッドラインに名前をつける サントリーニ島にあるイアの街 2020 HOMEPAGE ラインベースのグリッドの作成 display: grid; grid-template-columns: [left] 20px [second] 1fr [third] 20px [right]; display: grid; grid-template-rows: [title] auto [image] auto [main] auto [footer] auto [bottom]; 2020 HOMEPAGE grid-column-start: second; grid-column-end: third; grid-row-start: title; grid-row-end: image; 2020 HOMEPAGE grid-column-start: left; grid-column-end: right; grid-row-start: image; grid-row-end: main; 2020 HOMEPAGE grid-column-start: second; grid-column-end: third; grid-row-start: main; grid-row-end: footer; 2020 HOMEPAGE grid-column-start: left; grid-column-end: right; grid-row-start: footer; grid-row-end: bottom;

好きな場所に配置する

ポジションの種類 この中なら好きな所に移動していいよ!! 上にいるrelativeくんが良いって言われた所なら動くよ!! 画面にくっ付いちゃう!!スクロールしてもここにいるよ!! 要素を配置する

エッフェル塔 / パリ 2012 / 5 / 20 position: relative; } .paris .place { position: absolute; top: 0; left: 0; background: rgba(255,255,255,.6); padding: 5px 10px; } .paris .date { position: absolute; bottom: 0; right: 0; background: rgba(255,255,255,.6); padding: 5px 10px; エッフェル塔 / パリ 2012 / 5 / 20 1864 / 5 / 20 position: relative; .paris .place { position: absolute; top: 0; left: 0; .paris .date { position: absolute; bottom: 0; right: 0; .paris .place { position: absolute; top: 0; left: 0; .paris .place { position: absolute; top: 0; right: 0; .paris .place { position: absolute; left: 0; bottom: 0; .paris .place { position: absolute; right: 0; bottom: 0; .paris .place { position: absolute; top: 0; left: 0; right: 0; bottom: 0; 4方向すべての角 inset .paris .place { position: absolute; inset: 0; 画面に固定する

position: fixed; right: 40px; bottom: 120px; width: 80px; ヒツジです！！画面にピタッとしてみました！！クリックしてみて！！ position: fixed; right: 40px; bottom: 120px; スクロールで固定する position: sticky; top: 0; width: 60px; background: #e4bcbc; position: sticky; top: 60px; width: 120px; background: #7183ac; position: sticky; top: 120px; width: 180px; background: #7183ac; } .one , .two , .three { height: 60px; margin: auto; border-radius: 10px; height: 150px; border-top: solid 10px #cccccc; スクロールして画面に固定する position: sticky; top: 0;

モバイルフレンドリー

スマホ対応とは responsive メディアクエリ BIG SMALL .big , .small { color: white; border-radius: 20px; padding: 20px 0; text-align: center; font-size: 30px; background: #0099ff; display: none; background: #ff7a7a; } @media (max-width: 460px) { display: none; display: block; @media (max-width: 460px) { display: none; display: block; @media (min-width: 460px) { display: block; display: none; @media (orientation: portrait) { display: block; display: none; @media (orientation: landscape) { display: block; display: none; display: none; display: block;

実際に作ってみよう

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