14｜GridLayoutで画像一覧のギャラリー作成
⚠️ preproからのお願い
このチャンネルは「修行の場」です。「コピペは原則禁止」。
自分の指でコードを打ち込み、エラーと向き合い、身体で技術を身につけていく。
一見タイパが悪いように見えて、それがジェネラリストへの一番の近道です！
〜デザインからプログラミングまで一人で開発できるジェネラリストへ〜
ICTの技術をトータルで学ぶYouTubeチャンネル「prepro -プリプロ-」へようこそ！
講師の東郷です。
今回はグリッドレイアウトと呼ばれる、格子状に要素を並べるレイアウトをCSSで作成します。
Webサイトのデザインは縦横に並ぶ構造が多いので、グリッドレイアウトをマスターすると一気にレベルアップします。
基本の仕組みさえ押さえてしまえば、格子状のレイアウト（タイル状のカード並びや、複雑なWebサイトの枠組み）が驚くほど少ないコードで、しかも綺麗に実装できるようになります！
【この動画で学べること】
- CSSの基礎
- グリッドレイアウトの作り方
- 計算できるcalc()関数
- デベロッパーツールの使い方
- インラインとブロックの性質
- 各種CSSプロパティ（gap, grid-template-columns, font-size, font-weight, display）
【preproのカリキュラム方針】
preproでは、特定の言語に特化せず、Webアプリ開発の全体像を学びたい方をターゲットにしています。
本編： 15分でサクサク進むメイン講義
0.5回シリーズ： 習熟度の格差を埋め、しっかり学びたい人のための深掘り講義
この「レベル別階層構造」で、初心者から経験者まで自分のペースで学習を進めることができます。
もっと詳しく知りたい人のための
0.5回シリーズ
今回はグリッドレイアウトと呼ばれる、格子状に要素を並べるレイアウトをCSSで作成します。
Webサイトのデザインは縦横に並ぶ構造が多いので、グリッドレイアウトをマスターすると一気にレベルアップします。
基本の仕組みさえ押さえてしまえば、格子状のレイアウト（タイル状のカード並びや、複雑なWebサイトの枠組み）が驚くほど少ないコードで、しかも綺麗に実装できるようになります！
【この動画で学べること】
- CSSの基礎
- グリッドレイアウトの作り方
- 計算できるcalc()関数
- デベロッパーツールの使い方
- インラインとブロックの性質
- 各種CSSプロパティ（gap, grid-template-columns, font-size, font-weight, display）