はじめに
Web開発をするならHTML＆CSSの学習を避けて通ることはできません。
私も独学時にHTML/CSSの学習をしたことがあります。
しかし、学習した経験があると言っても、書籍の内容をそのまま打ち込んでいただけなので、理解が足りていないところがほとんどでした。
マージンとパディングの違いもあまりわかっていないようなレベルでしたが、今回学び直したことで理解が深まったのを実感しました。
本記事では、私がHTML/CSSの学び直しをした際に大事だなと思ったことについて触れようと思います。
HTMLの基本
HTMLは、Hyper Text Markup Languageの略というのは、大抵のテキストの最初の方で説明されていると思います。
私は Markup の部分に着目しました。
Markupとは、文字（テキスト）などの情報をコンピューターが、これは大見出し、これは文章といった具合に理解するためのものです。
私たち人間は、文字を読み取るだけでそれらを理解できるのですが、コンピューターには理解できないからです。
個人的には、この部分を理解することで、HTMLの理解度が爆上がりしました。
例えば、h2タグ。ブラウザにh2タグの内容を表示させると、他の文字よりも強調されて表示されるかと思います。
h1 ~ h6 タグのhが意味するものは、heading（見出し）です。
h2タグで囲んだ文字は、「2番目に大きい見出し（例えば章）ですよ」とコンピューターに理解してもらうためのものです。
決して、文字の大きさや太さを強調するために使うタグではないのです。
文字の大きさなどの装飾はCSSの範疇ですから。
他にも、pタグは段落（paragraph）を示しますし、divタグ（divisionの略）は構造的にタグをグループ化したいときに使います。
これらのタグも同様に、コンピューターに文書構造を理解してもらうためのものです。
一言で表すなら、「HTMLとは、Markupすることで、コンピューターに文書構造を理解してもらうためのもの」であるということです。
CSSは奥が深い
正直に言って、私はCSSが大嫌いでした。
何故なら、自分が思っている表現方法で画面に表示されないからです。
表示が崩れまくって、レイアウトが滅茶苦茶になるのがストレスでしかなかったのです。そこで、なぜレイアウトが崩れてしまうのかを真剣に考えました。
意図しないレイアウトになってしまう理由は2つありました。
- ボックスレイアウトについて理解できていないこと。
- display属性について理解できていなかったこと。
まず、ボックスレイアウトですが、要素の余白を設定する場合に、パディングとするべきかマージンとするべきかを適当にしていたのです。
両者の違いも良くわかっていませんでした。
これを解決してくれたのが、こちらで紹介されている背景色をつけて余白を可視化する方法でした。
次にdisplay属性についてですが、inline, block, inline-blockこの3つの違いを解説したこちらのサイトのお陰でやっと理解できました。
この2点の問題をクリアすることでCSSも格段に理解が進みました。
様々な情報を共有できるって素晴らしい！
次なるステージへ
HTML/CSSをある程度理解できたのなら、あとはひたすらに手を動かしてアウトプットです。
どのように練習するかが問題となります。
デザインから何から全てゼロから作るのは非常に大変ですし、それにはデザインの勉強も必要となるでしょう。
では、どうやってアウトプットするのか。
答えは模写です。
既存のサイトを真似するのです。
模写の方法は色々あるので、自分のレベルに合った方法で模写して練習するのが良いと思います。
例えば、こちらの方法を取り入れてみるのもいいかもしれません。
いかがだったでしょうか、HTML/CSSの効果的な練習方法は模写だと思います。
この表現は、どのように書くのだろうかと、ブラウザの「検証」をつかって中身をみたり、自身で考えてみたりといった行動が実力を上げてくれることでしょう。
この記事がHTML/CSSに苦手意識を持つ方の一助になれば幸いです。
では、また！
