バナー

この教材は「ギャクサン」というWeb制作学習カリキュラムの一部です。

はじめての方はこちらからご覧ください👉

更新日

10|CSS Gridとflexを使い分けをマスターしよう

web兄さん

今までレイアウトは全てdisplay: flexを使用してきましたが、今後どんどん活用されていくであろうCSS Gridを使用したレイアウトもマスターしていきましょう。

Gridの学習の流れ

GridはCSSの中でもレベルの高い知識の1つです。実はプロのコーダーさんでもGridを使いこなせる人はそこまで多くありません。(逆に言えばGridが使えなくても仕事としては成り立ちます

順を追って身につけていく必要があるので、以下の流れで取り組んでいきましょう。

  1. こちらの「CSS Grid 入門編」で基礎を身につける
  2. 学んだ知識を元にこの講座で実務レベルの実装を身につける
  3. 最後に「FlexboxとCSS Gridの違い」をおさらいする

基礎を終えたら実務に落とし込んでいこう

今回は以下の6つの例を元に実務レベルで扱えるように基礎を昇華させていきます👍

①左右反転
②カードレイアウト
③セルの端にそれぞれの要素を配置
④タイル風
⑤サイドバー+記事レイアウト
⑥コンテンツが少なくてもページの高さを保持

課題用のフォルダをダウンロード

パスワードが必要です

これより先は有料コンテンツです。「ギャクサン」の購入ページから契約をしてください。
すでに契約済みの方でパスワードの入力が上手くいかない場合はサポートへ連絡してください。