コーディングに苦手意識のあった私が、HTMLを覚えるのに取り組んだある方法

スタッフブログ

こんにちは、webデザイナーのハナフサです。

webサイトのHTMLの記述方法。調べみても「こんな風に書けばいい」とコードと説明が書いてある記事ばかり。結局どのようにタグで囲っていけばいいのか、CSSとの関係性、考え方が全然分からずなかなか身につきませんでした。結局今でも、皆さんがどうやって覚えていったのか不思議に思うので、その不思議もなくしていけるよう知識をつけていかなければなりませんね。

さて、今回のブログでは、私がHTMLを覚えるのに用いたある手段や考え方をまとめることで再確認し、知識を深めていきたいと思っています。また、これからHTMLをどうやって覚えていこうかという方に、少しでも考えのきっかけになる記事が書けれたら幸いです。

あまり身につかなかった覚え方

最初に、私の経験からHTMLを覚えるのにオススメしない方法を紹介します。
それは「出来ない原因を突き止めず、コピペするのはオススメしない」です。

「とりあえず試してみる→ダメだった場合は、原因は何か考える→試す」をひたすら繰り返したらいずれ身につくことなのですが、私の場合は、原因が何か考えることをすっぽかしてしまっていました。

その経験談として、学生時代に一度ポートフォリオ用のwebサイトを作ってみたことがありました。コーディングをするにあたって、「参考にできそうなwebサイトを見つける→表示させたいレイアウトを見つけ、とりあえずそれっぽいコードをコピペする→どのように表示されているか見てみる」というのを、やみくもに繰り返しやっていました。

当時(現在も)私にとってコードを書くということが、すごく難しいことだと思っていましたし、どう記述したらよいのか分からないので、コピペするという気持ちはすごく分かります。しかし、分からずのままコピペしても結局分からないまま。思い通りに表示されない時に原因がどこかなのかを突き止めず、何がなにやら却って頭がごちゃごちゃになり、なかなか身につくことがありませんでした。(本気度も足らなかった)

こんな感じでコーディングにとても苦手意識があり、ほぼ理解していなかった私なのですが、会社に入社し先輩上司から考え方や方法を教えてもらい実行した結果、ある程度のサイトのHTMLとCSSは組むことができるようになりました。

webサイトはいくつもの箱が組み合わさって構成されていると考える

あくまで1つの考え方ですがHTMLでコーディングをするときは、「箱(タグ)の中にさらに箱(タグ)があり、また更に別の箱(タグ)の中に箱(タグ)がある」みたいな感覚です。その考えをもとに会社の方に教わった方法が、いろんなwebサイトを四角形だけで、箱(タグ)を意識しながら図で書き起こす方法になります。言葉で説明しても分かりにくいと思いますので、例として実際にEVOLVEのページを例に自分が図に書き起こしてみたのをご参照ください。

参考にしたEVOLVEのページ

EVOLVEのサイトを参考に箱の考えで書き起こした図

このような感じで要素を入れる箱をどんどん組み合わせていきます。ロゴ・ナビゲーションを入れる大きな箱を作成し、文字など細かい要素を入れるさらに小さい箱を作成してみました。「大きな箱」その中に入る「小さな箱」というような入れ子の考え方で図を書いていきます。

箱に適当な名前(HTMLタグ)を付けていく

図を書き起こし後の作業は、それぞれの箱に名前を振って行く作業になります。何のためにそれぞれの箱に適切なタグ名をつける必要があるのかなどは、今後詳しく掘り下げてみようと思いますので一旦保留にさせていただきます。

基本的に名前(HTMLタグ)を振るのに正解はありませんが、私は、HTML 要素リファレンスに掲載されているタグの中から、コンテンツに応じてどの名前(HTMLタグ)が適当なのかを選んでいます。他にも気になったサイトは検証してみて、コンテンツに対して何のタグを使っているのかなどを参考にし、名前(HTMLタグ)を考えています。

HTMLタグは、よくわからない英語だったり省略されてたりしますが、きちんとそれぞれ意味もあって、例えば本当に初歩的ですが、<p>はparagraphのpで"段落"を意味する英語の略だったりします。こうした英単語の意味も調べてみるとタグをどの箇所に使うのかの参考にもなるので、調べてみるのもいいですね。

では、実際に箱だけで書き起こした図から、自分で考えたタグを書き足してみたのでご覧ください。

何も書いていなかった箱の状態から、タグを付けてみました。この作業を何回か繰り返した後、箱とタグを書いた紙を見ながらHTMLコードを打ってみると……

<!DOCTYPE html>
<html>
    <body>
        <section>
            <header>
                <a></a>
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </header>
            <div>
                <h1></h1>
                <img>
                <p></p>
            </div>
        </section>
    </body>
</html>

このような感じになります。箱の考えを繰り返しやっていくうちに、コーディングに苦手意識のあった私でもそれっぽい感じで打てるようになりました。

図に起こす方法を数回繰り返すだけでいつの間にか箱の考え方が身につき、HTMLが組みやすくなった

コードを初めて見たときに、第一印象で「これは人間が書いているのか? 」と疑っていた私。
闇雲にやってみても頭がごちゃごちゃになって、勝手に脳にフィルターが掛っているような感覚に陥っていた私。
そんな私でも、箱の考え方でいろんなサイトを図に書き起こしていくやり方は非常に覚えやすかったです。コードではなく実際に図で書き出すことによって、目に見えて箱(タグ)の中に何を入れたらよいかが分かり、開始タグ終了タグをどこに書いていけば良さそうかなど、整理できるようになりました。何回か練習した後、いよいよ実際にHTMLを書いてみよう思いやってみたときは思っている以上にすんなり進めることができるようになってたのでビックリです。

まだまだHTMLタグの種類などもほんの一部しか把握しておらず、全然理解できていないのでどんどん調べ試すことが必要です。でも、HTMLやCSSなど実際にできると楽しいので、今後もできるようになったことや疑問や気づきなどをブログにまとめていけたらと思います。