【コーディング初心者へ】HTML・CSSを身につけるために大事なこと

どうも、コロハです。
今回はHTML・CSSを触り始めたばかりというコーディング初心者の方への記事となります。

HTML・CSSを独学で勉強するってなったとき、ほとんどの方はテキストを1冊なり数冊なり読んで、そこに記されているコードを指示通りに記述して、ブラウザで表示を確認する、という流れでやっているんじゃないかと思います。

テキストに沿って勉強するのはとても大事なことです。しかしもっと大事なことは「その後」なんです。

そう、教科書に書いてあることを、教科書通りに記述するのなんて、正直誰でもできるんです。
やはり最終的には「自分で1サイト作り上げたい」という目標があるはずですので、HTML・CSSをいち早く身につけるための注意点や進め方をご紹介します。

その1：とにかく「記述ミス」に気を付ける

初心者の方が陥りやすいコーディングの失敗の多くが「記述ミス」です。
HTMLとCSSでそれぞれ見てみると

HTML

• タグ名が間違っている。
• 属性名、属性値名が間違っている。
• タグ名と属性の間に半角スペースがない（もしくは半角スペースが2つ以上ある）
• 余計な半角スペースがある
• 終了タグがない

CSS

• セレクタ名が間違っている。
• プロパティ名、値が間違っている。
• :（コロン）や;（セミコロン）が抜けている。
• セレクタの指定の仕方が間違っている（複数セレクタの間は「,」子孫セレクタの間は半角スペース）
• IDセレクタの頭に「#」、classセレクタの頭に「.」がついていない。
• 閉じ括弧（}）がない。

HTML・CSS共通

• 全角入力になっている

上記に書いた内容、心当たりのある人はいませんか？多分ほとんどの方がそうだと思います。
はじめはゆっくりでもいいので、記述ミス（スペルミス）をなるべく出さないように心がけましょう。
自分一人ではどうしても気づけなかったら、誰かほかの人に見つけてもらうのもいいかもしれません。

その2：ブラウザの「開発者ツール」を活用する

これ、意外と教科書で紹介が載っているのと載っていないのとあるんですよね。
今後Web制作に関わるのであればぜひとも初めのうちから知っておくべきツールだと私は思います。

開発者ツールはどのブラウザにも搭載されていて、「検証ツール」や「デベロッパーツール」と言われたりもします。

起動方法は以下の通りです。

他、ブラウザ上で右クリックでも開発者ツールの項目が出てきますが、ブラウザにより名称が異なります。

そして開発者ツールを出すと以下のような画面が（今回はChromeのでお見せします。）

初めて見る人は「なんじゃこりゃ～！」と思う画面ですよね。
最初のうちは上記画像の①～④だけ知っておけば大丈夫です。

①要素の選択

Webページ上の要素を選択できます。先に①の矢印マークをクリックします。そのままWebページ上にカーソルを持っていくと、青やらなんやら色が付いてきます。

調べたい要素が確定したら、その部分をマウスでクリックします。

調べたい要素が確定したら、その部分をマウスでクリックします。

②HTML要素の確認

「Elements」と書かれているタブは、WebページのHTML要素を表示しています。
そして先ほどの「①要素の確認」でクリックした部分のHTMLが選択されます。

選択した要素の子要素、子孫要素まで細かく確認したい場合は、左側の「▶」マークをクリックして展開してください。

③CSSスタイリングの確認

開発者ツールの右側にある「Styles」というタブでは、CSSのスタイルを確認することができます。

今回選択した要素は<a>で、「a-wrap」というclass名がついていたことが分かります。
もし自分が制作したサイトで、CSSを設定したにもかかわらずこの「Styles」部分に表示されなかったら、CSSの記述がおかしいことが考えられます。

④レスポンシブデザインの表示

スマホのようなデバイスのマークをクリックするとWebページがスマートフォンで閲覧しているようなレイアウトになります。

パソコン表示に戻したかったらもう一度デバイスマークをクリックしてください。

上部の「Dimensions: Responsive」をクリックすると、実際にあるスマホやタブレット端末の画面サイズを想定したレイアウトが確認できますので、確認したいデバイスを選択します。

開発者ツールはWebページ上のHTMLやCSS、レスポンシブデザインも確認できるので、自分で作ったサイトの確認はもちろん、参考にしたいサイトの「ここのレイアウトってどうなっているんだ？」なんてことも調べることができます。どんどん活用していきましょう。

その3：よく使うスタイルから徹底的に覚える

これはCSSの話になるんですが、いくつかの教科書で勉強してきた方々、それらの本に載っていたCSSの種類ってどうでしたか？どの本もほとんど同じものが載っていたんじゃないでしょうか？

この世にCSSのプロパティや値はものすごい数があります。ですが、サイト制作でよく使うCSSは大体決まっていて、パターン化しています。

テキスト周りならfont-sizeやcolor、背景に関するbackground関連、ボックスモデルのmargin、padding、borderなど・・・。
ですので、まずは教科書で出てきたCSSの意味などを最初のうちに徹底的に覚えてください。難しいことや応用的なことは調べながらやっちゃえばいいんです。基礎的なことを固めることの方が大事だと思います。

その4：エディターのEmmet機能を活用する

みなさんコーディングする際のエディターって何使ってますか？
Atom、Visual Studio Code（VSCode）、Dreamweaver、Notepad++などさまざまありますね。

上記のいずれにもあるのが「Emmet」という機能です。デフォルトで搭載されている場合もあれば、プラグインをインストールして使用できるものなどあるようです。
「Emmet」はHTMLやCSSを省略記法で簡潔に記述するためのツールです。記述量をかなり削減できるので、省略記法を習得すればコーディング時間もかなり減らせると思います。

Emmetを使った記述

HTMLの例

CSSの例

短い記述とTabキーを組み合わせることで、だいぶ効率が上がりますね。

その5：とにかく復習！おさらい！繰り返し！

教科書を一通りやり終わった後、1冊やり終えたことに満足してませんか？
コーディングは1回やっただけではまず覚えられません。何度も繰り返し繰り返しおさらいすることで、力が付いてきます。
例えば、教科書1冊を通してとある架空のサイトを1つ作り上げる、といったものだとしたら、とりあえずまず2回目をやる。そして、そこでまず1回目の復習をする。「ああ、このタグこういう意味だったなあ」と思い出しにもなります。そして大事なのが、1回目でつまずいてしまった箇所をなぜミスしてしまったのか考えながら徹底的にやる。記述ミスで間違えてしまっていたのならそうしないように気を付ける。
2回目が終わったら、3回目、4回目・・・と、自分が納得いくまでやり続けるといいと思います。

そして「1回目やったときはわからなかったけど、何度も繰り返しやるうちにわかってきた」と感じると思います。そして回数をこなしていくうちに、記述ミスも減り、コーディングのスピードも上がってくると思います。

結局「慣れ」なんですよね。コーディングに限らずなんでもそうだと思うんですが。

まとめ

HTML・CSSをいち早く身につけるための注意点や進め方をまとめると

でした。
時には挫折することもあるかと思いますが、簡単なものでも自力でWebサイトをひとつ作れるくらいまでにはなれるよう、ぜひ精進してみてください。

ではまた！