CSSレイアウト入門の導入スライド

12 件（作成済み 8・導入不要 0・未作成 4・合計 32枚 / 8本）

スライド103 動く図解1404 レッスンの導入2264 コラム6

レッスンの導入の索引へ戻る

CSSレイアウト入門第1レッスン

並び方は display が決めている

導入スライド 4枚

CSSレイアウト入門 - 並び方は display が決めている

block と inline の積まれ方

3つの同じ中身に当てる display を切り替えて、並びと幅の効き方を見てください。

縦に積まれるか横に続くかは、要素の種類が決めている
inline のときだけ width の指定が効かず、灰色に落ちる
inline-block は流れに乗ったまま、箱としては block としてふるまう

1 / 4

CSSレイアウト入門 - 並び方は display が決めている

3つの値のふるまい

HTML の要素は、なにも指定しなくても block と inline のどちらかの性格を持っています。display はその性格を書きかえるプロパティです。

inline は自分のために行の高さを押し広げてくれません。上下に padding を足すと、背景だけが上下の行に重なってはみ出します。

値	どうふるまうか
block	かならず改行して1行をまるごと使う。h1 や p や div のなかま
inline	文章の流れのなかに文字と同じように並ぶ。a や span のなかま
inline-block	並び方は inline のまま、中身の箱としては block

2 / 4

考えてみよう外しても進めます

文章の中のリンクを inline から inline-block に変えると、何ができるようになりますか。

選ぶと、この枚の中で答えと理由を確かめられます。

3 / 4

CSSレイアウト入門 - 並び方は display が決めている

ナビのリンクへの当て方

リンクの押せる範囲を縦に広げたいときは、inline のままでは足りません。inline-block にしてから padding で広げます。

padding は上下と左右の2つの値でまとめて書けます。指で押しやすい大きさになったかを、プレビューで確かめてください。

ナビの中のリンクだけを狙いたいので、セレクタは .site-nav a のように2つ重ねます。

.site-nav a {
  display: inline-block;
  padding: 6px 4px;
}

4 / 4

CSSレイアウト入門第2レッスン

親に1行足すと子が並ぶ

導入スライド 4枚

変えるのは親、動くのは子

前回リンクを inline-block にしても、メニューは縦に並んだままでした。リンクを包んでいる li が block だからです。子どもを横に並べたいときに指示を出すのは、子ども側ではなく親です。

.site-nav ul {

.site-nav ul書くのは親のほう

display: flex;

flex直接の子が横一列になる

}

.site-nav ul {

書くのは親のほう

display: flex;

直接の子が横一列になる

}

親が flex コンテナになると、直接の子は全員 flex アイテムになります。もとが block でも inline でも関係なく、既定で左から右へ並びます。

1 / 4

CSSレイアウト入門 - 親に1行足すと子が並ぶ

flex をどこに書くかで変わる

display の flex をどの要素に書くかを切り替えて、どこが横に並ぶか見てください。

親に書いたときだけ、直接の子が横に並ぶ
子に書くと並ぶのは孫のほうで、子は縦のまま
書かないと、もとの縦積みに戻る

2 / 4

考えてみよう外しても進めます

親に display の flex を書きました。その子の中にさらに入れ子になっている孫の要素も、横に並びますか。

選ぶと、この枚の中で答えと理由を確かめられます。

3 / 4

ここでつまずく

並ばないときの原因は、だいたいこの4つのどれかです。

起きること原因

何も横に並ばない

display の flex を子のほうに書いている

一部だけ並ばない

並べたい要素の親が、思っているのと別の要素

並んだが間隔がばらばら

すきまはまだ指定していない。gap は後の回

高さが勝手にそろう

既定の align-items が stretch で伸ばしている

今回さわるのは2か所です。メニューの .site-nav ul と、写真と文章を包んでいる .profile に書きます。

4 / 4

CSSレイアウト入門第3レッスン

主軸方向に寄せる

導入スライド 4枚

