ウェブデザイン技能検定　2級合格 解説・振り返り

2025.09.27



自身について

大学は情報系学科。応用情報取得済み。
ただ、html、css、phpについてはほとんど触れたことがなかった。
なんとなく資格を取りたいと思っていて、せっかくなら技術系のものにしようということで、本資格を選択。

申し込み

2級の受験資格として「大学を卒業した者(関連科目受講)」を選択。
受験資格については申し込み後、メールで確認される。

申し込み時は情報系の学科だし多分関連科目受講済みだろう、くらいの認識だったので、申し込み画面の選択欄に3級用の受験資格(ウェブの作成や運営〜従事しようとしている者)が存在するのを見て、「あれ？これで良いならこれにしよう」と選択したところ、2級ではダメですとメールにて指摘される。

メールにて回答が必要な内容は以下。

①以下のどの受験資格に該当するか

  • 「２－１　２年以上の実務経験を有する者」
  • 「２－２　職業高校、短大、高専、高校専攻科、専修学校、各種学校卒業又は普通職業訓練修了した者」（※3：学校卒業、訓練修了については、卒業あるいは修了した該当科に協会が定めたウェブの作成や運営に関する科目等が含まれると協会が認めたものに限る。）
  • 「２－３　大学を卒業した者」
  • 「２－４　高度職業訓練を終了した者」
  • 「２－５　３級の技能検定に合格した者」

②受験資格の詳細

  • 「２－１」の場合
    ・企業に就職していた場合は、その企業名と役職・主な業務・在職期間等
    ・フリーランスの場合は、主な業務経歴
  • 「２－２」「２－３」の場合
    ・学校名、卒業年度およびコースや取得科目など
  • 「２－４」の場合
    ・学校名、専攻科目、修了年度
  • 「２－５」の場合
    ・３級技能士番号　

勉強期間

1ヶ月ほど。

勉強方法

https://note.com/spitchi_k/n/n409e5ff22e89
こちらの内容が本当に有益だった。感謝。

私が実際に勉強に利用したものは以下。

公式ガイドブック　1周

勉強に着手するにあたり、こちらの内容を最初に読んだのだが、個人的には全く役に立たなかった。資格取得にあたり、体系的な技術的知識を得られると嬉しいと思っていたのだが、htmlのバージョンアップによる違いや、知識0のところにいきなりそれだけ言われても何もわからん……(cssのセレクタ、擬似クラス等)という内容が多かった。3級版には記載があるのかもしれないが、私は2級からいきなり受験なのでわからず。
技術面以外の内容は1回読んでおくべき。

このテキストには後述する学科のネットチャレンジと実技練習用の問題ファイルが付属するため、そちらが本体。

本記事を書くにあたり再確認して、ようやく「学科の内容結構ここに書いてあったんだ！」と気づいたが、ネットチャレンジや過去問で覚えたのでさして見返す必要もなかった。時間に余裕あるなら技術面はもう一周しても良いかも。

Progate

公式テキスト一読後、ネットチャレンジの前にこちらに触れた。今回の受験にあたり、実際にhtml、cssを記述するための基礎知識はほぼここから得た。技術習得目的で受験を決めたのなら、これはやっておいた方が良い。テキストだと基礎的なことは何もわからないので。別に他の無料教材でも良いと思うが、段階を踏んで勉強できるのでわかりやすかった。初心者に優しい

一応1ヶ月課金して、以下のコース、レッスンを途中まで受講。

  • はじめてのWeb開発をやってみよう(“トップページを作成しよう”まで)
  • JavaScript Ⅰ (17/19)
  • PHP Ⅰ (7/24)

最初のコースにhttp、cssの基礎が含まれている。実技3に着手する前提分くらいは理解できたかな？と思い、ここでストップしたが、時間があるならもっとやっても良かったなと思う。

JS、PHPは主に学科に向けて少しだけ触れたが、他の言語との共通点が多そうだと思ったので早めに切り上げてしまった。ただ、実際の試験でphpのecho省略形が出題されて答えられなかったので、もう少しやっていたらその辺も勉強できたのかもしれない。

ネットチャレンジ　学科　3周

ガイドブックの本体①。学科の練習問題。

htmlバージョンに関連する問題(バージョンアップによってどのタグが利用できるか、廃止されているか)は、ざっくり傾向(4→5はスタイルに影響するようなものをhtmlで表現しないようにした等)だけ認識する程度に留めた。今はLiving Standardになっているので古いときの仕様をきっちり覚えてもしょうがないと考えたため。実際試験には出題されなかったはず。

ネットチャレンジ　実技　3周

ガイドブックの本体②。実技の3は、ネットに転がっているものとかなり記述が異なる。どちらがより良い表現なのか知識がないのでちゃんとした判断ができなかった。結局個人的に良いと思った記述方法を合体させたので、参考までに別章(実技3解説)で記載する。

5はbを選択。こちらの方が簡単。
こちらも以下リンク(再掲)内の練習問題が本当に有益。https://note.com/spitchi_k/n/n409e5ff22e89

学科過去問題　2、3周

こちらで紹介されていた過去問。Not Foundになっているが、

開発者モードでリンクを確認してウェブアーカイブで閲覧できる(小声)。

実技3解説

方針としては以下。
①htmlの骨組みを作る
②htmlの骨組みに合わせてcssの骨組みを作る
③htmlに細かい内容を追加
④cssに細かい内容を追加

