Webパブリッシング実践 - Figmaデザインでレスポンシブウェブサイトを完成させる
ezweb
HTML/CSS/JavaScriptの基本を身につけたら、いよいよ1つのWebサイトとして完成させる番です。 Figmaのデザインを分析し、HTML/CSSで実装した後、JavaScript(jQuery)によるインタラクションやレスポンシブ対応、デプロイまで進め、実務におけるWebパブリッシングの全プロセスを体験してみましょう。
初級
jQuery, Figma, publishment
**CSSの基礎を身につけたら、次はGridで複雑なWebレイアウトを自由に作ってみましょう。** CSS Gridの基本概念からFigmaデザインの分析、実際のWeb実装までを段階的に実践し、実務のWebパブリッシングに必要なレイアウト設計力を身につけましょう。
CSS GRIDの基本構文とプロパティを完全解説
実践例とともに行うプロジェクト演習
デザイン参照ウェブページの実装ノウハウ
チャンネル登録 & いいね & コメントイベント
簡単なミッションを完了して50%割引クーポンを今すぐ受け取りましょう。期間限定で提供される過去最大級のお得な特典を、今すぐ手に入れてください!
YouTubeのチャンネル登録&コメント認証イベントに参加する:https://forms.gle/wcD2wRVeaG7B7fSj7
以下のようなデザインの場合、皆さんはどのようにスタイルを記述しますか?
皆さんはおそらく、floatを使ったり、flexを使ったりして要素を配置しますよね?デザインのように12カラムグリッドに合わせて要素が横方向・縦方向にきれいに整列している場合は、floatやflexを使って配置するのが効率的でしょう。
上記のデザインはfloatやflexを利用して配置するのが容易ではありません。だからといって、すべての要素をabsoluteで処理するのも無理があり、そのように処理すると後の保守管理も不便になります。さらにレスポンシブ対応にすると、よりいっそう保守管理が難しいサイトになってしまいます。
上記の例のようなデザインを参考にして実装する際は、以下のようにグリッドを設定し、設定したグリッドに要素を配置するCSS GRID を活用する必要があります。
Grid Basic
フラクション
Positioning - ライン番号の活用
Positioning - グリッドセル名の活用
auto-fit、min-max関数
コンテナの幅に応じて、できるだけ多くの要素を配置する方法を学びます。
自動行配置
個別に高さを指定していない行も、スペースが足りない場合は自動的に行の高さを設定できます。
グリッドラインの名前で配置する
Gridでのみ使用できる新しいプロパティ
flexのalign-itemsに似たプロパティを、交差軸だけでなく主軸でも活用できます。
Gridで使用できるFLEXプロパティ
display:gridが適用された要素でも、さまざまなflexプロパティを使用できます。
自動で行を配置する - auto-fit、auto-fill
可能な限り多くの列を配置し、余ったスペースを処理する方法を学びます。
ウェブサイトを実装する - article layout
学習したgridプロパティを活用して、簡単なウェブページを実装します。
Gridとflexの活用
CSS Gridとflexを活用してウェブページのスタイルを記述する方法を学習します。
デザインでコーディングしやすいようにグループやレイヤーが整理されているか確認し、スタイルや変数がデザインに反映されているかを把握します。必要な画像を状況に応じて保存します。
グループ名を参照してHTMLの大きなセクションを作成し、詳細なデザインを参照して、内容の性質に合った適切なHTMLタグを記述します。この際、検索エンジン最適化やWeb標準などに準拠して作成します。
配置する要素に合わせてガイドを追加し、行と列の幅を確認しやすいように設定します。
コメントで区切って、セクションごとにCSSを記述します。
ボタンでスライドを移動したり、自動スライドをjQueryライブラリを利用して実装します。
スライドライブラリを活用する
flexのすべてのプロパティについての説明と、実習用サンプルファイルを提供します。
01_gridフォルダには、グリッドの主要なプロパティに関するサンプルファイルを用意しています。講義を見ながら学習できます。
完成版のソースを提供します。授業で完成させた例と比較してみてください。
純粋なJavaScriptの基礎と実践例を学習します。
jQueryの基礎から実践例、主要ライブラリの活用方法を学びます。
学習対象は
誰でしょう?
HTML、CSSの基礎はあるものの、レイアウト設計が難しい方
デザイン案をコードで実装する過程に難しさを感じている方
CSS Gridを活用して整然としたUIを構築したい方
従来のfloat、flexbox方式から効率的なレイアウト管理へ移行したい方
洗練されたモダンなウェブサイトを自分で制作したい方
プロジェクトを通じて実践経験を積みたい方
前提知識、
必要でしょうか?
HTML基礎
CSSの基礎
キャリア認証
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分)
講座資料:
知識共有者の他の講座はこちら
同じ分野の他の講座を見てみましょう!