CSSレイアウト入門 - 主軸方向に寄せる

5つの値で寄り方が変わる

justify-content の値を順に送って、箱の位置と隙間の幅がどう動くか見てください。

動くのは主軸の方向だけ。既定では左から右の横向き
隙間の幅が数値で出るので、値の名前と結びつけられる
space-between のときだけ、両端の隙間が 0 になる

1 / 4

CSSレイアウト入門 - 主軸方向に寄せる

5つの値の並び方

justify-content は、主軸のどこにアイテムのかたまりを寄せるかを決めます。親に1行書くだけで、全体の位置がまとめて動きます。

ナビバーでよく使うのは center と space-between です。ロゴを左、メニューを右に置きたいときは space-between が便利です。

値	寄り方
flex-start	主軸の先頭に寄せる。これが既定
center	主軸の真ん中に寄せる
flex-end	主軸の末尾に寄せる
space-between	両端いっぱいに広げ、アイテムの間を均等にあける
space-around	アイテムの左右に同じ幅の余白をつける

2 / 4

考えてみよう外しても進めます

space-between を指定したとき、いちばん左のアイテムと親の左端のあいだの隙間はどうなりますか。

選ぶと、この枚の中で答えと理由を確かめられます。

3 / 4

CSSレイアウト入門 - 主軸方向に寄せる

主軸という言葉の意味

flex コンテナには主軸があります。既定では左から右へ向かう横向きの軸で、アイテムはこの軸にそって順に並んでいきます。

縦方向のそろえ方は、この軸と直角に交わるもう1本の軸が受け持ちます。次のレッスンの align-items です。

text-align の center では li の中の文字しか動きません。justify-content ならアイテムの箱ごとまとめて動きます。

.site-nav ul {
  display: flex;
  justify-content: center;
}

4 / 4

CSSレイアウト入門第4レッスン

高さの違う子をそろえる

導入スライド 4枚

考えてみよう外しても進めます

高さを指定していない3つのアイテムを display の flex で横に並べました。何も足さないと、3つの高さはどうなりますか。

選ぶと、この枚の中で答えと理由を確かめられます。

1 / 4

CSSレイアウト入門 - 高さの違う子をそろえる

交差軸のどこでそろえるか

align-items の値を送って、高さの違う3つの箱が上下にどう動くか見てください。

stretch のときだけ、3つとも親と同じ高さになる
flex-start は上端、flex-end は下端でそろう
center は高さの中心をそろえる。中身の量が違っても落ち着く

2 / 4

CSSレイアウト入門 - 高さの違う子をそろえる

既定は stretch で動いている

align-items を書いていない flex コンテナも、stretch という値で動いています。写真と文章のように高さの差が大きいと、文章だけが上から流れはじめて落ち着きません。

メニューのほうは文字の高さがきれいにそろいます。文字のベースラインでそろえたいときは baseline という値もあります。

center にすると、写真の中心と文章の中心が合って、ぐっと読みやすくなります。

.site-nav ul {
  align-items: center;
}

.profile {
  align-items: center;
}

3 / 4

CSSレイアウト入門 - 高さの違う子をそろえる

主軸と交差軸の対応

軸が2本あることさえ押さえておけば、値の名前を忘れてもどちらのプロパティを見ればよいかは迷いません。

justify が主軸、align が交差軸。この対応だけ覚えておけば、しばらく困りません。

言葉	受け持つもの
主軸（既定では左から右）	justify-content が寄せ方を決める
交差軸（既定では上から下）	align-items がそろえ方を決める
アイテム1つだけ別にしたい	そのアイテムに align-self を書く
flex-direction を column にした	主軸と交差軸が入れかわる

4 / 4

CSSレイアウト入門第5レッスン

並ぶ方向と折り返し

導入スライド未作成

CSSレイアウト入門第6レッスン

余った幅を分け合う

導入スライド 4枚

gap は隙間だけを作る

アイテムどうしのすきまは、子に margin を書くより親に gap を書くほうがずっと簡単です。

