ウェブデザイン開発技能士(デザイン+HTML)
dunopi
¥44,096
入門 / HTML/CSS, JavaScript, Web Design, Portfolio, AI, ChatGPT, Vibe Coding
クリックしながら学べる、簡単で楽しい授業です。ポートフォリオの方向性をご参考いただけます。
入門
HTML/CSS, JavaScript, Web Design
この講義を通じて ウェブデザイン技能士 A3, B4, C1, D3, E4, F3 の問題を display:flexで解く方法を学ぶことができます。 作業スピードが速いです。一時停止しながら見ましょう。
html, css, jquery
ウェブデザイン技能士
この講義はウェブデザイン技能士実技試験を準備する受験生と一緒に解いてみた映像です。
HTML、CSS、jQueryの3つの技術をすべて統合的に活用しなければならない課題です。
まずHTMLパートでは、文書の基本構造を設定する方法とともに、試験で頻出するタグ(例:header、nav、section、footerなど)の使い方を紹介します。特に実技では、<ul>リスト、<a>リンク、<img>画像挿入といった基本要素を正確に使用することが重要ですが、本講義ではこれらの要素をどのように正確に配置し、属性を付与するかを例を通じて一歩ずつ解説します。
続いてCSS領域では、外部スタイルシートを連携させ、多様なセレクタの使用方法やスタイル属性の設定方法を扱います。例えば、position、flex、margin、padding、text-align、font属性などの核心的なスタイル属性を、実際の例題を通して説明します。また、実技試験で頻繁に出題されるスタイル構成方式(上部メニュー、バナー、コンテンツボックス、フッターなど)の実装戦略も併せて扱い、CSSでどのようにデザイン案を具現化すべきかという感覚を養います。
最後にjQueryパートでは、試験で主に要求される動的機能の実装について説明します。jQueryは、HTML要素の表示/非表示(toggle)、フェード効果(show, hide)、タブメニュー、画像の変更、クラスの追加/削除など、簡単なインタラクションを素早く実装できるという利点があります。講義では、jQueryの基本文法から始まり、$(document).ready()を活用した基本構造の設定、ボタンクリック時のイベント処理、特定領域の動的制御など、実技試験ですぐに適用できるコードを併せて扱っています。
この動画は単なる説明にとどまらず、試験会場で求められる実戦感覚とコーディングの手順をリアルタイムで見せることに重点を置いています。初心者でも理解できるように親切かつ段階的に説明しており、コードを一行ずつ確認しながらどのような意図で作成されているかを解説しているため、学習効率が非常に高いです。実際の試験に似た例題も用意されており、復習用としても活用できます。
今回の講義を通じて、自信を持って試験に臨めるようサポートいたします。HTML構造の作成からCSSスタイリング、jQueryの動作実装まで、全体の流れを習得することができます。実技試験で高得点を目指すなら、ぜひ最後まで視聴してください!
学習対象は
誰でしょう?
display:flexで解決したい方
資格試験に合格したい方
前提知識、
必要でしょうか?
HTMLの基礎知識
CSSの基礎知識
jQueryの基礎知識
全体
19件 ∙ (8時間 30分)
講座資料:
2. A3レイアウト制作
07:06
3. A3ヘッダー制作
29:18
6. A3セクション
41:16
7. A3フッター
07:50
8. A3ポップアップ
10:50
10. B4タイプ解説動画
01:15:47
11. ずる賢い手段
16:04
知識共有者の他の講座はこちら
同じ分野の他の講座を見てみましょう!
新規会員登録で25%OFF
¥4,704
25%
¥6,274