INFO:

CSS Grid Areasを使ったレイアウトが便利で、皆さんに紹介したいと思って講座を作りました。 非常に簡単にデザイン構築ができるので超オススメです。ぜひ使ってみてくださいね。 👇 メリット 1: HTMLの不要なdivが消えます 2: Grid内の子要素のCSSがシンプルになる 3: レスポンシブデザイン対応が簡単 4: 視覚的に分かりやすくデザインできる 5: marginで悩む必要がない 🐙 GitHub（使用したコード） https://github.com/lightsound/html-css-class/tree/master/002b_%20HolyGrail-grid 📙 もくじ 0:00 前回の聖杯レイアウトをおさらい 2:22 Gridを使うと余計なdivタグが消えます 3:11 Gridを使って聖杯レイアウトを作り直し 5:23 grid-template, grid-areas の解説 6:25 height の指定方法について 8:10 width の指定方法について 9:53 レスポンシブ対応 12:51 gap プロパティについて紹介 13:41 実践で使っている余白テクニックを紹介 16:05 ＋αで外周にも余白を指定するテクニック 18:01 grid-template で使える単位の話 18:40 便利な単位 minmax について紹介 20:31 gridのエリアを使ったメリットまとめ 21:05 GitHubで今回使用したコードを見る方法を説明 21:29 grid-template の対応ブラウザの話 21:52 まとめ 🔥この動画だけは見よ！ 【HTML/CSSレイアウト #1】 実践的かつデザインも学べるレイアウト講座を開講します https://youtu.be/BOWH_7BpO8Q 【HTML/CSSレイアウト番外編】 コーディングに便利なChrome拡張機能を作りました https://youtu.be/CXrW5rqP-WY 【HTML/CSSレイアウト】 聖杯レイアウトのコーディング実践、デザイン解説 https://youtu.be/XrFD_0Pr6Nc 👨‍💻 自己紹介 ヤフー株式会社でプログラマーとして働いていました！ 現在は起業家として新規サービスを開発中です！ 下記に興味がある方はチャンネル登録をおねがいします！ ・IT業界、Web系、プログラミング講座 ・リモートワーク、在宅勤務、副業 ・スタートアップ、ベンチャー、経営者、社長 🌏 SNS Twitter: https://twitter.com/shimabu_it Instagram: https://www.instagram.com/shimabu_it 🏷️ タグ #Grid #Webデザイン #コーディング