実技のソフトウェアはVisual Studio Codeを利用。実際の試験でもコード補完が機能するので、ちょっと綴りを忘れたりしても大丈夫。

①②は以下が参考になる。手順7まではこちらの内容に従った。youtubeにアップされている東京文久堂公式の手順とイコールだったので、どちらを参考にしても大丈夫。
https://webdesignskill-superstrategy.com/2ndclass-practical-work-03

ただ、骨組み時点ですでに記述が異なる。違いは以下。

  • 公式解答だとmain、nav等のhtml5追加のタグを利用していない
    →個人的には利用した方がスマートに感じ、ネットの解答に合わせた。
  • 公式解答はbody内をdivで括ってwrapというidを付けている
    →こちらは採用してみた。

③④は公式解答に合わせるようにしたので、上記内容とは異なる。
主な違いは以下。

  • グローバルナビゲーション、テキストナビフッターはul、liを利用する
    →これが原因でかなりレイアウト調整用の記述が増えている。
  • グローバルナビゲーションは文字も記述しておき、それをcssで非表示に設定する

レイアウト調整用の記述が増えたことで、margin、paddingはどのタグ部分に記述するのか？リストの設定関連はul、li、li aのどこに記述するのか？clear:bothはどこに記述するのか？等で迷うことが多かった&覚えていられないと思ったので、丸暗記するのではなく、とりあえず必要な設定だけは覚えておいて、どこかに記述してみてブラウザで見た目が整えばOK！(見た目さえあっていれば何か設定抜けてもヨシ！)ということにした。実際リストの設定の記述位置は2箇所で揃えるために公式解答と変えているところがあったと思う。

練習問題に対する私のキメラ解答例は以下。上記方針で記述した結果、本番はちょっと違う内容になっていたと思う。

HTML

<?DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="wrap">
<header><img src="images/banner.gif"></header>
<nav>
    <ul class="menu">
        <li class="menu1"><a href="#">HOME</a></li>
        <li class="menu2"><a href="#">協会情報</a></li>
        <li class="menu3"><a href="#">ウェブデザイン技能検定</a></li>
        <li class="menu4"><a href="#">受検申請</a></li>
    </ul>
</nav>
<main>
</main>
<footer>
    <ul>
        <li><a href="#">HOME</a></li>
        <li><a href="#">協会情報</a></li>
        <li><a href="#">ウェブデザイン技能検定</a></li>
        <li><a href="#">受検申請</a></li>
        </ul>
</footer>
</div>
</body>
</html>

CSS

@charset "UTF-8";

#wrap{
    width:800px;
    margin: 0 auto;
}
header{
    height:54px;
    background-color:#000000;
}
nav{
    background-color:#000000;
}
.menu{
    clear:both;
    margin:0px;
    padding:0px;
}
.menu li{
    float:left;
    text-indent:-9999px;   
    overflow:hidden;
    list-style:none;
}
.menu li a{
    display:block;
    width:200px;
    height:46px;
    margin:0px;
    padding:0px;
}

.menu1 a{background-image:url(images/home.png);}
.menu1 a:hover{background-image:url(images/home2.png);}
.menu2 a{background-image:url(images/info.png);}
.menu2 a:hover{background-image:url(images/info2.png);}
.menu3 a{background-image:url(images/kentei.png);}
.menu3 a:hover{background-image:url(images/kentei2.png);}
.menu4 a{background-image:url(images/shinsei.png);}
.menu4 a:hover{background-image:url(images/shinsei2.png);}

main{
    float: left;
    height:600px;
    margin:0px;
    padding:0px;
    background-color:#000000;
}
footer{	
    clear: both;
    margin:0px;
    padding:0px;
    background-color:#555555;
}
footer ul{
    margin:0px;
    padding:0px;
}
footer li{
    display:inline;
    list-style:none;
}

試験当日

受付は午前、午後で別々らしい。身分証を見せて本人確認を実施。

■学科
過去問で見たものもちらほら。
ただ、完全初見のものの方が多かった感覚。初見だが応用情報程度の知識があれば普通に答えられたものもいくつか。

■実技
先述の通り、Visual Studio Codeのコード補完が機能したので少し安心。

3でcssの1番上に書く「@charset “utf-8”;」について、こちらは用意されるcssファイルにテンプレートとして記述されているものと思っていたのだが、実際は記述なくまっさらなファイルだった。

記述しようとするもの”@“部分がなんだったかド忘れ。記述なしの状態でブラウザ3種で確認して今回は文字化けしていなかったので記述しないことにした。合格が出るまでこれが禁忌肢選ぶくらいの判断だったらどうしようと思っていた。

5bの「document」を記述するのをド忘れし、getElementByIdのコード補完が全然出てこないので絶対間違ってる！ブラウザで動かない！ということで大変焦る。10分くらい頭を抱えていた気がする。元々記述されている他の部分を確認し、「document定義してるのに使ってなくね？」と気づけたので難を逃れる。

結果発表

学科実技共に合格。

ネットの受験申請システムからは結果確認できないので、外出中でも合格を迅速に確認したいなら公式サイトの合格発表pdfに記載された受験番号を照会することになる。正午くらいに発表されていた。受験票を持ち歩くなどして番号がわかるようにしておく。

感想

「体系的な技術的知識を得たい」という目的であれば受験料でProgate2年課金できる。まあ勉強のきっかけにはなるし、なんとなく資格コレクションしたいなら良いのでは。

コメント

タイトルとURLをコピーしました