こんにちは、Webエンジニアを目指す元専業アフィリエイターのYUUKIです。
Webエンジニアになる為にプログラミングを学んでいる最中なのですが、僕はプログラミングを始める前にHTMLとCSSの基礎を学びました。
元々WordPressを扱っていたのでHTML/CSSの概念は分かっていたのですが、今までちゃんとHTMLとCSSを勉強したことがなかったので（テーマをカスタマイズする時は全部ネットからコピペしてたw）いい機会だし改めて基礎から学び直そうということでProgateのHTML/CSSレッスンとドットインストールを中心に勉強を始めました。
勉強を始めた当初は分かんない部分も多くて苦労しましたが、学んでいく内にHTMLの挫折ポイントを発見しましたので、今回はHTMLの勉強をしていて挫折しそうな方向けに、挫折しない為の勉強法をお伝えします。
また、HTMLの習得難易度や実際に自分でコードを書けるようになるまでの方法も書いていきます。
HTMLの習得難易度
階層構造の理解が難しい
僕がHTMLを学習するにあたって、最初に躓いたのが階層構造です。
階層構造とは、上から下までツリー上に広がっていく構造のことを言いますが、HTMLではこの階層構造を理解しないと自分でコードを書くのが難しくなります。
HTMLでは「head」と「body」の2つの要素があります。
headには文書情報を、bodyには実際に表示させるコンテンツ情報を書いていきます。
headに書く内容はタイトル情報とメタ情報ぐらいなので記述は少ない（コピペでOK）
bodyにはページに表示させる内容を書いていくので、body要素に書く内容が重要となります。
HTMLでは、body要素がツリー上化していくので、bodyに子要素を付け加えるごとに構造が複雑化していきます。
HTMLの階層構造について、画像で説明するとこんな感じ
出典：http://redline.hippy.jp/lab/beginner/htmlxhtml.php
HTML5だと、以下の３つの子要素でbodyを構成することが多いです。
- header
- main
- footer
この３つの要素は人間の身体に置き換えて考えると分かりやすいです。
- header➡頭
- main➡胴体
- footer➡足
しかしHTMLを覚えたての段階だと、bodyの一体どの要素に書けばどこに表示されるのか、全く分からないですよね～。
実際僕も最初は分かりませんでした。
headerに書いたつもりがmainに書いてしまっていたりとw
そんな僕ですが、ひたすらコードを書いていたらあるコツを掴めました。
階層構造を覚えるコツは、今書いてるコードがどこの階層に表示されるのか、全体構造を常に意識しながら書くことです。
例えば、当サイトのロゴ画像「Web engineer road」をトップ中央に表示させたい時は、まずはどこの要素の下に表示させればいいのかを考えます。
当サイトのソースを読むと「body要素の中のheader要素」にあることが分かるので、<header></header>の中の「専業アフィリエイターからWebエンジニアの道へ」の下に貼ればOKですね。
このように、常に全体の階層をイメージしながら一個一個のコードを書くことで、どの場所にどの要素を入れればいいのか理解できると思います。
最初はheader,main,footerの３つを意識して、それぞれに一つ一つ要素を足していくイメージで書くと良いでしょう。
タグをどこで閉じればいいか分からなくなる
タグを閉じることを「閉じタグ」と言いますが、最初はどこまでタグを閉じればいいのか分からなくなります。
これは単純にタグの意味を理解していない人が陥りやすいので、教科書に書いてあることをコピペするのではなく、一個一個のタグの意味を理解するようにしましょう。
classとidをどこに付ければいいのか分からない
htmlにCSSを適用させる際に、class属性とid属性というものがあります。
これはCSSで該当箇所をカスタマイズする際に使用しますが、最初はこの属性をどこに付ければいいのか分からなくて困ります。
というのも、classとidは綺麗に割り振っておかないと、cssでカスタマイズする際にデザインが崩れたりしてしまうのです。
自分は最初、同じclass内の文字を中央に寄せてしまったり、画像に意味もなくclassを付けたりと苦労しました。
これは先程書いた階層構造が理解できれば、恐らく問題ないと思いますが、最初は理解するのにも必死なんですよね～。
HTMLの習得難易度は？
とまぁ挫折ポイントを書いていきましたが、HTMLの習得難易度はプログラミング言語と比べると、天と地ほどの差があります。
HTMLはプログラミングのように複雑な計算を覚える必要はありません。
基本ルールを覚えたら、後は必要なタグを覚えていくだけ。
綺麗なコードを書いたり、センスのいいページを作ろうと思ったら経験が必要ですが、とにかく基礎的なことを覚えるんだったら一番簡単ですね。
Progateやれば理解できる
プログラミングを学ぶ前にHTMLを習得してしまえば、割とスムーズにプログラミングを覚えることができると思います。
ですので、ここで挫折してしまっては勿体無いです。
HTMLを挫折しないポイントとしては、「階層構造」をしっかり理解することがコツですが、階層構造を覚えるにはやはりProgateがいいでしょう。
HTMLを1から図を用いて教えてくれるので、Webに疎い人でも簡単に覚えることができます。
実際僕もProgateで勉強しましたが、HTMLをこんなにも分かりやすく教えてくれるサイトは他にありません。
ProgateではHTMLのルールをただ覚えていくのではなく、自分でコードを書いて勉強しますので自然と身につきます。
ですので、HTMLを一度挫折した人にもProgateはオススメしますよ。
