CSS Grid 実践 - Figmaデザインで学ぶWebレイアウト

**CSSの基礎を身につけたら、次はGridで複雑なWebレイアウトを自由に作ってみましょう。** CSS Gridの基本概念からFigmaデザインの分析、実際のWeb実装までを段階的に実践し、実務のWebパブリッシングに必要なレイアウト設計力を身につけましょう。

難易度 初級

受講期間 無制限

HTML/CSS
HTML/CSS
jQuery
jQuery
Figma
Figma
HTML/CSS
HTML/CSS
jQuery
jQuery
Figma
Figma

受講後に得られること

  • CSS GRIDの基本構文とプロパティを完全解説

  • 実践例とともに行うプロジェクト演習

  • デザイン参照ウェブページの実装ノウハウ

"今受け取らないと損!YouTubeをチャンネル登録するだけで受講料が半額"

チャンネル登録 & いいね & コメントイベント

簡単なミッションを完了して50%割引クーポンを今すぐ受け取りましょう。期間限定で提供される過去最大級のお得な特典を、今すぐ手に入れてください!

YouTubeのチャンネル登録&コメント認証イベントに参加する:https://forms.gle/wcD2wRVeaG7B7fSj7

CSS GRIDはいつ使うのでしょうか?

以下のようなデザインの場合、皆さんはどのようにスタイルを記述しますか?

皆さんはおそらく、floatを使ったり、flexを使ったりして要素を配置しますよね?デザインのように12カラムグリッドに合わせて要素が横方向・縦方向にきれいに整列している場合は、floatやflexを使って配置するのが効率的でしょう。

それでは、以下のようなデザインはいかがでしょうか?


上記のデザインはfloatやflexを利用して配置するのが容易ではありません。だからといって、すべての要素をabsoluteで処理するのも無理があり、そのように処理すると後の保守管理も不便になります。さらにレスポンシブ対応にすると、よりいっそう保守管理が難しいサイトになってしまいます。

上記の例のようなデザインを参考にして実装する際は、以下のようにグリッドを設定し、設定したグリッドに要素を配置するCSS GRID を活用する必要があります。


主な学習内容

CSSグリッドのさまざまなプロパティを学習します。

  1. Grid Basic

  2. フラクション


  3. Positioning - ライン番号の活用

  4. Positioning - グリッドセル名の活用


  5. auto-fit、min-max関数


    コンテナの幅に応じて、できるだけ多くの要素を配置する方法を学びます。

  6. 自動行配置
    個別に高さを指定していない行も、スペースが足りない場合は自動的に行の高さを設定できます。

  7. グリッドラインの名前で配置する


  8. Gridでのみ使用できる新しいプロパティ
    flexのalign-itemsに似たプロパティを、交差軸だけでなく主軸でも活用できます。

  9. Gridで使用できるFLEXプロパティ
    display:gridが適用された要素でも、さまざまなflexプロパティを使用できます。

  10. 自動で行を配置する - auto-fit、auto-fill
    可能な限り多くの列を配置し、余ったスペースを処理する方法を学びます。



  11. ウェブサイトを実装する - article layout
    学習したgridプロパティを活用して、簡単なウェブページを実装します。



  12. Gridとflexの活用
    CSS Gridとflexを活用してウェブページのスタイルを記述する方法を学習します。


デザインを参考にしたWebサイト実装のノウハウを学びます。

デザインの把握と要素の作成

デザインでコーディングしやすいようにグループやレイヤーが整理されているか確認し、スタイルや変数がデザインに反映されているかを把握します。必要な画像を状況に応じて保存します。

セクション別HTMLの作成

グループ名を参照してHTMLの大きなセクションを作成し、詳細なデザインを参照して、内容の性質に合った適切なHTMLタグを記述します。この際、検索エンジン最適化やWeb標準などに準拠して作成します。

全体のGRIDレイアウト設定

配置する要素に合わせてガイドを追加し、行と列の幅を確認しやすいように設定します。

セクションごとのCSS作成

コメントで区切って、セクションごとにCSSを記述します。

ライブラリを活用したスライドショーの実装

