グリッドレイアウトの基本的な動作を知りたい ── 基本的なHTML構造、最低限必要なCSSプロパティを紹介。列テンプレートのgrid-template-columnsと単位frは重点的に解説。
Автор: かのうすけはるのCSSデザイン
Загружено: 2025-12-25
Просмотров: 28
《書籍『改訂新版HTML&CSSデザインレシピ集』連動》──デザインからHTML/CSSをコーディングする実践講習です。第48弾、グリッドレイアウトの基本的な使い方を紹介します。
グリッドレイアウトは、ボックスを横に並べるレイアウトを作るための強力な機能です。カラムレイアウトや段落レイアウトなどによく使われます。使い方はわかってしまえば難しくありませんし、表示結果の予測しやすさや正確なレイアウトができることを考えても、フレックスボックスよりも重要な機能です。
この動画では、グリッドレイアウトを使うための基本的なHTMLの構造とCSSの書き方、グリッド列の設定とスペースの作り方を中心にを詳しく解説します。単位 fr で設定する数値がどういうものかも説明します。
チャプター
0:25 イントロダクション
1:29 グリッドレイアウトの基本的なHTMLとCSS
8:02 グリッドアイテム間にスペースを作る
10:37 列テンプレートの値の書き方
11:49 単位frの大きさ
18:27 まとめ
この動画は、書籍『改訂新版HTML&CSSデザインレシピ集』の連動企画として、著者が作成しました。（おもに、書籍で取り上げられなかった情報や、補足情報を中心に動画にしています）。
動画の内容と書籍の内容は異なります。
Webデザイン、HTML/CSSコーディングについてより詳しい情報をお探しの方は、書籍も参考にしてみてください。
ベースにした書籍： 『改訂新版HTML&CSSデザインレシピ集』（狩野祐東著／技術評論社刊）
関連サンプル：
179 グリッドレイアウトの基本的な動作を知りたい
180 グリッドアイテム間にスペースを作りたい
書籍紹介ページ：
著者Webサイト（Studio947） https://book.studio947.net/title/5361/
出版社Webサイト（技術評論社） https://gihyo.jp/book/2025/978-4-297-...
amazon https://amzn.to/42Azl3i
Доступные форматы для скачивания:
Скачать видео mp4
-
Информация по загрузке:
![Как сжимаются изображения? [46 МБ ↘↘ 4,07 МБ] JPEG в деталях](https://ricktube.ru/thumbnail/Kv1Hiv3ox8I/mqdefault.jpg)
