【プログラミング】超初心者がHTMLとCSSでぶつかる壁とは？【アドバイス】

プログラマー超初心者はHTMLとCSSでわからなくなる？
言葉の意味はわかるけど、実際のコードを書こうとするとわからなくなる？

この記事はこんな疑問にお答えします。

本記事の内容
・HTMLとCSS　超初心者がぶつかる壁とは？
・超初心者が押さえておくべきポイント
・理解できてしまえば簡単

■HTML と CSS　超初心者がぶつかる壁とは？

「プログラマーを目指そうと思っているんだけど」
「それはいいね。IT業界は人手不足みたいだから仕事いっぱいありそうでね」
「そうそう。で、そう思って勉強を始めたところなんだけど、早くも壁にぶつかっちゃって」
「なににぶつかったの？」
「HTMLとCSSを学び始めたんだけど、理解できなくて・・・」
「超初心者がぶつかる壁かもしれないね」

HTML：Hyper Text Markup Language
CSS：Cascading Style Sheets

言葉の堅い定義は、本やネットに出ているものを見てもらえばよいかと思います。

HTMLとは、わかりやすく言うとブラウザでページを表示するための言語です。
CSSはその表示方法を指定して、見た目などのレイアウトを整えるものです。

HTMLは見慣れないとわかりづらいと思いますが、大枠は決まっているので、そういうものだと 理解してしまいましょう。

眺めているとなんとなくですが、規則性があることがわかりますよね。
＜＞ と ＜／＞ で挟み込んでいる個所が多いですね。

ここが Markup と呼ばれているところで、日本語ではタグって呼ばれます。

これがひと塊だと理解してください。

HTMLを構成しているのは、＜ｈｅａｄ＞ と ＜ｂｏｄｙ＞ です。

これも決まり事です。
ブラウザで表示されるのは ＜ｂｏｄｙ＞ の中に書かれているものです。
＜ｈｅａｄ＞ の部分はブラウザでは表示されませんが、このHTML上で必要な情報などを載せておく場所です。

＜ｈｅａｄ＞ とか ＜ｂｏｄｙ＞ でわかれているので、＜ｈｅａｄ＞ がページのヘッダー部分と 勘違いしてしまうかもしれませんが、そうではないので気を付けてください。

ブラウザで表示されるのは ＜ｂｏｄｙ＞ の中に書かれているものになりますので、この ＜ｂｏｄｙ＞ の中が画面に表示される材料になります。

基本的には上から下へ順に書かれていることが画面の上から下へ表示されます。

ですので、画面全体を３つに分けて
＜ｈｅａｄｅｒ＞
＜ｍａｉｎ＞
＜ｆｏｏｔｅｒ＞
と分けて書いておくと、わかりやすいです。

プログラミングでは、こうした名前をつけることが多々ありますが、わかりやすい名前を付けておくことで、直感的に内容を理解することの手助けになります。

名前の付け方は、単なる記号でもよいのですが、意味がない記号だと理解するのに時間がかかってしまい、あとあとの保守にも影響がでます。

ページのレイアウトから
ヘッダー部分
メインコンテンツ部分
フッター部分
とわけておき、名前もわかりやすくつけておくことでページの見た目と書かれていることが一致して一瞬で理解できるようになります。

HTMLはこのように、ブラウザで表示するページの大枠や表示したい内容の材料が書いてあると理解するとわかりやすいです。

当初は、その内容の材料をどのように表示するかの指定もHTMLに書いていたのですが、記述が長くなってしまい、見づらく理解しづらくなってしまったので、役割を分けて生まれたのがCSSなのです。

HTMLはページの枠組みや表示したい内容の材料を書いておくもの。
CSSはその材料をどのように表示するかを指定したもの。
と役割を分けて書くようにしたのです。

CSSで表示するのにあたって、「何を」「どのように」指定する必要がありますよね。
そうじゃないとどう表示したらよいかわからなくなってしまいますから。

プログラミング全体に言えることですが、コンピュータが一つ一つを理解できるようにこと細かに指定をしてあげないといけません。

今回のHTMLとCSSで言えば、CSSで「何を」「どうやって」と指定するのに、識別できるようにしておかないとCSSが処理できません。

そのために、タグと呼ばれるものだったり属性と呼ばれるものをHTMLで指定しておく必要があります。

それが ＜ｐ＞ や class=”title” という記述なのです。

本やネットでの解説って、いきなりHTMLとかCSSとかタグとか属性とかの解説が始まってしまうことが多いのですが、もう少しわかりやすく表現されていると理解の手助けになるのに・・・といつも思います。

■超初心者が押さえておくべきポイント

物事を理解する際には、いきなり細かいことを理解しようとするのではなく、全体像をおおよそ把握して理解してから細部に焦点を当てていく方が理解しやすいです。

HTMLの説明一つとっても、いきなり Hyper Text とは・・・と始まっても「？？？」ですよね。
正確でなくても構わないので、おおざっぱにブラウザでページを表示するためのものという理解でよいと思います。

あとは、最初は理解できなくて全然かまわないので、何度も眺めていると、なんとなく規則性を発見できると思います。

それを自分なりの理解でよいので、「こういう意味かな」と当たりをつけておいてから本やネットでの解説を見ると理解度が深まります。

もう一歩踏み込んで理解するには、意味などわからなくてよいので、簡単なサンプルソース（プログラムを命令を記載したもの）をまっさらな状態からキーボードで打ち込んでいくことです。

コピペ文化に慣れてしまっていると面倒くさいと感じるかもしれませんが、手を動かしていくと後々大きな差が出てきます。

タイピングの練習だと思ってやってみてください。

いろいろな発見があるはずです。

■理解できてしまえば簡単

プログラミングって、難しいイメージを持っているかもしれませんが、ある程度理解できてくると楽しくなってきます。

そしてある一つの言語をマスターすると、ほかの言語も比較的楽にマスターできるようになります。

表現方法が違うだけなのと、比較的表現方法も似ているので、理解しやすいのです。

ただ、最初の一つ目の言語をマスターするのは大変かもしれません。

プログラミングのお作法を全く知らない状態から一つずつ理解して積み上げていくのは、それなりに時間がかかるからです。

入門書を一冊買って読み、ドットインストールやProgate などで実際に手を動かしながら学んでいくとよいでしょう。

ちなみに、プログラミングは年齢、性別、学歴は関係なくスキルを身につけていくことができるので、おススメです。