ドットインストール 詳解CSS グリッドレイアウト編 【Flexboxより複雑なレイアウトを作れます】
ドットインストールまとめ記事、今回は「詳解CSS グリッドレイアウト編」です。
【この記事はこんな方におすすめ】
以下のような方に向けてかいてます。
→グリッドレイアウトについて復習する際に本記事をご活用ください！項目別に140文字程度にまとめております。目次から見たい項目だけ見てささっとブラウザバックしてもらって大丈夫です！
ただしこの記事はCSSのコードを一度も書いたことがない人には向かないです。先にCSSの基本を復習されることをおすすめします。
↓よろしければ私の記事もご活用ください。簡単にまとめてます。↓
それではいってみましょう！
- 【gridの基本】
- 【gap】
- 【repeat】
- 【minmax,auto-fit】
- 【grid-auto-rows】
- 【grid線指定】
- 【グリッド線に名前をつける】
- 【グリッド内の要素の配置を変える】
- 【グリッド内の要素の配置を直感的に指定する】
- 【グリッド内の要素の位置を揃える】
- 【復習】
【gridの基本】
①親要素に設定してgridを作る
②③それぞれgridの列・行の幅を指定。指定した数値の個数が列数・行数になる(④)
⑤幅の単位をfrとすると可変になり、親要素から固定要素の幅を引き余白を割り当てる。frが複数ある場合frの係数比で割り当てる
⑤で各gridの幅について、最初に一番左を100pxとし、その後残りの幅を2つのgridに2:1で割り当てている
【gap】
①gapでgridのマスの間に隙間をつくる
②数値が1つの場合縦横同じ幅で間隔が指定される
③数値が2つの場合、縦→横の順で間隔が指定される
【repeat】
①gridの行数・列数が膨大な時に使用。repeat(幅、繰り返す回数)とすることで同じ幅の行・列を指定個数作成できる
②回数をauto-fillとするとブラウザの幅に入りきらなくなるまで繰り返す
③には100pxの幅が入らないので余白ができている
【minmax,auto-fit】
①minmax(最低幅,1fr)
余白が最低幅を越えるまでは幅を可変にして余白を埋める
②auto-fit
繰り返し配置する要素がなくなった場合要素を横幅いっぱいに均等に配置
【auto-fillの時の挙動】
繰り返し配置する要素がなくなると右に余白ができる
【auto-fillの時の挙動】
— 6日後にプログラミング講師になるとぅーご (@togo_mentor) 2020年4月29日
繰り返し配置する要素がなくなると右に余白ができる#プログラミング#programming#HTML#CSS pic.twitter.com/5dgLzvWN3w
【auto-fitの時の挙動】
繰り返し配置する要素がない場合は要素を横幅いっぱいに均等に配置する
【auto-fitの時の挙動】
— 6日後にプログラミング講師になるとぅーご (@togo_mentor) 2020年4月29日
繰り返し配置する要素がない場合は要素を横幅いっぱいに均等に配置する#プログラミング#programming#HTML#CSS pic.twitter.com/wpFmlPddVJ
【grid-auto-rows】
①②で指定していない行が登場した時の行幅を指定。単体で使うと全ての行の幅を設定できる
②のみの指定だと(設定した数値の個数)行目以降の行の幅がコンテンツの幅になってしまう
②のみでは2行分の高さしか設定していないので3行目以降がつぶれてしまった(画像2枚目)ので①で3行目以降の行幅を指定した
【grid線指定】
①②
grid要素の格子線の番号で要素の配置を指定
番号は画像の通りでそれぞれ要素の上・左の線の番号
③
数値で指定
④
”数値/数値”で複数範囲選択
⑤
負の数で後ろから数える
⑥
”span 数値”で終点までの長さを指定
box1(赤)にgrid-row : 2; grid-column: 2/ span 2; (=2~4)と指定した結果画像の領域の長方形になる
【グリッド線に名前をつける】
①
grid-template-columns(rows)の値で列(行)の幅の数値の間に[名前]を入れてグリッド線に名前をつけることができる
②
①の名前で要素の配置を指定
③
名前を[~-start],[~-end]とすると”~”でライン指定できる
grid-templete-columnsで100px 100px [~-start] 100px [~-end]となっている。つまり2列目と3列目の間、3列目の右の線にそれぞれ名前をつけたということ
【グリッド内の要素の配置を変える】
①グリッド内の要素を左上から列ごとに並べる
②2,3の行幅・列幅を2倍に
③グリッドの外の幅を指定
④グリッド内の空いた場所を埋めるように要素を配置。大きさの違う画像を綺麗に配置する時など使える
①でgridの並び順を横→縦に変更。②でbox2,box3の縦と横をそれぞれ2倍に。grid-flowで縦の並び順が固定されているので空白ができてしまう(画像右下)。そこで④で空白を埋めるようにした(画像左下)。
【グリッド内の要素の配置を直感的に指定する】
①グリッド内のマスを文字で表現
②マスの名前を値とすることで該当する名前のマス全体に要素が配置される
③”.”で空白のマスを作ることができる
④全ての要素が四角に配置されなければ機能しない
④で"b・b"としたためbのブロック(box5)が四角にならずデータが壊れた
【グリッド内の要素の位置を揃える】
①②グリッド全体で要素の配置を揃える
justify：列方向
align：行方向
start：左
end：右
center：中央
③④グリッド内での要素の配置を揃える
⑤⑥個々の要素をグリッドに対して揃える
-contentが全体の要素の配置、-itemが要素内の要素の配置と捉えておけばOK
【復習】
今回は以上になります。
最後に記憶に定着するように復習しましょう。
★gridの基本
- display: grid;と親要素に指定することでgridを作成
- columnが列 rowが行
★gridの要素のサイズ指定方法
- px：直接grid-itemの列幅・行幅を指定
- fr：余白を指定した係数の比で割り当て
- グリッド線指定：縦・横の線の範囲を指定することで囲まれた部分を要素の領域とする。線に名前をつけて指定することも可能
- grid-area指定：直感的に指定可能だが制約も多い
★girdの要素を自動で設定する方法
- reoeat(aut-fill,~px)：~pxの列を自動で作成。ただし~pxに満たない場合余白ができる
- repeat(aut-fit,~px)：~px以下で画面を埋め尽くすように自動で列を作成。余白ができなくて済む
- minmax(~px,1fr)：~pxを超えるまでは画面幅いっぱいに伸ばす。一番端の要素に対して指定すると使いやすい
- grid-auto-rows：grid-templete-rowsで設定されていない行幅を自動で設定
★grid内の要素の配置を調整
- gird-flow：要素の配置方向を指定
- dense：grid内の要素を詰める
- justify~→縦方向、align→横方向の配置
- ~content→grid全体の配置 ~item→gridのマスの中の配置
★その他
- gap：girdのマスの間に隙間をつくる
girdを使いこなせるようになるとより複雑なWEBページのレイアウトを作れるようになります。
またWEBページ作成し次第記事内リンクもしくはサイドバーにリンクを追加しますのでチェックしてみてください！
普段はTwitterでプログラミング・読書・教育等について発信しています。
この記事が参考になった方はぜひフォローよろしくお願いします！
【ドットインストール経過報告】
— 6日後にプログラミング講師になるとぅーご (@togo_mentor) 2020年5月25日
詳解Javascript オブジェクト編 22~31 完了です👍
クラスの説明が結構難しかったですね。
ただ自分は複雑なものをいかにわかりやすく説明するか？を考えるのが好きなので全然苦じゃないです☺️#プログラミング初心者と繋がりたい#駆け出しエンジニアと繋がりたい pic.twitter.com/AibqKmtA16
