강의

멘토링

커뮤니티

Programming

/

Web Publishing

CSS GRIDマスター:FIGMAデザインウェブ実装実践

CSS Gridは、複雑なレイアウトも簡単かつ直感的に実装できる強力なツールです。今回の講義では、CSS Gridの核心概念から実践活用法まで段階別に分かりやすく学べるように構成しました。もう複雑なfloatやflexboxに縛られず、効率的なレイアウト設計の定石を学びましょう!今すぐ始めましょう!

難易度 初級

受講期間 無制限

  • ezweb
HTML/CSS
HTML/CSS
jQuery
jQuery
Figma
Figma
HTML/CSS
HTML/CSS
jQuery
jQuery
Figma
Figma

受講後に得られること

  • CSS Gridの基本文法と属性の完璧なまとめ

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

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

CSS GRIDはいつ使用できますか?

以下のようなデザインなら、あなたはどのようにスタイルを作りますか?

あなたはおそらくfloatを使うか、flexを使って要素を配置しますか?デザインのように12列のグリッドに合わせて要素が水平、垂直に整列されている場合は、floatやflexを使って配置するのが効率的でしょう。

では、以下のようなデザインはどうでしょうか?


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

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


主な学習内容

CSSグリッドのさまざまな属性を学習します。

  1. Grid Basic

  2. Fraction


  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属性を活用して簡単なWebページを実装します。



  12. Gridとflex活用
    css gridとflexを活用してWebページスタイルを作成する方法を学びます。


デザインリファレンスウェブサイトの実装ノウハウを学びます。

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

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

セクション別HTMLの作成

グループ名を参照してHTMLの大きなセクションを作成し、詳細なデザインを参照して内容に固有の適切なhtmlタグを作成します。この時、検索エンジンの最適化、ウェブ標準などに準拠して作成します。

フルGRIDレイアウトの設定

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

セクション別CSSの作成

コメントで区切ってセクションごとのCSSを作成します。

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

ボタンを使ってスライドを移動するか、jQueryライブラリを使用して自動スライドを実装します。

スライドライブラリの活用

コアクリーンアップPDFを提供します。

flexのすべての属性の説明と実践例ファイルを提供します。


開始例を提供します。

01_gridフォルダは、グリッドコア属性のサンプルファイルを提供します。講義を見ながら学習できます。


完了例を提供します。

完成したソースを提供します。クラスを通して完成した例と比較してみてください。


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

Javascript Basics

純粋なJavaScriptの基本実践例を学びます。

jQuery Basic

ジェイクエリの基礎から実践例、主要なライブラリの活用法を学びます。

こんな方に
おすすめです

学習対象は
誰でしょう?

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

  • デザイン案をコードで実装する過程が難しい方

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

  • 既存のfloat、flexbox方式から効率的なレイアウト管理に切り替えたい方

  • クリーンで現代的なウェブサイトを自分で制作したい方

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

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

  • HTMLの基礎

  • CSSの基礎

こんにちは
です。

2,706

受講生

58

受講レビュー

4

回答

4.9

講座評価

11

講座

■ [現在] グリーンコンピュータアート学院 ウェブパブリッシング、フロントエンド講義
■ [現在] ウェブパブリッシングYouTubeチャンネル「Rock's Easyweb」運営
■ ザ・ジョウンコンピュータアカデミー ウェブパブリッシング講師
■ ハンビッコンピュータアカデミー ウェブパブリッシング講師
■ フロントエンドパブリッシャー、フロントエンドパブリッシング専門講師
■ UI/UXウェブデザインポートフォリオ講義


[ 書籍 ]
2021.07.19 刊行 / Webデザイン&WebパブリッシングのためのFigma完全活用書 / BJ Public

2022.08.25 出刊 / コーディングは初めて with ウェブパブリッシング / ヨンジン出版社

2023.10 出刊 /2024 SDエデュ ユ先生のウェブデザイン技能士実技家庭教師ノート / 時代考試企画

2024.11 重版 /2025 SDエデュ ユーソンベ ウェブデザイン技能士 実技 家庭教師ノート / 時代考試企画

[ 受賞歴 ]
2022.08 グリーンコンピューターアート学院 鍾路支店 - 優秀講師 2021.06 グリーンコンピューターアート学院 鍾路支店 - 優秀講師 2018.06 グリーンコンピューターアカデミー 新村支店 - 優秀講師 2017.05 グリーンコンピューターアカデミー 新村支店 - 優秀講師 2016.05 グリーンコンピューターアカデミー 新村支店 - 優秀講師 2015.10 グリーンコンピューターアカデミー 新村支店 - 優秀講師

カリキュラム

全体

24件 ∙ (4時間 51分)

講座資料(こうぎしりょう):

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

受講レビュー

全体

2件

5.0

2件の受講レビュー

  • mrnobody님의 프로필 이미지
    mrnobody

    受講レビュー 7

    平均評価 5.0

    5

    100% 受講後に作成

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

    • jinimini님의 프로필 이미지
      jinimini

      受講レビュー 5

      平均評価 4.8

      5

      33% 受講後に作成

      ¥3,487

      ezwebの他の講座

      知識共有者の他の講座を見てみましょう!

      似ている講座

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