.site-nav ul {

display: flex;

gap: 20px;

gapアイテムとアイテムの間だけ

}

.site-nav ul {

display: flex;

gap: 20px;

アイテムとアイテムの間だけ

}

margin だと端にも余白がついてしまい、最初や最後だけ打ち消す指定が必要になります。gap なら余白の管理を親1か所に集められます。

1 / 4

CSSレイアウト入門 - 余った幅を分け合う

余りをどう配るか

2番目の箱の flex-grow を動かして、余っていた幅がどこへ行くか見てください。

flex-grow は幅の指定ではなく、余った幅の取り分
既定は 0。全部 0 のままだと余りは右端に残る
そもそも余りが無いときは、値を上げても何も起きない

2 / 4

考えてみよう外しても進めます

横に並んだ2つのアイテムに、flex-grow を 1 と 2 で指定しました。この2つの幅はどうなりますか。

選ぶと、この枚の中で答えと理由を確かめられます。

3 / 4

ここでつまずく

伸び縮みを決めるのは3つのプロパティで、それぞれ既定値が違います。既定を知らないと、書いていないほうの動きに驚きます。

起きること見るところ

gap を書いても隙間が変わらない

その親が flex になっていない

写真が細くつぶれる

flex-shrink の既定は 1。0 を書いて縮まないようにする

文章が伸びてくれない

flex-grow の既定は 0。1 を書いて余りを受け取る

せまい画面で文章が読めない

flex-basis で、折り返しに切りかわる基準の幅を決める

写真は flex-shrink の 0、文章は flex-grow の 1 と flex-basis の 260px。この組み合わせが今回の形です。

4 / 4

CSSレイアウト入門第7レッスン

章末仕上げナビバー完成

導入スライド未作成

CSSレイアウト入門第8レッスン

先にマス目を宣言する

導入スライド 4枚

親に grid と列の定義を書く

display の grid だけでは縦1列のままです。列をいくつに分けるかを grid-template-columns で伝えて、はじめてマス目ができます。

.work-list {

display: grid;

display: gridここがグリッドコンテナ

grid-template-columns: 1fr 1fr 1fr;

grid-template-columns列をいくつに分けるか

}

.work-list {

display: grid;

ここがグリッドコンテナ

grid-template-columns: 1fr 1fr 1fr;

列をいくつに分けるか

}

子要素には何も書きません。並べ方を決めるのは親の仕事、という考え方は Flexbox とまったく同じです。

1 / 4

CSSレイアウト入門 - 先にマス目を宣言する

書いた値がトラックになる

列の指定を切り替えて、縦線の位置と各トラックの実測がどう動くか見てください。

fr は余っている幅を何個ぶん取るかの単位
px の列を先に取り、残りを fr が分け合う
アイテムが列の数を超えると、次の行へ落ちる

2 / 4

考えてみよう外しても進めます

grid-template-columns に 200px と 1fr を並べました。親の幅が 600px のとき、2つ目の列の幅は何 px になりますか。

選ぶと、この枚の中で答えと理由を確かめられます。

3 / 4

CSSレイアウト入門 - 先にマス目を宣言する

repeat でまとめて書く

同じ値が並ぶときは repeat が使えます。列の数を増やしたいときも、数字を1つ直すだけで済みます。

作品カードを囲んでいるのは .work-list です。ここにマス目を切れば、中の .work-card が自動で3列に並びます。

repeat(3, 1fr) は 1fr 1fr 1fr と書くのとまったく同じ意味です。

.work-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

4 / 4

CSSレイアウト入門第9レッスン

行の定義と間隔

導入スライド未作成

CSSレイアウト入門第10レッスン

数えるのはマスではなく線

導入スライド 4枚

考えてみよう外しても進めます

3列のグリッドで、あるカードに grid-column の 1 / 3 を指定しました。このカードは何マスぶんの幅になりますか。

選ぶと、この枚の中で答えと理由を確かめられます。

1 / 4

