
コーディングは初めてなので with ウェブパブリッシング - CSS
ezweb
無料
入門 / HTML/CSS
5.0
(21)
CSSの基礎からアニメーション、レスポンシブまで学習します。 実践的な例題を通して学習内容を復習しながら、しっかりと基礎を固めます。
入門
HTML/CSS
この講義では、Figmaのデザインをウェブページとして実装する過程を段階的に説明します。画像の保存からHTML、CSSの作成、JavaScriptの作成まで、全般的なウェブパブリッシングの実務を扱います。初心者でも簡単に 따라 할 수 있도록 体系的に進められます。実習中心の学習を通して、ウェブデザインを効率的にコードに変換する方法を学ぶことができます。


講座 を紹介して、成長と収益を得ましょう!

マーケティングパートナーズ
講座 を紹介して、成長と収益を得ましょう!
Figmaでウェブ用画像を保存および最適化する方法
HTML構造設計と効率的なマークアップの作成方法
CSSの基本スタイリングおよびResetの適用
Flexboxレイアウトの活用法
ボタン、アイコン、アニメーション効果の適用
ウェブ標準とアクセシビリティを考慮したパブリッシング
ピグマデザインを参照して、さまざまなレイアウト、さまざまなデザイン要素、計画の意図を把握し、Webページとして実装する方法を学びます。
FigmaデザインをWebに実装するプロセスを理解します。
デザインファイルを分析し、Webパブリッシングに適用する方法を学びます。
Webパブリッシングの基本概念と実務スキルを習得します。
HTMLとCSSを活用したマークアップとスタイリングのテクニックを学びます。
FigmaでWeb用の画像を保存して最適化する方法を学びます。
適切な画像フォーマットを選択し、Webパフォーマンスを考慮した画像最適化方法を学びます。
Web標準とアクセシビリティを考慮したコード作成能力を向上させます。
さまざまな環境でも一貫したUI/UXを提供できるように学習します。
ヘッダーとナビゲーションバーの実装能力をインキュベートします。
ナビゲーションバー、ヘッダーデザインをWebページに適用する方法を学びます。
フォント、色、ボタンスタイルなどのデザイン要素を適用する方法を学びます。
ウェブサイトのデザインを統一的に保つ方法を実践します。
アニメーションと動的効果を適用する方法を学びます。
CSSアニメーションとトランジション効果を活用してユーザーエクスペリエンスを向上させます。
Webパフォーマンスを考慮した最適化技術を習得します。
コードの効率を高め、パフォーマンスを向上させる方法を学びます。
実戦プロジェクトを完成し、実務能力を強化します。
学習した内容に基づいて直接ウェブサイトを制作し、パブリッシング能力を育てます。
その後、デザインはデザイナーに任せ、完成したデザインを参照して実装することに集中してみてください。
本講義では、ピグマのコミュニティで無料デザインを活用します。
デザインファイルアドレス: https://www.figma.com/community/file/1383362001941293031
Webパブリッシングの基礎概念を理解する
Webパブリッシングは、デザインをHTML、CSSとして実装するプロセスです。 Web標準とアクセシビリティを考慮したコードの書き方を学び、デザインファイルを解釈し、マークアップ構造を設計する方法を学びます。また、メンテナンスが容易なコード作成法を身につけ、実務でも活用できるようにします。
Figmaで画像を保存して利用する方法
FigmaでWebパブリッシングに適した画像フォーマットを選択して保存する方法を学びます。 PNG、JPG、SVGなどの違いを理解し、解像度の最適化とWebパフォーマンスの改善方法を学びます。これにより、デザインをウェブサイトに自然に適用する技術を学びます。
HTML基本構造の作成
HTMLを活用してWebサイトの基本構造を作成する方法を学びます。セマンティックタグを使用してアクセシビリティを考慮し、メンテナンスしやすいマークアップを設計する原則を習得します。これにより、Web標準に準拠した効率的なコードの書き方を学びます。
ヘッダーとナビゲーションバーの実装
WebサイトのヘッダーとナビゲーションバーをHTMLとCSSを活用して実装する方法を学びます。ロゴ、メニュー、アイコンなどを適切に配置し、ユーザーが簡単にナビゲートできるように設計する原則を習得します。また、ナビゲーションバーのスタイルを適用し、さまざまなデバイスで一貫したデザインを維持する方法を学びます。
CSSスタイリングとレイアウト設定
CSSを活用してWebサイトのスタイルを設定し、レイアウトを構成する方法を学びます。 FlexboxとGridを使用してコンテンツを配置して配置する方法を学び、直感的なデザインを実装する方法を学びます。また、メンテナンスが容易なスタイル適用方法を身につけ、実務でも活用できるようにします。
フォント、色、背景画像の適用
ウェブサイトの読みやすさを向上させ、デザインを改善するために適切なフォント、色、背景画像を適用する方法を学びます。 Webフォントの使い方を習得し、背景画像を最適化してWebパフォーマンスを維持する技術を習得します。
ボタンとアニメーション効果を追加
ウェブサイトでユーザーエクスペリエンスを向上させるためにボタンスタイルを適用し、さまざまなアニメーション効果を追加する方法を学びます。 CSSを活用してボタンのホバーとクリック効果を実現し、トランジションとキーフレームアニメーションを適用して自然なインタラクションを作る技法を習得します。これにより、視覚的な完成度を高め、動的なWeb要素を効果的に活用する方法を学びます。
マウスホバーアニメーション
スクロールアニメーション、ナンバーアニメーション
各種スライドの実装
Webサイトで画像やコンテンツを動的に表示するスライドを実装する方法を学びます。 CSSとJavaScriptを活用して上海移動、左右自動スライドなどを適用する手法を習得し、UXを考慮したスライドデザインを設計する原則を学びます。
javascriptスライドの実装
flexのすべての属性の説明と実践例ファイルを提供します。
2回目と最終回目の講義で授業資料を確認してください。
flexのすべての属性の説明と実践例リンクを提供します。
受講生の方は、ニュース欄の紹介されているGoogleアンケートと1:1オープンチャットルームを通じて、いつでもコメントや質問をすることができます。
学習対象は
誰でしょう?
Figmaを活用したウェブパブリッシングを学びたい方
ウェブデザインをウェブサイトに変換する方法を学びたいデザイナー
実務でパブリッシングスキルを向上させたいウェブ開発者
HTML/CSSの基礎を固めた後、実践的なプロジェクトを求めている学習者
ポートフォリオサイトを制作しようとしている学生および就職活動生
2,711
受講生
58
受講レビュー
4
回答
4.9
講座評価
11
講座
■ [現在] ESTSOFT KDT フロントエンド講師
■ グリーンコンピュータアート学院 ウェブパブリッシング、フロントエンド講師
■ ウェブパブリッシングYouTubeチャンネル「Rock's Easyweb」運営
■ ザ・ジョウンコンピュータアカデミー ウェブパブリッシング講師
■ ハンビッコンピュータアカデミー ウェブパブリッシング講師
■ フロントエンドパブリッシャー、フロントエンドパブリッシング専門講師
■ UI/UXウェブデザインポートフォリオ講義
[ 書籍 ]
2021.07.19 刊行 / ウェブデザイン&ウェブパブリッシングのためのFigma完璧活用書 / BJ Public
2022.08.25 出版 / コーディングは初めて with ウェブパブリッシング / ヨンジン出版社
2023.10 出刊 /2024 SDエデュ ユ・ソンベ ウェブデザイン技能士 実技 家庭教師ノート / 時代考試企画
2024.11 重版 /2025 SDエデュ ユーソンベ ウェブデザイン技能士 実技 家庭教師ノート / 時代考試企画
2025.11 重版 /2026 SDエデュ ユ先生のウェブデザイン技能士実技家庭教師ノート / 時代考試企画
[ 受賞歴 ]
2022.08 グリーンコンピュータアート学院 鐘路支店 - 優秀講師 2021.06 グリーンコンピュータアート学院 鐘路支店 - 優秀講師 2018.06 グリーンコンピュータアカデミー 新村支店 - 優秀講師 2017.05 グリーンコンピュータアカデミー 新村支店 - 優秀講師 2016.05 グリーンコンピュータアカデミー 新村支店 - 優秀講師 2015.10 グリーンコンピュータアカデミー 新村支店 - 優秀講師
全体
23件 ∙ (7時間 29分)
講座資料(こうぎしりょう):
全体
1件
知識共有者の他の講座を見てみましょう!
同じ分野の他の講座を見てみましょう!
¥8,220

