Web制作を学ぶ

クリエイター・プログラマーを目指している人のためのメディアくりぷろメディア-クリエイター・プログラマーを目指している人のためのメディア

2021.11.08更新

【超初心者向けに解説】HTMLとCSSとは何か どうやって学ぶべきか?

【超初心者向けに解説】HTMLとCSSとは何か どうやって学ぶべきか?

HTMLとは?

皆さんが文章を見た時、「これは見出しだな」「これは文章だな」とぱっと見て判断することができるでしょうか?
即座に、というのは難しいかもしれませんが、前後の文章などを読んで、ここで内容が一旦一区切りだな、とか、これは見出しなんだろうな、という判断はつくと思います。

ですが、同じことをパソコンにお願いしようとすると、それは難しいです。
パソコンにとって、文字列はすべてただの記号の羅列で、その意味まで説くことはなかなか難しいのです。

なので「これは見出しだよ」「これは内容だよ」「ここで章が一区切りだよ」と人が教えてあげないといけません。そうすることで、パソコンは書かれている内容の文章の構造がわかるようになります。

HTMLとは、ハイパーテキスト・マークアップ・ランゲージ(Hyper Text Markup Language)の略で、コンピューターが意味を読み取れるよう「見出しや文章の括り付け」などの文章構造を理解できるようにしたマークアップ言語です。
つまり、HTMLを使って「ここが見出しだよ」といった意味付けをしていくことになります。

HTMLは文章の構造を記述する言語ですので、デザインまでは担当させてはいけません。
デザインはCSS
が担当してくれます。

CSSとは?

例えば、HTMLのh1というタグを付ければ、その文章は一番トップの見出しという扱いになるので、ブラウザで表示した場合は、トップの見出しっぽく、太くて大きな文字にデザインしてくれます

ですが「太くて大きな文字にしたい」という目的でh1というタグをつけてはいけません
そこの文章がトップの見出しであればOKなのですが、そうでないのであればh1を付けてはいけないのです。
パソコンは文章の構造をHTMLで判断しますので、間違った文章の情報を伝えてはいけません。デザインのためのタグ付けはNGです。

「太くて大きな文字にしたい」というのは、デザインの話になります。
このデザインのみを変更したい場合は、CSSを使って見栄えを整えていきます
CSSがデザインを担当します。

HTMLとCSSの関係はとっても密である

HTMLとCSSは密接な関係があります。
HTML側で指定しているタグやクラスなどを使って「このタグの文字はオレンジ色で」とか「このタグの背景はこの色で」といった指定をCSSで行います。

なので、HTMLだけわかる、CSSだけわかる、というわけにはいきません
両方が密接に関連しているので、どちらも分かるようにならなければいけません。

・HTMLがこうなっているから、このCSSはできない
・このCSSを指定したいから、HTMLはこう書かないといけない
・CSSのためにHTMLはこうしたいけど、HTMLのルールに反してるから、CSSを考え直そう

といった感じで、両方のことを考えてコーディングをする必要があります。

HTMLとCSSの関係はとっても密なのです。
どちらか一方だけ、ということは基本的にはありえません

HTMLとCSSをどのように学ぶか?

HTMLとCSSをどのように学べばいいのか?
主に次のような方法があります。

参考書・書籍を使って学ぶ

まず手始めに、HTMLとCSSの基本書き方、要素の意味、ルールを理解するために、参考書や書籍を使って学んでみましょう。

参考書・書籍を使って学ぶポイントは、次の2つです。
1.参考書・書籍は新しいものを選ぶ
2.実際に自分の手を動かして、知識を落とし込む

1.参考書・書籍は新しいものを選ぶ

IT業界の移り変わりは、とてもスピードが速いです。
Webも数年前の書籍に載っている内容が、今では常識ではなくなっている可能性もあります

