ウェブデザイン開発技能士(旧ウェブデザイン技能士)出題基準(2025.1.1～2027.12.31)まで施行される出題基準に正確に合わせたウェブデザイン技能士実技試験内容に最適化されている実技試験専門講義として、HTML+CSS+JQUERY パブリッシング、コーディングワークスのウェブデザイン開発技能士実技試験講義は違います。 2026年ウェブデザイン開発技能士すべての試験タイプ(A,B,C,D,E,Fタイプ)完璧制作授業映像がすべて反映されています。
学習した受講者のレビュー
5.0
헤일리
入念に教えてくれて助けてくれました！ただ、htmlを全く知らない生初歩が聞こえたらつきにくい部分もあると思います。
5.0
DDD
本当によく学んでいきます！ まず、最初に申し上げる部分は＆quot;独学するのが難しい＆quot;というテーマです！ どんな勉強をしてももちろん試してみることはできますが、ご存知のように難易度があればすぐ放棄することになります（あるいは先延ばしになったり） 私はこのX本を購入して試験を準備しましたが…手書きまでだけ本見て実技はそちらの映像もどこからコピーしてきたテキストを貼り付けながら説明するだけですね…本当に苦労しました。 でも、カカオトーク要塞が良くなっているから、オープントークルームのあちこちに行っているより率直によく教えてくれるところもなかったし…。 だから、彼の中で一人がこちら＆quot;コーディングワークス先生＆quot;をお勧めします！ 私はおかげで紹介文こんなことを見て基礎から固めてくれると言うのですぐにカール決済しました。 （実話です） それから1強からゆっくり見始めるのにファクトは理解が容易にならないでしょう… しかし、私は必ず取るべきだと思う一つだけ持って理論からずっと[順番どおり]講義を見てみるといつの間にか 直接映像に従わずに一人であらかじめ作っておいたんですね。 ちょうどこの時感じました。ああこれは今から始まります... Aタイプが一番簡単な方に属し、一番いろいろな観点から理解できるポイントが多いです！ つまり、他のものを作るときさえも応用しなければならないプロセッサを途中で把握を早くする人が簡単に学ぶのに 私が知らないことが多かったにもかかわらず、ただ髪型であり、出願問題に従いながら、なぜそんなにしかなかったのか。 3日目になると、A、B、Cのレイアウトを作ることに成功し、7日目になると、A、B、Cの完成本を自分で一人で何の手を取っても見て、ただ川のひとつ聞いたその経験だけで終わってしまいました。 以後、D、EタイプはCタイプだけ見て作れない人であれば無条件にするしかない段階で構成されており、おそらく今早急な方はCがきちんとできていないのでD、Eを越えていくのだそう考えることもできると思います！ 結局合格して高得点ではありませんが（ディテールダバリム）コーディングワークス先生の川の一つだけで1時間20分で試験場を切ってすぐに出ることができました。 （質問も本当に自分がイドゥザーもダメだったとき、そんなことだけ聞いてみた） ここまでが私の経験談です！ まとめます 1. あなたがコーディングワークス講義を決済しなければならない理由： 周りに目を洗って探しても1:1で教えてくれる人がいない。 2. 独学はいくらネームド本を買ってみても理解できず難しく、途中で無条件に放棄することになるだろう。 3. あちこちに良い講義を探してみると、このコメントを見るようになった時、1秒の迷わずにただ決済ボタンから押してください。 4. 多様な変数に対処可能な方法も多く、あなたが切実であれば、少なくとも7日、最大14日の内側には厳しく勉強して合格する確率が80％程度になると思う。 90％と思う 5.理解できず、ただ何かうまくいかない場合は、出題の問題その部分だけが自動的に入力されるまで練習してみよう。 6. 新規問題は試験場に頻繁に出てこないだけでなく講義で知らせるD、Eタイプも高品質のプロセッサである。 7. コンピュータはあなたよりスマートです。 できない時は自分を責めながら着実に練習しよう。 8. 合格を疑わないでください。購入押した瞬間からすべての選択での最大を味わえるだろう。
5.0
yemee
デザイナーのコーディングは完全にノーベースであり、YouTubeの講義をみんな探してみましたが、一つも理解できず、あきらめていた資格でした。筆記免除期限が今回の23年度第1四半期までと先延ばし、先延ばしがただの挑戦でもしてみようという心情で実技勉強を始めたが、本格的に覚えて一件願書受付後1～2ヶ月のようです。 本当なぜ先生の講義が後期が多いのか勉強しながら感じました。概念を本当に本当に簡単に説明してくれて、たわごとである私も概念を理解しながら問題を解決することができました。レイアウト＋１番問題 授業を聞いて解放してみたら？ 2番～4番はこのように変形すればいいんだが感が出て、そういえば難しい構文を大きく覚える必要がなかったようです。 勉強途中で就職になり、後半にはきつくできず、選択と集中で新タイプだけを練習しました。 D、Eから必ず出てくるという信仰一つで…幸いにもDタイプが出て、2時間ほど？で試験場を出ることができました。結果は91点に合格しました！思ったよりすごく高く受けて気持ちよかったですㅎㅎ 余談で、私は先生が教えてくださるコーディングが正解だと思って勉強しましたが、他の講義を見ると同じ結果を本当に本当に多様な方法で作ることができました。それを知ってからこそ、この講義が初心者の視線で見た、とてもよく作られた講義であることに気づきました。 このきっかけをはじめにコーディングを置かずに勉強し続けようと思います :-) 良い結果を得させていただきありがとうございます〜
HTML+CSS+JQUERY 核心理論
ウェブパブリッシング就職のための個人ポートフォリオウェブサイトを制作
ウェブサイト制作スキルとノウハウの向上
ウェブデザイン開発技能士実技試験に高得点で合格
ウェブデザイン開発技能士の公式ウェブサイトで新しくアップロードされた2026年基準の公開問題をダウンロードして、2024年の公開問題と比較してみました。試験内容で変わった点は一つもなく、変わった点は2つです。
第一に、実技試験時間を既存の4時間から3時間に調整して試験難易度を高めました。
第二に、資格種目名が既存の「ウェブデザイン技能士」から「ウェブデザイン開発技能士」に変わりました。
2026年試験に追加された事項はありません。万が一2026年の変更事項や追加事項があれば、できるだけ早くアップデートされ、追加費用は一切ありません。(2026年1月6日基準)
ありません。万が一2026年の変更事項や追加事項があれば、できるだけ早くアップデートされ、追加費用は一切ありません。(2026年1月6日基準)
2024年から追加されたF型4種類(F1,2,3,4)の制作動画がアップデートされました。F型だからといって新しい制作モジュールがあるわけではありません。ただ、レイアウトが1種類追加されたと考えていただければと思います。追加されたF型4種類のせいで実技試験の準備が大きな負担になることはないと思います。
ただし、レイアウトが1つ追加されただけだと思っていただければ大丈夫です。追加されたF類型4つのせいで実技試験の準備が大きく負担になることはないと思います。
2023年度まではAタイプ、Bタイプ、Cタイプ、Dタイプ、Eタイプそれぞれ4つずつ計20個でしたが、2024年1回目の試験からF類型4つが追加されました。そのため、計24種類の類型を勉強する必要があります。
主催側が2023年度に試験難易度を大幅に上げましたが、2024年度からは試験難易度をさらに上げました。
✅ 2024年に追加されたFタイプの授業動画は現在準備中です。
2024年1回実技試験が2024.03.16~2024.03.29なので、F類型を除いて現在ある内容を勉強すれば大丈夫です。A、B、C、D、E類型を十分によくできる状態であればF類型も全体レイアウトが少し異なるだけで、大きく違う部分はありません。ただし、全体レイアウト設計では1340ピクセルで中央揃えですが、スライドセクションだけブラウザ100%にしなければならないのが難しそうです。
※ Fタイプもスライド方式、タブメニュー、ナビゲーション、モーダルすべてA、B、C、D、Eタイプと同じです。
※ 2026年度公開問題PDFファイルは2025年と同一です。(セクション14でPDFダウンロード)
2026年度ウェブデザイン技能士資格試験情報： http://www.q-net.or.kr/crf005.do?id=crf00503&jmCd=7798
公開問題PDFファイルは2025年と同じです。(セクション14でPDFダウンロード) 2026年度ウェブデザイン技能士資格試験情報：http://www.q-net.or.kr/crf005.do?id=crf00503&jmCd=7798
（セクション14でPDFダウンロード）2026年度ウェブデザイン技能士資格試験情報：http://www.q-net.or.kr/crf005.do?id=crf00503&jmCd=7798 🚩2023年公開問題 vs 2026年公開問題
▼ F1 レイアウトおよびモジュール制作内容
▼ F2 レイアウト及びモジュール制作内容
▼ F3 レイアウト及びモジュール制作内容
▼ F4 レイアウト及びモジュール制作内容
モジュール制作内容 ▼ F4レイアウト及びモジュール制作内容 🌈F類型受講生実技試験後期(2024.3.30 / ティンガ様) 本日F3オープンバンキング(23番)類型試験を受けてきました!
学習に関する質問ではありませんが、先生の周りにF類型の試験を受けた方がいらっしゃらないので
情報が正確ではないことが記憶に残っていて、おせっかいに見えるかもしれませんが、他の受験生の方々と
先生のお役に立てればと思い、試験が終わってすぐに駆けつけて投稿を作成しています!
今週ずっと妙にF類型が気になっていたのですが、今日まさに試験に出ることを直感していたようですㅠㅠ
試験が終わってすぐに駆けつけて投稿を作成します！今週ずっと妙にF類型が気になっていたのですが、今日まさに試験に出ることを直感していたようですㅠㅠ
試験が終わってすぐに駆けつけて投稿を作成します！今週ずっと妙にF類型が気になっていたのですが、今日まさに試験に出ることを直感していたようですㅠㅠ
講義通りに
.slide の中に slide-image と slide-banner でまとめて勉強したのですが、
試験紙では私たちがslide-bannerと称した部分を指示事項では<ショートカット>と言い、content-inner内にあるshortcut部分を試験紙ではバナーと指示していました。ただコードをまとめる名前が違っただけですが、F類型を準備される方々があまり混乱しないようにという思いでコード名を変えて勉強するのはどうかなという考えになりました!私も途中で「ショートカット」指示事項を読みながら普段通りslide-bannerで作成していて混乱したので、そのまま指示事項が要求した名前でコード名も統一しました!
途中で「ショートカット」の指示事項を読みながら、いつものようにslide-bannerで作成していて混乱したので、そのまま指示事項で要求された名前でコード名も統一しました!
2. ピンク色のボックス部分を色付けした部分についてお話ししたいことがあるのですが〜
覚えていらっしゃるか分かりませんが..ㅠㅠ
私が24.03.27に F類型のslide-banner link部分に文字を入力する指示事項があるかもしれないと思って
質問を投稿したことがあります..!
不幸にもㅠㅠ 私の予想通り試験の指示事項に各アンカーごとにテキストを入れるという部分がありました。
提供されるテキストメモ帳に挿入するテキストがあったんですㅠㅠ
そして全体で入る画像はレイアウトと同じく5個でした。
ただし、テキストを画像のどこに入れるという特定の指示はなくて、
それで私は
spanでテキストを入力してギャラリー画像にspanを入れたのと全く同じように
display:block処理をして上下に入れて配列する方式で作りました。
イラストレーターやフォトショップで画像を作るのではなく、提供された画像を挿入しなければなりませんでした..!
配置をしてみたらスライド画像の上に突然写真を貼り付けたようになってしまったので、
私はバックグラウンドカラーを付けて透明度を調節してスライド画像とは別の部分であるアイコンのように見えるように
作りました。
3. そしてお知らせ部分ですが！右側に先生が???ㅠㅠと水色で書かれた部分、本当に空白でした！！ただ、お知らせ部分で「え？」と驚いた部分は、tab-innerの幅が広くない可能性があるので
お知らせ部分にem / bタグを利用して配置と省略記号を勉強して行ったのですが、
日付の入力がありませんでした！
なので楽にアンカーだけ入れてブロック処理して中央配置で飾りました。
I notice that the `
I don't see any text to translate between the `
私がミスした部分は、フッターメニューにボーダーボトムを付けなかったことと
メニューサブバックのwidth サイズをヘッダーサイズにしてしまったことの2つなんですが、(A類型のsub-backのように作ってしまいました ㅠ)
他は全部ちゃんと動作して、自分でもあ、この程度なら大丈夫という気持ちでしっかり解いてきました!! ㅠㅠ
このままその2つの問題で落ちたら本当に本当に恥ずかしくて情けないと思いますが..ㅠㅠㅠㅠ
それでも自分で多くの構造を把握して作れることがとても誇らしいです。
そしてF類型がやはり見たことのない類型だからなのか..
今日私が行った試験会場で12名が受験しましたが、6名が途中放棄して出て行かれました..
私はすべての確認を終えて提出するまで2時間20分ほどかかりましたが、
その時間まで私を含めて提出した人は3名で、私が教室を出るまで3名が残っていました。
4月9日が合格発表日ですが、どうか受かっていればいいですㅠㅠ
先生、対面授業ではなくオンライン授業でしたが、本当に多くのことを学びましたㅠㅠ
ありがとうございますㅠㅠ!
合格発表を待っています🙏
jQueryスライド制作動画がアップデートされました。2023年からDタイプ、Eタイプが追加され、実技試験の難易度が上がったため、スライド制作方式をより簡単で楽に制作する必要があります。そのため、既存のjQuery方式の動画を新しい動画で制作しました。
既存のCSSスライダーで制作すると、多少減点要素がある可能性があります。CSSスライダーの講義はありますが、jQueryを使用してスライダーを制作することをお勧めします。(実際には2つの方法のうち楽な方で学習して試験を受けても、合格には全く支障ありません。)
CSSスライドの場合、スライド1、2、3の次に再びスライド1に戻って1、2、3に進む部分が少し不自然ですが、jQueryスライドはスライド1、2、3の後、再び自然にスライド1、2、3と表示されます。つまり、CSSスライドよりもより完璧なスライド制作が可能です。
jQueryコードをご覧になると短くてとても簡単で理解しやすいと思います。
※ jQueryコードは6行ですが、実際に動作するコードは3行です。
▼ jQuery方式のスライド制作動画とダウンロードファイルは下記でご覧いただき、ダウンロードできます
2023年からウェブデザイン技能士実技試験に新たに追加されたD、E類型制作講義のアップデートが完了しました。追加された映像は7時間近い分量です。D、E類型制作の難易度も上がり、学習量が多くなりましたので、事前に準備して学習されることをお勧めします。
2023年に新しく追加されたDタイプとEタイプ制作講義のアップデートが完了しました。DタイプとEタイプ制作講義はセクション09にあります。制作映像にもありますが、必ずA、B、Cタイプをすべて完了した後、DタイプとEタイプ制作講義を学習してください。
完了後、DタイプとEタイプ制作講義を学習する必要があります。2024年ウェブデザイン技能士実技試験新しく追加されたDタイプとEタイプ制作講義アップデート紹介動画
▼ D1 レイアウト及びモジュール制作内容
▼ 2023年に新しく追加されたDタイプ(D1)最終版プレビュー
▼ D2 レイアウト及びモジュール制作内容
▼ 2023年に新しく追加されたDタイプ(D2)最終版プレビュー
▼ D3 レイアウト及びモジュール制作内容
▼ 2023年に新しく追加されたDタイプ(D3)最終版プレビュー
▼ D4レイアウト及びモジュール制作内容
▼ 2023年に新しく追加されたDタイプ(D4)最終版プレビュー
▼ 2023年に新しく追加されたDタイプ(D4)最終版プレビュー
▼ E1 レイアウト及びモジュール制作内容
▼ 2023年に新しく追加されたEタイプ(E1)最終版プレビュー
2023年に新しく追加されたEタイプ(E1)最終版プレビュー
▼ E2レイアウト及びモジュール制作内容
▼ 2023年に新しく追加されたEタイプ(E2)最終版プレビュー
2023年に新しく追加されたEタイプ(E2)最終版プレビュー
▼ E3レイアウトおよびモジュール制作内容
▼ 2023年に新しく追加されたEタイプ(E3)最終版プレビュー
▼ E2レイアウト及びモジュール制作内容 ▼ 2023年に新しく追加されたEタイプ(E2)最終版プレビュー ▼ E3レイアウト及びモジュール制作内容 ▼ 2023年に新しく追加されたEタイプ(E3)最終版プレビュー
▼ E4レイアウト及びモジュール制作内容
▼ 2023年に新しく追加されたEタイプ(E4)最終版プレビュー
2026年ウェブデザイン開発技能士実技を準備される方は必ず！参考にしてください。[追加事項] 2024年度1回目からFタイプ4種類がさらに追加されました。(全24個タイプ) 2026
- Webデザイン開発技能士実技試験、決して簡単な試験ではありません!!
- Webデザイン開発技能士資格証高得点合格!簡単で簡潔なコードが保証します。
- Webデザイン開発技能士資格証を取得してWebデザイナー就職後、年俸もアップさせましょう~!!
現行のウェブデザイン技能士出題基準適用期間は2025.1.1～2027.12.31まで有効です。
本講義は現行出題基準に完璧に合わせた実技試験講義として制作されました。
2026年度ウェブデザイン開発技能士資格試験情報: http://www.q-net.or.kr/crf005.do?id=crf00503&jmCd=7798
2021年3回目の実技試験からビジュアルスタジオコード(Visual Studio Code)テキストエディターのみ使用可能となりました。既存のテキストエディターとしてインストールされていたBracketsとDreamweaverは、Q-Net公式サイトの案内によると2022年からは使用不可となります。したがって結論としては、Notepad++またはVisual Studio Codeのうち1つを使用して試験準備をすれば良いです。もちろんEditPlusとBracketsを使うことはないので、Visual Studio Codeを使用して実技試験の勉強をすれば良いです。
https://www.q-net.or.kr/cst006.do?id=cst00602&gSite=Q&brdId=Q006&code=1204&artlSeq=5199079
上記の案内事項にあるように「プラグイン(別途応用、追加機能)はインストールできません。」となっています。意味はVisual Studio Codeの拡張機能がインストールされていないため、Visual Studio Codeプログラムの基本機能で実技試験を受けなければならないということです。ですので、Visual Studio Codeをインストールし、別途拡張機能をインストールせずに勉強してください。実技試験会場と同じ環境で試験準備をする必要があります。下の図にあるVisual Studio Codeの講義4つのうち、赤い枠の2つだけ学習してください。もちろん実務のためのVisual Studio Codeの学習であれば、4つすべて学習する必要があります。
該当講座にあるVisual Studio Codeの使い方の中で、ウェブデザイン技能士実技試験のために赤い枠の2つの映像だけ学習すれば大丈夫です。(実技試験場にはエクステンションがインストールされていません。)
自動保存はエクステンション機能ではなくVisual Studio Code自体の機能なので、自動保存する詳しい方法はコーディングワークスInflearnブログでご確認ください。https://inf.run/RPaoi
1) 2022年からウェブデザイン技能士実技試験の技術的遵守事項でEdgeとChromeでクロスブラウジングチェックを行います。以前のIE(Internet Explorer)は公式に除外されました。 👍
2) floatで横配置する既存方式を十分に学習した後、Flex配置を学習(Flex配置は必須ではありません)
FloatとPosition配置を知らない状態でFlex配置の学習は控えるべきです。
3) 使用する場合、Flex配置は全体レイアウトにのみ使用することを推奨(細かい配置にFlexの使用は控える)
選択1) Flex配置(全体レイアウト) + Float、Position(レイヤーポップアップ、ナビゲーション、お知らせ)
選択2) Float、Position(全体レイアウト、レイヤーポップアップ、ナビゲーション、お知らせ)
※ フレックス(Flex)でレイアウト全体を制作する際は、Floatで配置する既存の方式を十分に学習した後、最終版の制作で活用することをお勧めします。
全体レイアウトをFlexで制作する際は、Floatで配置する既存の方式を十分に学習した後、最終版の制作で活用することをお勧めします。
コーディングワークスパブリッシングYouTubeチャンネルで理論映像講義と並行してください。もちろん、すべての理論映像がYouTubeチャンネルにあるわけではありませんが、重要な理論映像はほとんどあります。映像が多いので、映像を探す方法は以下の例のように検索するのが良いです。
コーディングワークス パブリッシング YouTubeチャンネル: https://www.youtube.com/codingworks
検索するのが良いです。コーディングワークス パブリッシング YouTubeチャンネル：https://www.youtube.com/codingworks
▲ インフラーンのコーディングワークス ウェブデザイン技能士実技講座受講生の合格後記です。やりがいがありますね~^^
コーディングワークス パブリッシング YouTubeチャンネル：https://www.youtube.com/codingworks ▲ Inflearnのコーディングワークス ウェブデザイン技能士実技講座の受講生合格後記です。やりがいがありますね~^^
こんにちは!久しぶりに質問文を作成することになりました!結論から申し上げますと、89点で合格したと今日連絡を受け、手帳型資格証の申請を済ませた状態です :)
実は他の仕事と並行していたため、勉強をきちんとできず、急いで1ヶ月間詰め込み勉強をしたのですが...現在ウェブデザイン技能士を準備されている方々に、私がやった方法が少しでも役に立てばと思い、長く書くことになりました。
1ヶ月詰め込み勉強という言葉に不思議に思われるかもしれないので、先に申し上げますと、私は映像、広告、デザイン系列を専攻していて、去年の夏にウェブデザインをするために勉強して筆記試験を取得し、実技準備より(デザイン系列で)就職を先にしてしまったため、遅く取得したケースです ^-^;;
以前に勉強したことがあったため、1ヶ月詰め込み勉強が可能でしたㅜㅜ
私が勉強した方法についてお話しすると、私は講義を見ながら真似する方法ではなく、
自分が持っている情報で直接作ってみて、講義を見ながら先生がどのようにするのかを見て学ぶ方式で勉強しました。
具体的な例を挙げると、
Aタイプのレイアウトを学んだらBタイプは自分で作ってみて、ワイヤーフレーム理論を学んだら、その理論だけを持って私が直接先に作りました。すぐに勉強する時は時間がかかりますが、覚える速度も速く、このように一度でも自分で作ってみると2〜3回目くらいには一人で作れるようになりました。
また、動画の途中途中で先生がおっしゃったように、先生は以前作ったものをコピーして貼り付けても、私は毎回一つ一つ直接打ち込んで枠組みを作ったことも大きかったと思います。
もしかしたら当然の勉強方法かもしれませんが、時間はかなりかかりますし、私が先に作ってみるので最初はうまくいかないことが出てきますが、その時になぜだろう?と考えるようになり、先生の講義を聞きながらなぜできなかったのかを知ることができる部分が勉強になると大きく思います。
少しでも参考になればという思いで長く書いてしまいました。ありがとうございます :)
おかげで試験うまく受けてきました!
作成者:f1rstf1y9 / 2021.12.05 午後10:28
受講後記は合格後に書こうと思うので、まずコミュニティに感謝の挨拶を投稿します!
実は私はこの関連専攻の大学生なので、html、cssに関する講義を専攻授業だけで二回は受けました。専攻授業では耳にもよく入ってこない講義内容にひたすら試験のために丸暗記して試験が終わったら忘れてしまい、ウェブデザイン技能士実技を準備する時も何をどう準備すればいいのか分からないほど基礎知識がかなり不足している状態でしたが、コーディングワークスさんの講義を聞いて今になってやっとまともな授業を受けたという気がします。今日試験は終わりましたが、この講義を通じて学んだ内容は私の記憶の中に長く残りそうです。
試験申し込み後、YouTube講義で独学していたのですが、専攻講義を聞いていた時のようにどうしても頭に入ってこなくて迷っていたところ、この講義を見つけました。無料講義を聞いてからこちらを見たので、試験まで1ヶ月程度しか残っていない時点でこの講義にお金を投資するのが正しいのか悩んだりもしたんです。悩む必要もなかったみたいですね(笑)
個人的な試験後記も、もしかしたら他の方がご覧になるかと思い残しておきますと、私は講義を聞く前からビジュアルスタジオをよく使っていたので、ずっとビジュアルスタジオコードで勉強し、ブラケット関連の講義はパスしていました。試験会場もわざわざvscodeがあるところで申し込みました。ところが今日試験会場に行ってみるとブラケットしかなくて...最初は慌てましたが、ショートカットキーも講義で習った通りでしたし、何より講義内容がブラケットだったので、むしろ馴染みのあるインターフェースで難なく適応し、無事に試験を受けることができました!試験はJUSTショッピングモールで出題され、最終版制作講義にもあった類型だったので、ほとんど詰まることなくコードを作成し、何度も点検した後、最初の順番で提出しました!この講義でなければ、私も何人かの方のように途中で出なければならなかったかも....ㅠㅠ本当にコディングワークスさんの講義を聞いて良かったですㅎㅎ
良い講義ありがとうございます。合格結果が出たら受講後記を書きますね:)
------------------------------------------------------------------------------------
合格しました!
合格しました！コーディングワークスのウェブデザイン技能士実技試験講座は違います。最高だと自負しています！
総30時間、総112個の講義と18個の核心資料で実技試験合格を自負するオーダーメイド講義
全27個のHTML+CSS+JQUERY核心理論講義
実技試験制作モジュール完全分析講義(レイアウト、スライド、ナビゲーション、タブメニュー、レイヤーポップアップ)
ウェブデザイン技能士実技試験合格の最大の難関!スライド制作
コーディングワークスの講義はjQuery制作だけでなく、純粋なCSSでスライドを完璧に実装
学生の性向に応じてjQueryスライドまたはCSSスライド制作方式を選択可能
CSSスライドアニメーション(横スライド、縦スライド、クロスフェードスライド)
jQueryスライドアニメーション(横スライド、縦スライド、クロスフェードスライド)
すべての制作モジュールが含まれた実技試験最終版3つの制作映像
ウェブデザイン技能士実技試験のための必須のPhotoshop CS6使用法及びイメージ制作映像
HTML+CSS理論教材だけでなく、すべての制作モジュールと最終版3種類の制作ファイルをダウンロード
コーディングワークスの講義は合格の可否ではなく、どれだけ高得点で合格するかのための本物の講義
実技試験当日の試験会場の雰囲気、手順、コツ、提出方法、資格証申請方法など詳細な映像まで
- ウェブデザイン技能士資格証実技試験の合格を希望する方
- ウェブサイトの維持管理・修正補完を自主的に行いたい方
- ウェブデザインからウェブパブリッシャーに職業を転換したり、HTML+CSS+JQUERYパブリッシングを強化したい方
- ウェブパブリッシングに対する理解度を高めたいウェブ企画者
- フロントエンドパブリッシングに対する理解度を高めたい開発者
- ウェブデザイン技能士実技試験に高得点で合格できます。
- HTML+CSS+JQUERY パブリッシングスキルを体系的に向上させることができます。
- ウェブサイト制作のノウハウを向上させることができます。
- Webパブリッシング就職のための個人ポートフォリオWebサイトを制作できます。
- 基本的なコンピュータ活用能力とインターネットブラウザの使用能力
- コーディング(Coding)のための基本的な英語タイピング能力
- 2024年出題基準に最適化された講義内容(12種類のタイプを完璧に分析及び適用)
- 簡単で簡潔なコードが高得点合格と安定的な合格を保証
- 実務にすぐ使える実力を育てる体系的な講座
- 合計30時間を超える充実した講義内容
- 現場で学生を直接教えている実力ある講師が進行する特別な講義
- HTML+CSS+JQUERY理論学習書PDF教材ファイル提供
- 実務ウェブパブリッシャー兼有名学院でオフライン講義を進行する講師
- 良い講義のために直接教えた経験とノウハウが十分な講師
- 数年間ウェブデザイン技能士資格証実技試験対策クラスを進行した講師として特別な合格ノウハウを伝授
- ウェブ技能士資格証実技試験に備える学生のレベルと何が必要なのかをとてもよく知っている講師
- 入門者と初級者が理解しやすいコードで現実的かつ効率的な学習方法を提示する講師
▲ 受講生に無料で提供されるコーディングワークスパブリッシングPDF教材の詳細
📚コーディングワークス出版ブログ - https://inf.run/dMRVK ▲受講生に無料で提供されるコーディングワークス出版PDF教材の詳細を見る
▼ 横スライド
▼ 縦スライド
▼ クロスフェードスライド
スライドモジュール制作プレビュー
モジュール制作プレビュー - ナビゲーション5種類
▼ ナビゲーション左側個別に下に落ちるサブメニュー
▼ ナビゲーション左側 個別に右側に落ちるサブメニュー
▼ ナビゲーション上段 個別に下に落ちるサブメニュー
▼ ナビゲーション上部 すべてのサブメニューが下に展開するメガメニュー
▼ ナビゲーション上段 すべてのサブメニューが背景と共に下に落ちるメガメニュー
サブメニュー ▼ ナビゲーション上段 すべてのサブメニューが下に落ちるメガメニュー ▼ ナビゲーション上段 すべてのサブメニューが背景と共に下に落ちるメガメニュー
すべてのサブメニューが下に落ちるメガメニュー ▼ ナビゲーション上段 すべてのサブメニューが背景と共に下に落ちるメガメニュー 📝 最終版制作 プレビュー
▼ 横幅固定型 最終版
▼ 横幅100% 完成版
▼ 縦2カラム最終版
ただし、すべてのサブメニューが背景と共に下に落ちるメガメニュー 📝 最終版制作 プレビュー ▼ 横固定型最終版 ▼ 横100%最終版 ▼ 縦2カラム最終版
試験会場ではインターネットを使用できません。
そのためライブサーバーエクステンションをインストールできません。
Visual Studio Codeでコーディングする場合は、保存してブラウザで更新して確認する必要があります。
試験会場に行かれたら、下記の内容を簡単に設定してから試験を受ければ大丈夫です。
下記のコーディングワークスブログの内容を参考にしてください。
で更新して確認する必要があります。試験会場に行かれたら、下にあるものを簡単に設定して試験を受ければ大丈夫です。下記のコーディングワークスブログの内容を参考にしてください。
[必読] Webデザイン技能士実技試験を受ける際のVisual Studio Codeの設定必読事項https://inf.run/MpGqe
ください。下記のコーディングワークスブログの内容を参考にしてください。[必読] ウェブデザイン技能士実技試験を受ける際のVisual Studio Codeセッティング必読事項https://inf.run/MpGqe
Q. PDF教材でjQueryパートの内容が少ないのですが?
A) jQueryは特性上、内容があまりにも膨大であるため、PDF教材にすべての内容を盛り込むには無理があり、基本的な使い方と必須関数、イベント、メソッドの使い方に関する内容があります。そしてパブリッシング入門者・初心者には何よりもCSSとFLEXが重要であるため、PDF教材の90%に該当する170ページが割り当てられています。
Q. コーディングワークスのパブリッシング核心理論PDF教材は、市販の教材と何が違いますか?
A. 今すぐ知らなくても良い内容、重要度が低い内容は省き、必ず必要な核心だけを盛り込みました。コーディングワークスの教材は、数年間オフライン学院で使用した教材をさらに補強して作成したPDF教材です。特に市販教材にはないコーディングワークスの講義ティップ(Tip)が多く含まれています。
Q. ダウンロードコンテンツの容量はどのくらいですか?
A) ダウンロードするコンテンツの総容量は42メガです。PDF理論教材は見やすいように5つに分けてアップロードされています。個別にダウンロードしてください。そして実習例題ファイルは解凍するとフォルダできれいに整理されています。
Q. 印刷して見ることもあるのですが、PDF教材は高画質ですか?
A) PDFファイルは300dpiの高画質で制作されているため、印刷しても綺麗にプリントすることができます。
Q. ダウンロードしたコンテンツの使用用途はどうなりますか?
A) ダウンロードされたすべてのコンテンツは、コーディングワークスで自主制作したファイルです。コーディングワークスのPDF教材は、受講申請されたご本人の個人学習用途以外に、いかなる目的でも使用または他人に配布してはなりません。また、PDFファイルのコーディングワークスを表示する部分を編集して講義用資料として使用することもできません。
学習中に疑問点がございましたら、ご質問ください。ご質問の際は、うまくいかない内容とコード、そしてブラウザの結果画面のキャプチャをアップロードしていただく必要があります。コードの場合、HTML、CSS、JSコードをコピーしてすべてアップロードしていただかないと、正確な回答を差し上げることができません。
ブラウザの結果画面はキャプチャで、コードはコピーしてアップロードしていただかないと正確な回答ができません。
面接と就職を呼ぶパブリッシャー個人ポートフォリオホームページ制作、scss、sass、flex、grid、html、css、html/css、website、ウェブパブリッシャー、パブリッシャー就職、ウェブサイト、コーディング、coding、jquery、javascript、ジェイクエリ、ジャバスクリプト、レイアウト、インタラクティブウェブ、interactive web、web design、ウェブデザイン、ポートフォリオ、パブリッシング、レスポンシブウェブ、ウェブデザイン技能士実技試験、bootstrap、ブートストラップ、css frameworks、フレームワーク
学習対象は
誰でしょう？
ウェブコーディングを初めて始める方
ウェブサイトのメンテナンスや修正・補完を自分で行いたい方
ウェブデザインからウェブパブリッシャーに職種転換したい方、またはHTML+CSS+JQUERYパブリッシングを強化したい方
Webパブリッシングに対する理解度を高めたいWeb企画者
フロントエンドパブリッシングに対する理解度を高めたい開発者
ウェブデザイン開発技能士資格証実技試験の合格を望む方
前提知識、
必要でしょうか？
基本的なコンピュータ活用能力とインターネットブラウザ使用能力
コーディング(Coding)のための基本的な英語タイピング能力
12,924
受講生
771
受講レビュー
2,116
回答
4.9
講座評価
23
講座
■ [現在] 国費パブリッシング＆フロントエンド講師
■ [現在] フリーランス フロントエンドパブリッシャー
■ [現在] HTML+CSS+JQUERY パブリッシング YouTubeチャンネル「コーディングワークス」運営
■ グリーンコンピュータアカデミー ウェブパブリッシング講師
■ ザ・ジョウンコンピュータアカデミー ウェブパブリッシング講師
■ イゼンコンピュータアカデミー ウェブパブリッシング講師
■ フロントエンドパブリッシャー、フロントエンドパブリッシング専門講師
■ UI/UX ウェブデザインポートフォリオ講義
■ ウェブデザイン技能士実技資格クラス講義
■ イージー＆エデュ フロントエンド UI/UX デザインおよびパブリッシング
🌏コーディングワークス Inflearn 講義一覧 - https://www.inflearn.com/users/@codingworks
🌏Inflearn コーディングワークス 講義学習順序（学習ロードマップ） - https://www.inflearn.com/blogs/2351
🌏コーディングワークス Inflearn パブリッシングブログ - https://www.inflearn.com/users/@codingworks/blogs
🌏コーディングワークス パブリッシング YouTube チャンネル - https://www.youtube.com/codingworks
🟣Inflearn In-focus コーディングワークス インタビューを見る : https://www.inflearn.com/pages/infocus-8-20230704
全体
146件 ∙ (37時間 46分)
講座資料（こうぎしりょう）:
全体
101件
4.9
101件の受講レビュー
受講レビュー 1
∙
平均評価 5.0
5
入念に教えてくれて助けてくれました！ただ、htmlを全く知らない生初歩が聞こえたらつきにくい部分もあると思います。
コーディングワークスです。まず、受講評価ありがとうございます〜 HTML理論映像が多ければ学習序盤部分が長すぎるようでHTML理論部分を簡素化したのですが、この点が憎まれましたね。不足していると思われるHTML理論部分は私のYouTubeチャンネルに長く細かくなっている映像がたくさんあるので、その映像を参考にしてください。 コーディングワークスオンライン講義が役に立っているのは嬉しいです〜^^ Webデザイン機能士実技試験に高得点で合格することを祈ります。
受講レビュー 1
∙
平均評価 5.0
5
本当によく学んでいきます！ まず、最初に申し上げる部分は＆quot;独学するのが難しい＆quot;というテーマです！ どんな勉強をしてももちろん試してみることはできますが、ご存知のように難易度があればすぐ放棄することになります（あるいは先延ばしになったり） 私はこのX本を購入して試験を準備しましたが…手書きまでだけ本見て実技はそちらの映像もどこからコピーしてきたテキストを貼り付けながら説明するだけですね…本当に苦労しました。 でも、カカオトーク要塞が良くなっているから、オープントークルームのあちこちに行っているより率直によく教えてくれるところもなかったし…。 だから、彼の中で一人がこちら＆quot;コーディングワークス先生＆quot;をお勧めします！ 私はおかげで紹介文こんなことを見て基礎から固めてくれると言うのですぐにカール決済しました。 （実話です） それから1強からゆっくり見始めるのにファクトは理解が容易にならないでしょう… しかし、私は必ず取るべきだと思う一つだけ持って理論からずっと[順番どおり]講義を見てみるといつの間にか 直接映像に従わずに一人であらかじめ作っておいたんですね。 ちょうどこの時感じました。ああこれは今から始まります... Aタイプが一番簡単な方に属し、一番いろいろな観点から理解できるポイントが多いです！ つまり、他のものを作るときさえも応用しなければならないプロセッサを途中で把握を早くする人が簡単に学ぶのに 私が知らないことが多かったにもかかわらず、ただ髪型であり、出願問題に従いながら、なぜそんなにしかなかったのか。 3日目になると、A、B、Cのレイアウトを作ることに成功し、7日目になると、A、B、Cの完成本を自分で一人で何の手を取っても見て、ただ川のひとつ聞いたその経験だけで終わってしまいました。 以後、D、EタイプはCタイプだけ見て作れない人であれば無条件にするしかない段階で構成されており、おそらく今早急な方はCがきちんとできていないのでD、Eを越えていくのだそう考えることもできると思います！ 結局合格して高得点ではありませんが（ディテールダバリム）コーディングワークス先生の川の一つだけで1時間20分で試験場を切ってすぐに出ることができました。 （質問も本当に自分がイドゥザーもダメだったとき、そんなことだけ聞いてみた） ここまでが私の経験談です！ まとめます 1. あなたがコーディングワークス講義を決済しなければならない理由： 周りに目を洗って探しても1:1で教えてくれる人がいない。 2. 独学はいくらネームド本を買ってみても理解できず難しく、途中で無条件に放棄することになるだろう。 3. あちこちに良い講義を探してみると、このコメントを見るようになった時、1秒の迷わずにただ決済ボタンから押してください。 4. 多様な変数に対処可能な方法も多く、あなたが切実であれば、少なくとも7日、最大14日の内側には厳しく勉強して合格する確率が80％程度になると思う。 90％と思う 5.理解できず、ただ何かうまくいかない場合は、出題の問題その部分だけが自動的に入力されるまで練習してみよう。 6. 新規問題は試験場に頻繁に出てこないだけでなく講義で知らせるD、Eタイプも高品質のプロセッサである。 7. コンピュータはあなたよりスマートです。 できない時は自分を責めながら着実に練習しよう。 8. 合格を疑わないでください。購入押した瞬間からすべての選択での最大を味わえるだろう。
長くて具体的な受講評ありがとうございました〜！
受講レビュー 1
∙
平均評価 5.0
5
デザイナーのコーディングは完全にノーベースであり、YouTubeの講義をみんな探してみましたが、一つも理解できず、あきらめていた資格でした。筆記免除期限が今回の23年度第1四半期までと先延ばし、先延ばしがただの挑戦でもしてみようという心情で実技勉強を始めたが、本格的に覚えて一件願書受付後1～2ヶ月のようです。 本当なぜ先生の講義が後期が多いのか勉強しながら感じました。概念を本当に本当に簡単に説明してくれて、たわごとである私も概念を理解しながら問題を解決することができました。レイアウト＋１番問題 授業を聞いて解放してみたら？ 2番～4番はこのように変形すればいいんだが感が出て、そういえば難しい構文を大きく覚える必要がなかったようです。 勉強途中で就職になり、後半にはきつくできず、選択と集中で新タイプだけを練習しました。 D、Eから必ず出てくるという信仰一つで…幸いにもDタイプが出て、2時間ほど？で試験場を出ることができました。結果は91点に合格しました！思ったよりすごく高く受けて気持ちよかったですㅎㅎ 余談で、私は先生が教えてくださるコーディングが正解だと思って勉強しましたが、他の講義を見ると同じ結果を本当に本当に多様な方法で作ることができました。それを知ってからこそ、この講義が初心者の視線で見た、とてもよく作られた講義であることに気づきました。 このきっかけをはじめにコーディングを置かずに勉強し続けようと思います :-) 良い結果を得させていただきありがとうございます〜
受講評 ありがとうございます。短い期間でしたが、高得点で合格しましたね。おめでとうございます〜！
受講レビュー 2
∙
平均評価 5.0
5
1. 講義内容が簡単。 2.マークアップがきれいです。毎回意味のない幅、高さの繰り返し ない。尋ねないでください。 人を聞くことができてよかった。 3.例として使用するワイヤフレーム自体が洗練された。 4.画像スライドをCSSだけで作成するなどの新しい方法が学べてよかった。 5. 質問ができてよかった。
受講評が長くないけどこんなに具体的でわかりやすく書いてくださった方は初めてのようです。
受講レビュー 1
∙
平均評価 5.0
5
こんにちは！本日3回目の実機試験結果が出ましたが、92点に合格し、ふたたび受講平に来ました！一度講師、良い講義に感謝します。質問も本当に早く答えてくださり、講義内容も非専攻者が勉強することに基礎からじっくり説明していただいてよかったです。 （特に私は講師様が載せたYouTube講義と並行して聞いたのですが、理解が早かったです。） 早い時間で理解できるのに特化した授業だと思います。受講料が全く惜しくない授業でした！ありがとうございます。試してみると、1時間40分でクリアして1等で威風堂々と出てきました。ありがとうございました:) 他の講義もまた来るよ！
seohyeonさん、ありがとうございます。そして心から高得点合格おめでとうございます。 私も試してみると2時間にクリアしましたが、1時間40分でクリアしていたらすごいですね。講義の助けもあったのですが、本人が一生懸命やった結果だと思います～！
￥20,396
知識共有者の他の講座を見てみましょう！
同じ分野の他の講座を見てみましょう！
![ウェブデザイン開発技能士 [2025年] 実技全体 (カカオトーク質問可能)강의 썸네일](https://cdn.inflearn.com/public/courses/332868/cover/3a2245ca-bb9f-414a-ba67-403cfcb2b7c9/332868.jpg?f=avif&w=420)
![[ウェブ開発入門] 一人でも開発するHTMLとCSS with ニンジンマーケット강의 썸네일](https://cdn.inflearn.com/public/courses/329537/cover/e58304bd-ac81-4ec4-88c8-479cde58188a/329537-eng.png?f=avif&w=420)
![[JavaScriptからReactまで] 諦めないReactへの道 [Full vers.]강의 썸네일](https://cdn.inflearn.com/public/courses/334889/cover/00422504-ab9c-46e3-9abd-8bcf0bb9ec7a/334889.jpg?f=avif&w=420)
![スプリングフレームワークは私の手に[スープ2弾]강의 썸네일](https://cdn.inflearn.com/public/courses/329630/cover/e05f1532-5d1d-440e-be03-c21c42cd5566/329630-eng.png?f=avif&w=420)
