inflearn logo
知識共有
inflearn logo

Flex 解法 - 2025 ウェブデザイン技能検定 (A3, B4, C1, D3, E4, F3)

この講義を通じて ウェブデザイン技能士 A3, B4, C1, D3, E4, F3 の問題を display:flexで解く方法を学ぶことができます。 作業スピードが速いです。一時停止しながら見ましょう。

5名 が受講中です。

難易度 初級

受講期間 無制限

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

受講後に得られること

  • 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の基礎知識

こんにちは
dunopiです。

476

受講生

6

受講レビュー

25

回答

4.7

講座評価

7

講座

ウェブデザイン技能士実技

全国平均合格率60%で

私たちのクラスは90%合格中ですよ〜ん!

カリキュラム

全体

19件 ∙ (8時間 30分)

講座資料:

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

受講レビュー

まだ十分な評価が集まっていない講座です。
ぜひ最初のレビューをお寄せください。

dunopiの他の講座

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

似ている講座

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

新規会員登録で25%OFF

¥4,704

25%

¥6,274