【HTML/CSSレイアウト】Gridを使うとFlexboxより簡単に複雑なレイアウトを組めます【ヤフー出身エンジニアの初心者向けプログラミング講座】

チャンネル名:しまぶーのIT大学
◆概要(引用)
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デザイン #コーディング

コメント

タイトルとURLをコピーしました