女性向けエンジニアスクール
CSSレイアウト入門 - 並び方は display が決めている
block と inline の積まれ方
3つの同じ中身に当てる display を切り替えて、並びと幅の効き方を見てください。
- 縦に積まれるか横に続くかは、要素の種類が決めている
- inline のときだけ width の指定が効かず、灰色に落ちる
- inline-block は流れに乗ったまま、箱としては block としてふるまう
1 / 4
FlexboxとGridを使い、ナビゲーションやカード一覧を意図した位置へ配置する方法を12レッスンで学ぶ無料コースです。
レッスン
12件
所要時間
約3.5時間
ランク
初級
学習環境
ブラウザ完結
3. 画面幅に合う
FlexboxとGridを選び、要素を意図した位置へ配置できる
FlexboxとGridを使い、ナビゲーションやカード一覧を意図した位置へ配置する方法を12レッスンで学ぶ無料コースです。
block・inline・inline-blockの違いを理解できる
Flexboxで横並びや中央配置を作れる
折り返し・間隔・伸縮を設定できる
Gridでカード一覧を作れる
FlexboxとGridを用途によって選べる
ナビゲーションとギャラリーを実装できる
ブラウザ完結（インストール不要）
ゆめさくコード編集部
プログラミング学習をもっと身近に。初心者から実務レベルまで、わかりやすいコンテンツをお届けします。
ゆめさくエンジニア / 現役ソフトウェアエンジニア。Ruby on Rails・Nuxt.js・Next.js・CakePHPなどの実務の開発をベースに、学習コンテンツを作成しています。
レッスンの最初に、図と短い言葉で学ぶ内容をつかみます。
CSSレイアウト入門 - 並び方は display が決めている
3つの同じ中身に当てる display を切り替えて、並びと幅の効き方を見てください。
1 / 4
前回リンクを inline-block にしても、メニューは縦に並んだままでした。リンクを包んでいる li が block だからです。子どもを横に並べたいときに指示を出すのは、子ども側ではなく親です。
.site-nav ul書くのは親のほうflex直接の子が横一列になる親が flex コンテナになると、直接の子は全員 flex アイテムになります。もとが block でも inline でも関係なく、既定で左から右へ並びます。
1 / 4
CSSレイアウト入門 - 主軸方向に寄せる
justify-content の値を順に送って、箱の位置と隙間の幅がどう動くか見てください。
1 / 4
考えてみよう外しても進めます
選ぶと、この枚の中で答えと理由を確かめられます。
1 / 4
動かしながら、仕組みや変化を目で確かめられます。
displayプロパティ
縦に積まれるか横に続くか
Flexboxをはじめよう
flex を書く場所主軸方向の配置
justify-content と余りの行き先
交差軸方向の配置
align-items と交差軸陽葵「ハレノヒ珈琲、開店を手伝ってくれる?」
1問目は無料で解けます。
教材を見ないで、依頼と完成条件だけを読んで書いてみてください。
HTML/CSS道場 ハレノヒ珈琲を開店させる10問
先にこちらを通しておくと、つまずきにくくなります
同時に進めると、理解が早くなる組み合わせです