CSSレイアウト入門 - 数えるのはマスではなく線

線番号でマスをまたぐ

終了する線の番号を切り替えて、またいだマスの数がどう変わるか見てください。

線の番号は左端から 1 で始まり、マスの数より1つ多い
またいだマスの数は、終了の番号から開始の番号を引いた数
押し出されたアイテムは、あいているマスへ順に流れる

2 / 4

線番号の数え方

3列のグリッドなら、縦の線は左端から 1・2・3・4 の4本です。マスの数より1つ多い、と覚えると数え違えません。

.work-card:first-child {

first-child親の中の1番目だけ

grid-column: 1 / 3;

1 / 31番の線から3番の線まで

}

.work-card:first-child {

親の中の1番目だけ

grid-column: 1 / 3;

1番の線から3番の線まで

}

縦方向は grid-row です。書き方はまったく同じで、grid-row の 1 / 3 なら2行ぶんの高さになります。

3 / 4

ここでつまずく

うまく広がらないときは、どこに書いたかと、何を数えたかを見ます。

起きること原因

指定したのに広がらない

grid-column は親ではなくアイテムのほうに書く

2マスのつもりが3マスになる

線の番号とマスの番号を数え違えている

他のカードの位置がずれる

押し出されたカードが、あいているマスへ流れている

1枚目以外にも当たる

first-child は親の中の1番目だけを選ぶ

span の 2 と書いても幅は同じになりますが、置く位置まで決めたいときは線番号のほうが確実です。

4 / 4

CSSレイアウト入門第11レッスン

1次元か2次元か

導入スライド 4枚

CSSレイアウト入門 - 1次元か2次元か

並べたい方向が1つなら Flexbox

Flexbox は中身のサイズが主役です。子の幅がばらばらでも、余ったぶんを分け合っておさまります。Grid は入れ物のサイズが主役で、先にマス目を決めてから中身を流し込むので、列がぴたりとそろいます。

このページにはすでに両方が入っています。趣味リストは Flexbox、作品リストは Grid です。

同じページの中で両方を使ってかまいません。並べたい形のほうで選びます。

/* 一列に並べたい */
.site-nav ul {
  display: flex;
}

/* 行と列をそろえたい */
.work-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

1 / 4

CSSレイアウト入門 - 1次元か2次元か

場面で選ぶ

迷ったときの基準は1つだけです。並べたいものが1本の線なら Flexbox、行と列のマス目なら Grid を選びます。

どちらでも組めてしまう場面もあります。そのときは、あとで直す人が読みやすいほうを選べば十分です。

並べたいもの	選ぶもの
ヘッダーのメニュー	Flexbox。一列に並ぶだけ
長さの違うタグを折り返す	Flexbox。幅を中身にまかせる
同じ形のカードのギャラリー	Grid。列をそろえたい
大小の混ざった雑誌風の配置	Grid。行と列をまたぐ
ページ全体の大枠	Grid。先に区画を決める

2 / 4

考えてみよう外しても進めます

ロゴを左、メニューのリンクを右に置くヘッダーを組みます。Flexbox と Grid のどちらが向いていますか。

選ぶと、この枚の中で答えと理由を確かめられます。

3 / 4

CSSレイアウト入門 - 1次元か2次元か

迷ったときの決め方

選び直すより先に、いま入っている指定が二重に効いていないかを見ます。あとから足した gap は、昔入れた margin と重なりがちです。

.work-card の margin-bottom は、カードが縦一列だったころの余白です。いまは gap がすきまを作っているので、まず半分の 8px まで詰めて見た目の変化を目で追ってください。

確かめること	見るところ
1本の線か、マス目か	1本なら Flexbox、マス目なら Grid
幅を中身にまかせたいか	まかせたいなら Flexbox
列をそろえたいか	そろえたいなら Grid
すきまが二重になっていないか	gap を入れたら、古い margin は詰める

4 / 4

CSSレイアウト入門第12レッスン

章末仕上げギャラリー完成

導入スライド未作成