11人がいいねしました

更新日

【CSS Grid 実務編】よくあるレイアウト6つを実際のコードで解説|明日から仕事で使える!

web兄さん

さて、【CSS Grid 入門編】の続きです。

ここからは、Web制作の現場において実際にどのようにCSS Gridを使用したら良いのかを6つの事例をもとに解説し、実務で使えるレベルに落とし込んでいきます。

これからGridを学びはじめる人へ

まだ読んでいない方はぜひ「【CSS Grid 入門編】動画解説で手を動かしながら学ぶ!3つのサンプルと課題で基礎をマスター」から取り組んでください。

本記事は基礎がわかっている前提の解説になっているため、基礎についての理解に余裕がないと学習効率が悪くなってしまいます。

CSS Gridの実務課題6つ

Web制作において、Gridを使って実装したが向いているレイアウト6選を解説します。

①左右反転

②カードレイアウト

③グリッドの端にそれぞれの要素を配置

④タイル型

⑤サイドバー+記事レイアウト

⑥コンテンツが少なくてもページ分の高さを保持する

  1. デモページ
  2. 課題用のファイル・解答用ファイル
  3. ポイントとなるコードの解説

上記をそれぞれの課題で用意しているため、手を動かしつつ「どういった実装にCSS Gridが向いているのか」を体感しながら理解することができるようになるため、即実務に反映させることができるようになります。

※①に関してはflexの方が向いています。(具体的な解説します)

課題フォルダと取り組みの流れ

Zipファイルをダウンロードして開くと01〜06のフォルダが並び、それぞれのフォルダに

  • A(解答フォルダ = デモと同じ)
  • Q(練習用フォルダ)

がそれぞれ入っています。


Qの解答用のフォルダにはreset.cssbase.cssといったGridの練習とは関係のない装飾のCSSがすでに適用されており、穴埋め形式でGridに必要な考え方のみ効率よく練習できるようになっています。

ここにコードを書いて正解のコードと同じ挙動になるかチェックしてください。

gridに関係のないCSSの解説はありません。


全てのサンプルをデモサイトとしてサーバーへアップしています。

noteでパスワードを手に入れてください

ここから先は有料コンテンツです。noteで購入することによりパスワードを入手してください。


また、パスワード入力後は、コードのCSSが当たらない状態になると思うので、リロードしてもらえればOKです👍

zipファイルのダウンロード / Basic認証のログイン情報

パスワードが必要です

スクール越えの圧倒的なコスパ1ヶ月でWeb制作を身に着ける

プロのメンターサポート付き実務レベルのコーディングカリキュラム

詳細を今すぐチェック!

ギャクサンで作成するポートフォリオサイトのイメージ

記事では見れない豆知識

圧倒的なコスパを体感1ヶ月でWeb制作を身に着ける

プロのメンターサポート付き実務レベルのコーディングカリキュラム

詳細を今すぐチェック!

ギャクサンで作成するポートフォリオサイトのイメージ