ボタンでスライドを移動したり、自動スライドをjQueryライブラリを利用して実装します。

スライドライブラリを活用する

要点整理PDFを提供します。

flexのすべてのプロパティについての説明と、実習用サンプルファイルを提供します。


開始用のサンプルを提供します。

01_gridフォルダには、グリッドの主要なプロパティに関するサンプルファイルを用意しています。講義を見ながら学習できます。


完成例を提供します。

完成版のソースを提供します。授業で完成させた例と比較してみてください。


次の講義をおすすめします。

Javascript Basics

純粋なJavaScriptの基礎と実践例を学習します。

jQuery基礎

jQueryの基礎から実践例、主要ライブラリの活用方法を学びます。

こんな方に
おすすめです

学習対象は
誰でしょう?

  • HTML、CSSの基礎はあるものの、レイアウト設計が難しい方

  • デザイン案をコードで実装する過程に難しさを感じている方

  • CSS Gridを活用して整然としたUIを構築したい方

  • 従来のfloat、flexbox方式から効率的なレイアウト管理へ移行したい方

  • 洗練されたモダンなウェブサイトを自分で制作したい方

  • プロジェクトを通じて実践経験を積みたい方

前提知識、
必要でしょうか?

  • HTML基礎

  • CSSの基礎

こんにちは
ezwebです。

キャリア認証

3,001

受講生

77

受講レビュー

4

回答

4.9

講座評価

15

講座

フロントエンドの実務教育から企業・機関への出張講義、オンライン講義の制作まで行う、Webフロントエンド専門講師です。

■ フロントエンド専門講義
HTML/CSS、JavaScript、React、Firebase、Figma、AIを活用したウェブ開発など
ウェブパブリッシングからフロントエンド実務まで、段階的な教育を行います。

■ 企業・機関・教育機関への出張講義が可能
企業の実務担当者向け研修、KDTコース、大学・スクールでの特別講義など
受講者の対象とレベルに合わせたカリキュラム構成および出張講義が可能です。

■ オンライン教育課程の設計・制作が可能
オンライン講義のカリキュラム企画から教材・PPT・実習資料・サンプルコードの制作、
講義の撮影およびコンテンツ納品まで、オンライン教育コンテンツの全工程に対応できます。

■ オンライン・オフライン講義の両方に対応
スクールでの対面講義だけでなく、リアルタイムのオンライン講義、録画型コンテンツの制作など
教育環境に合わせてさまざまな形式で実施します。


■ 主な活動

  • ESTSOFT KDT フロントエンド講義

  • グリーンコンピューターアカデミー Webパブリッシング・フロントエンド講義

  • WebパブリッシングのYouTubeチャンネル「ezweb」を運営

  • Webパブリッシング・Webデザイン関連書籍の執筆


■ 書籍
2021.07 / Webデザイン&WebパブリッシングのためのFigma完全活用ガイド / ビージェイパブリック

2022.08 / コーディングが初めての人のための with ウェブパブリッシング  / ヨンジン出版社

2023.10 / 2024 SDエデュ ユ・ソンベ ウェブデザイン技能士実技 個別指導ノート / 時代考試企画

2024.11 / 2025 SDエデュ ユ先輩 ウェブデザイン技能士 実技個別指導ノート / 時代考試企画

2025.11 / 2026 SDエデュ ユ・ソンベ ウェブデザイン技能士 実技個別指導ノート / 時代考試企画

 

もっと見る

カリキュラム

全体

24件 ∙ (4時間 51分)

講座資料:

授業資料
講座掲載日: 
最終更新日: 

受講レビュー

全体

2件

5.0

2件の受講レビュー

  • mrnobody님의 프로필 이미지
    mrnobody

    受講レビュー 8

    ∙

    平均評価 5.0

    5

    100% 受講後に作成

    良い講義をありがとうございます。

    • jinimini님의 프로필 이미지
      jinimini

      受講レビュー 7

      ∙

      平均評価 4.9

      5

      33% 受講後に作成

      ezwebの他の講座

      知識共有者の他の講座はこちら

      似ている講座

      同じ分野の他の講座を見てみましょう!