個人的な資格の受かり方~HTML5プロフェッショナル認定試験 レベル1~

## 1. はじめに
今回の記事では、HTML5プロフェッショナル認定試験レベル1（Ver. 2.5）に合格した経験から、勉強方法や使用した参考書、試験を受ける前と終えた後の印象などをまとめたいと思います。
これから受験しようと思っている人、勉強方法に迷っている人などの参考になると嬉しいです。
勉強方法だけ知りたい人は[4. 勉強方法](#4-勉強方法)まで飛ばしてください。

## 2. 受験した理由と受験前の印象
まず初めに受験しようと思った理由です。
自分は普段の業務からHTML、CSSに触れる機会もあるのですが、以下のような理由からこの2つにはずっと苦手意識がありました。

<ol>
    <li>
    構文が間違っていても、実際に画面を見てみるまでわからない<br>
    （Javaのコンパイルエラーのように、コーディングミスがあった時点で気づければいいのに）
    </li>
    <li>
    CSSの適用範囲がわからない
    </li>
    <li>
    HTMLの要素、CSSのプロパティが多すぎる
    </li>
</ol>

とはいえ、苦手意識の原因は自分の知識不足からくるものなので、勉強のきっかけにしようと思って受験を決めました。
個人的に暗記が苦手なこともあり、受験前の印象としては「勉強したくないな」が正直な感想でした。。。

## 3. 使用した参考書
今回の受験にあたって使用した参考書と、個人的に良かった点、良くなかった点をまとめてみます↓

<table>
    <tr>
        <th>参考書</th>
        <td>
        HTML5プロフェッショナル認定試験レベル1 対策テキスト&問題集<br>
        Ver. 2.5対応版<br>
        発行：株式会社 マイナビ出版（2022/9/26 初版第1刷発行）
        </td>
    </tr>
    <tr>
        <th>良かった点</th>
        <td>
            <ul>
                <li>
                要素、プロパティごとに実際の記述例が載っているところも多く、使い方をイメージしやすかった
                </li>
                <li>
                性質が似ている要素、プロパティごとに解説が記載されていて、違いなどを把握しやすかった
                </li>
                <li>
                ページに使用されている色が白黒だけではなく、字も大きかったので読みやすかった
                </li>
            </ul>
        </td>
    </tr>
    <tr>
        <th>良くなかった点</th>
        <td>
            <ul>
                <li>
                各要素、各プロパティを使用したときに、実際の画面ではどのように見えるかのイメージがもう少し欲しかった<br>
                （使用するブラウザによって表示のされ方も変わりそうなので、難しいのかもしれない。。）
                </li>
                <li>
                ちょいちょい誤植がある
                </li>
            </ul>
        </td>
    </tr>
</table>

上記のように、全体的には読みやすく勉強しやすかった印象です。
今回使用したのはあくまで参考書だったので、付属している問題としては各章の章末問題と模擬試験1回分でした。
同じシリーズの問題集もあるようなので、そちらも使ってもっと数をこなしておいても良かったかもしれません。

## 4. 勉強方法
ここからは、今回の受験に向けてどのように勉強を進めたかを紹介します。
勉強方法を本当にざっくり言ってしまうと、<b>「テキストを何周もする」</b>です。
以下に簡単に勉強の流れをまとめたいと思います。

<ol>
    <li>
    テキストを軽く1周する<br>
    1周目で覚えられることなんてないので、章末問題を解くこともなく、なんとなくの雰囲気を掴みます。
    </li>
    <li>
    しっかり覚えにかかる<br>
    2周目では「この要素はこういう目的で使用するもの」、「このプロパティはこういう表示をさせるためのもの」のように、しっかり覚えていきました。<br>
    書いてあることを文字だけで覚えるのは厳しいので、次のようなことを意識していました。
        <ul>
            <li>
            各要素、プロパティを使ったとき、画面ではどのような表示になるのか<br>
            例えば、ルビを振るためのruby要素を使用すると以下のような表示になります。<br>
            <code>
            <ruby>漢字<rp>(</rp><rt>かんじ</rt><rp>)</rp></ruby>
            </code>
            <br>
            このように、「ruby要素はルビを振るための要素です」と文字だけで説明されるのと、実際に要素を使用したときの表示のされ方までセットで覚えるのとでは覚えやすさが違ってくると思うので、イメージが湧かないものに関しては調べるようにしていました。
            </li>
            <li>
            要素の意味と一緒に覚える<br>
            CSSのプロパティに関しては、
            <code>text-indent</code>
            や
            <code>background-image</code>
            など、プロパティ名から用途がイメージしやすいものが多いのですが、HTMLの要素はそうでないものが多いと感じています。<br>
            そのため、例えば
            <code>ul</code>
            と
            <code>ol</code>
            はどちらもリストを表す要素ですが、
            <code>ul</code>
            は"unordered list"の略であるため、
            <ul>
                <li>HTML</li>
                <li>CSS</li>
            </ul>
            のように箇条書きのリストとなります。<br>
            一方、
            <code>ol</code>
            は"ordered list"の略であるため、
            <ol>
                <li>HTML</li>
                <li>CSS</li>
            </ol>
            のように連番の付いたリストとなります。<br>
            このように、要素の意味についても解説があるものはセットで覚えるようにしていました。
        </ul>
    </li>
    <li>
    細かい記載まで覚える<br>
    3周目に入ってからは各要素に指定可能な属性や、各プロパティで単独でしか指定できない値など、細かい部分にまで目を向けるようにしていました。<br>
    2周目から章末問題に手を付け始めましたが、思ったよりも細かいところまで出題される印象を受けたので、できる限り目を通しました。
    </li>
    <li>
    模擬試験を解く<br>
    テキストを4周ほどした後に模擬試験を解きました。<br>
    模擬試験も2周したおかげで、抜けていた知識を補うことができました。
    </li>
</ol>

以上のように、できるだけ丸暗記にならないように勉強を進めていました。

## 5. 結果と受験後の印象
試験結果は合格ラインを10点上回っての合格でした。
印象としては、細かいところまで出題されて絶妙に回答に自信を持てない問題が何問かあり、思っていたよりもギリギリの合格となりました。
また、テキストでは見なかったような知識の出題もあったように思えたので、やはり問題集もやってもっと数をこなしておけばよかったな～と感じています。<br>

ただギリギリの合格にはなりましたが、勉強を始める前と後で比べるとHTMLやCSSをかなり読みやすくなり、この記事の中でリストや表を使う際も自力でスラスラ書くことができて勝手に成果を感じています。
HTML5プロフェッショナル認定試験のレベル2はJavaScriptがメイン？のようなので、こちらも取得できるように引き続き頑張りたいと思います。