なので書籍は比較的新しいものを選択しましょう。
費用をおさえるために古本屋さんなどで購入した本で学んではいけません。
もしそうするのであれば、必ずそのあとに新しい本を購入して知識を補充しておきましょう。

※自分の合った本を見つけるポイント
自分に合った本なのかを見極めるポイントは、自分が知っている内容が掲載されている部分を読んで判断します

あえて、自分の知っている情報がどのように書かれているのかを確認することで、その本わかりやすいのか、自分に合っているのか判断ができます。

知らないところを読んでもそもそも知らないので、分かりやすく説明されているのか判断できません。
知っているところを読んでこそ、「これは分かりやすく書いてるな」「この説明だと自分は理解できないな」という判断ができます。

イラストが多めがいい、文字の量が多くても内容がしっかりしているものがいい、など好みがあると思いますので、少し大きめの本屋さんに出向いて、自分の目で判断するのが一番です。

2.実際に自分の手を動かしてコーディングを行い、知識を落とし込む

HTMLは「タグ付けすればいいんでしょ」と言われがちですが、結構奥が深くて細かいルールがあります。
そのルールも確認しながら、一つずつタグを覚えていく必要があります。

そして、HTMLとCSSをどう結び付けて、どのような動作になるのかを理解しなければいけません。
そのために、実際に自分の手を動かし、コーディングをして確認していきましょう。
本を読むだけではなく、実際にパソコンを使って入力して、一つずつ確認することが大切です

どれがどんなに簡単だと感じても、絶対に自分は理解できていると思っても、本を読むだけで終わらず、コーディングを入力して、手を動かしてください。

そして、
「こう書けばこんな風になるんだ」
「どうしてこんな結果になったのだろう?」
と一つずつ、自分で説明できるレベルまで知識を落とし込んでください

こんなものだ、と流していると、いつか迷路に迷い込みます。何がわからないかわからなくなってしまいます。
一旦、分からなくなってしまうと、学習を逆戻りさせる必要が出てきて、余計な時間がかかってしまいます。
急がば回れ、なのです。

オンラインスクールで学ぶ

プログラミングを学べるオンラインスクールがたくさんあります。
そのスクールを利用して学ぶと、参考書や書籍を使って学ぶよりも早く的確に学ぶことができます。

参考書や書籍で学ぶ場合は、すべてを自分で判断して学習を進めなければいけません。

・この本でいいのだろうか
・この順番で学んでいいのだろうか
・他に知識が不足しているところは何だろうか

そういったことを意識しながら、毎回書籍を選ぶのは大変です。
何より、わからないところが出てきたら自己解決しなければいけません。それはかなりつらいです。

エラーを出さないで学ぶ、ということは絶対に無理なので、エラーが出たら対処しなければなりません
それなのに、自分のエラーは意外と自分では原因を突き止めるのに時間がかかります。
思い込みがあるのか、なぜか解決できなくて、ずっと悩み続けることもあります。

オンラインスクールを利用する場合は、学習の方法、順序をプロと相談しながら進めることができます
もちろん、エラーやわからないところがあったら、質問することができます
これはとても心強いし、時短にもつながります。

ただ、オンラインスクールを利用して学ぶとしても、出来るだけ自分で調べて解決することを心掛けてください
教えてくれる人がいるからと言って、いつもその人を頼っていたら、自分で解決できなくなってしまいます

オンラインスクールの先生やメンターさんが、仕事の時もずっと一緒に作業してくれるわけではないのです。

困ったときに、本でもネットでもコミュニティでもなんでもいいので、解決できる手段を持っておくことは大切です。
今のうちにそういった手段を用意しておきましょう。

まとめ

Webの勉強を始めようと思ったら、必ず始めに目にするHTMLとCSS。
この2つは避けて通れません。

ご自身に合った学習方法を見つけて、実際に手を動かしながら、知識を落とし込んでくださいね!
最初はその量に驚くかもしれませんが、大丈夫です!
理解しながら学習を進めると、自然と覚えていきます。