■ 主な学習トピック

• CSSグリッドレイアウトとは何か理解できる。
• CSSグリッドレイアウトを使うメリットについて理解できる。
• CSSグリッドレイアウトの基本的な書き方
• 基本の3つのプロパティと1つの関数の使い方
• レスポンシブ対応に便利な関数とプロパティ

■ 講座内容

CSSグリッドレイアウトを使った、レイアウト手法の基本を習得することを目指します。

「CSSグリッドレイアウトとは？」
CSSグリッドレイアウトは格子状のマス目をベースにして、CSSでWebサイトのレイアウトを組む手法を指します。
カード型レイアウトや、タイル型レイアウトなどとも呼ばれています。

同じくCSSレイアウトの技術にはFlexboxもありますが、CSSグリッドレイアウトはFlexboxでは実現できない複雑なレイアウトを効率良く作成できます。

比較的新しい手法なので、IE（インターネット・エクスプローラー）では再現が難しく利用を躊躇していた場合も多かったのですが、2022年6月16日でIEのサポートが終了したため、今後実務でも活用の場が増えると予想される手法です。

■ 学習に必要な要件

• HTML, CSSの基礎知識
• パソコン（macOS または Windows）
• Visual Studio Code
• Google Chrome

■ このコースのターゲット

• HTML, CSSの基本を習得済みで、より効率よくウェブサイトの見た目を整えられるようになりたい方。

■ バージョン情報

• CSS3