列テンプレートのさまざまな設定方法 — グリッドの最重要ポイント、grid-template-columnsを解説。単位frからminmax(), repeat()、レスポンシブデザインまで。
Автор: かのうすけはるのCSSデザイン
Загружено: 2026-01-08
Просмотров: 27
Описание:
《書籍『改訂新版HTML&CSSデザインレシピ集』連動》──デザインからHTML/CSSをコーディングする実践講習です。第49弾、グリッドレイアウトを使うときの重要ポイント、列テンプレートの設定方法を解説します。
グリッドレイアウトを使いこなすもっとも重要なポイントは、列テンプレートの設定です。列テンプレートを設定するgrid-template-columnsプロパティの値の書き方にはさまざまなバリエーションがあり、使いこなすことでグリッドの列数だけはもちろん、グリッド幅や伸縮の方法を自在に決めることができます。
レスポンシブデザインに対応するときも、メディアクエリなどと組み合わせて列テンプレートを操作します。
動作結果を見ながら、列テンプレートのさまざまな値の書き方を見てみることにしましょう。
チャプター
0:00 イントロダクション
0:24 列テンプレートの設定が重要
4:24 grid-template-columnsの値の書き方
7:29 値に固定値を使う
8:59 minmax()
14:35 repeat()
15:58 レスポンシブデザイン
18:00 まとめ
関連動画
グリッドレイアウトの基本的な使い方は第48弾をご覧ください。
#48 グリッドレイアウトの基本的な動作を知りたい ── • グリッドレイアウトの基本的な動作を知りたい ── 基本的なHTML構造、最低限必要な...
この動画は、書籍『改訂新版HTML&CSSデザインレシピ集』の連動企画として、著者が作成しました。（おもに、書籍で取り上げられなかった情報や、補足情報を中心に動画にしています）。
動画の内容と書籍の内容は異なります。
Webデザイン、HTML/CSSコーディングについてより詳しい情報をお探しの方は、書籍も参考にしてみてください。
ベースにした書籍： 『改訂新版HTML&CSSデザインレシピ集』（狩野祐東著／技術評論社刊）
関連サンプル：
181 列テンプレートの効率的な書き方を知りたい
書籍紹介ページ：
著者Webサイト（Studio947） https://book.studio947.net/title/5361/
出版社Webサイト（技術評論社） https://gihyo.jp/book/2025/978-4-297-...
amazon https://amzn.to/42Azl3i
Повторяем попытку...
Доступные форматы для скачивания:
Скачать видео
-
Информация по загрузке:
![STOP Downloading Files! Move Data Directly Between Clouds (0 Local Disk Usage) [Rclone]](https://image.4k-video.ru/id-video/7XB6TkWJhck)
![Как сжимаются изображения? [46 МБ ↘↘ 4,07 МБ] JPEG в деталях](https://image.4k-video.ru/id-video/Kv1Hiv3ox8I)
![[CSS] 画面の隅に要素を固定配置したい──position:fixedで要素を固定表示し、スマホ・PCでレイアウトを調整します。位置調整系プロパティをデフォルト値に戻す方法も。](https://image.4k-video.ru/id-video/Z6WUF5GZ3xo)
