【プロゲート】HTML & CSS Flexbox編の学習内容まとめ
ここではオンライン学習サイト「プロゲート」の学習内容をまとめていきます。
HTML & CSS Flexbox編
1.目標物を確認しよう
Flexboxを学ぼう
・このレッスンではCSSを使ったレイアウト方法の1つであるFlexboxを学んでいく
・学習する内容はFlexboxのたくさんあるプロパティの中でも、特によく利用されるもの
・Flexboxはとても便利なので、しっかり身につける
Flexboxでできること
Flexboxを使うと今まではfloatで作っていた横並びを、もっと簡単に作れるようになる
2.display:flex
display: flexとは
・display: flexは指定した要素の子要素を横並びにする
display: flexの使い方
・横並びにしたい要素の親要素にdisplay: flexを指定する
3.flex: auto
flex: autoとは
・flex: autoは指定した要素の幅を親要素に合わせて伸縮させることができる
flex: auto の使い方
・親要素の幅に合わせて伸ばしたい要素にflex: autoを指定する
4.flex-wrap: wrap
flex-wrap: wrap とは
・flex-wrap: wrapを指定すると、子要素のサイズに応じて折り返すことができる
flex-wrap: wrap の使い方
・折り返したい要素の親要素にflex-wrap: wrapを指定する
・折り返したい要素自身には列数に応じたwidthを指定する
・今回は2列にしたいのでwidth: 50%を指定する
割合を使ったサイズの指定の復習
・高さや幅を%で指定すると、親要素に対してどのくらいの割合にするかを指定できる
5.メディアクエリ
メディアクエリと合わせて使おう
・レスポンシブデザインにするために、HTML＆CSSの上級編で学習したメディアクエリを使う
・画面幅が狭くなったときに折り返しを有効にできる
6.flex-direction
flex-direction: columnとは
・flex-direction: columnは子要素を上から下へ並べる
flex-direction: columnの使い方
・縦に並べたい要素の親要素にflex-direction: columnを指定する
ブロック要素の中央寄せの復習
・margin: 0 autoとwidthを指定することで中央寄せにする
・widthは画面幅1000px以下の時に指定したものがそのまま適用されているので、ここではmarginのみを指定する
メディアクエリと合わせて使おう
・メディアクエリを合わせて設定すると、画面がさらに狭くなったときに縦方向に並べることができる