こんにちは、grillon designです。
「Web制作100日チャレンジ」3日目。
今回学び直したのは、Web制作を始めたばかりの頃に、私が最初につまずいたこと。
それが、
「HTMLとCSSって、何が違うの？」
という超基本的な疑問でした。
どちらも画面には文字やコードがずらっと並んでいて、最初は正直、
「え、どっちも同じようなものじゃないの？」
と思っていました（笑）。
でも、実際に学習していくと、HTMLとCSSにはそれぞれ明確な役割があります。
今回は、3人の子育てをしながらスキマ時間でWeb制作を学んでいる私が、実際につまずいて、理解できたときの感覚をそのまままとめてみます。
同じように、
「Web制作を始めたいけど、HTMLとCSSの違いが分からない」
「初心者だけど独学でWeb制作を学びたい」
という方の参考になれば嬉しいです。
【結論】HTMLは「骨組み」、CSSは「デザイン」
まずは結論から。
HTMLとCSSの違いは、ざっくりイメージすると、
HTML＝Webページの骨組み・構造
CSS＝Webページの見た目・デザイン
です。
家に例えるなら、
HTML → 家の骨組み
CSS → 壁紙・家具・インテリア
というイメージ。
この違いを理解しておくだけで、HTMLとCSSの役割がかなり分かりやすくなります。
HTMLとは？Webページの「骨組み」を作るもの
HTMLは、Webページの構造や内容を作るための言語です。
家を建てるときに、
「ここが玄関」
「ここがリビング」
「ここがキッチン」
と、家の構造を作っていくのと似ています。
Webページでも、
- ここは見出し
- ここは本文
- ここは画像
- ここはリンク
というように、ページの中にどんな要素があるのかをHTMLで表します。
たとえば、こんなコードです。
<h1>見出しです</h1>
<p>ここは本文が入ります</p>
<h1>は見出しを表すタグ。
<p>は文章の段落を表すタグです。
この段階では、まだ色やデザインを細かく設定していません。
つまり、Webページの中身や構造を作っている状態です。
家でいうなら、まだ骨組みができたところ。
これがHTMLです。
CSSとは？Webページの「見た目」を整えるもの
では、CSSは何をするのでしょうか？
CSSは、HTMLで作ったWebページの見た目やレイアウトを整えるための言語です。
家で例えるなら、骨組みができたあとに、
- 壁紙を貼る
- 家具を置く
- 照明をつける
- 部屋の色を決める
- 家具の配置を整える
といった作業をするイメージです。
Webページなら、
- 文字の色を変える
- 背景に色をつける
- 文字の大きさを変える
- 要素を横並びにする
- 余白を調整する
- レイアウトを整える
といったことをCSSで行います。
たとえば、先ほどのh1にCSSを指定すると、
h1 {
color: pink;
font-size: 32px;
}
見出しの文字色や大きさを変えることができます。
HTMLだけではシンプルだったページが、CSSを使うことで一気にデザインされたWebページらしくなっていきます。
「あ、HTMLとCSSってこういう役割分担なんだ！」
私が一番スッキリしたのも、この部分でした。
HTMLとCSSの違いを家づくりで考えてみる
ここまでの内容を、家づくりに置き換えて整理してみます。
| 役割 | Web制作 | 家づくり |
|---|---|---|
| 構造 | HTML | 家の骨組み |
| デザイン | CSS | 壁紙・家具・インテリア |
つまり、
HTMLで「何があるか」を作り、CSSで「どう見せるか」を整える。
という関係です。
たとえばブログ記事なら、
HTMLで、
「ここはタイトル」
「ここは見出し」
「ここは本文」
「ここは画像」
という構造を作ります。
そこにCSSを使って、
「タイトルを大きくしよう」
「見出しに線を入れよう」
「画像の幅を調整しよう」
と見た目を整えていきます。
この2つを分けて考えると、かなり理解しやすくなります。
実際に学んで「なるほど」と思った3つのこと
実際にHTMLとCSSを学び直してみて、特に理解が深まったのがこの3つです。
① HTMLだけだと、かなりシンプル
HTMLだけで作ったWebページは、正直かなり地味です。
文字が並んでいて、
「これがWebサイト……？」
と思うくらいシンプル。
「Web制作って、思ってたより地味かも……」
最初はそう感じるかもしれません。
でも、それはまだCSSでデザインしていないから。
HTMLはあくまでWebページの構造を作る役割なので、見た目がシンプルなのは当然なんです。
ここが分かると、「HTMLとCSSって何のために2つあるの？」という疑問も少しずつ解消されていきました。
② CSSで見た目を大きく変えられる
次に「便利だな」と思ったのが、CSSです。
HTMLの構造を大きく変えなくても、CSSを書き換えることでWebページの見た目をかなり変えることができます。
文字色を変えたり、
文字サイズを変えたり、
余白を調整したり、
要素を横並びにしたり。
同じHTMLでも、CSSを変えるだけでサイトの雰囲気をガラッと変えられます。
「Webデザインって、こういうことなんだ！」
と、少しずつ実感できるようになりました。
③ 役割が分かれているから修正しやすい
そして、HTMLとCSSの役割が分かれていることには、もう一つメリットがあります。
「どこを直せばいいのか」が分かりやすいことです。
たとえば、
「文章を変更したい」
→ HTMLを修正する
「文字の色を変えたい」
→ CSSを修正する
「余白を広くしたい」
→ CSSを修正する
というように、目的によって触る場所を切り分けられます。
初心者の頃は、この切り分けが分からなくて、
「あれ？どこを触ればいいんだ？」
と、あちこち触ってしまうこともありました（笑）。
でもHTMLとCSSの役割を理解すると、
「これはHTMLの仕事」「これはCSSの仕事」
と考えられるようになります。
これだけでも、Web制作の勉強が少しラクになりました。
HTMLとCSSは「どちらも必要」
ここまで見ると、
「じゃあHTMLとCSS、どっちを先に勉強すればいいの？」
と思うかもしれません。
私の場合は、まずHTMLの基本を理解してからCSSを学んだことで、それぞれの役割がより分かりやすくなりました。
HTMLでWebページの構造を作る。
↓
CSSで見た目を整える。
この流れを実際に手を動かしながら体験すると、
「なるほど、こうやってWebページができていくんだ」
と理解しやすくなります。
もちろん、実際のWeb制作ではHTMLとCSSは密接に関係しています。
だからこそ、最初から完璧に理解しようとするのではなく、まずは
HTML＝構造
CSS＝見た目
と覚えておくことから始めれば十分だと思います。
子育ての合間の学習だからこそ「分かった瞬間」が嬉しい
私は3人の子育てをしながら、スキマ時間を使ってWeb制作を学んでいます。
まとまった時間を確保するのはなかなか難しく、
「今日は30分だけ」
「子どもが寝たあとに少しだけ」
という日も多いです。
だからこそ、一度に全部理解しようとは思わず、
「今日はここまで分かった！」
を積み重ねるようにしています。
今回のHTMLとCSSの違いも、最初からスッと理解できたわけではありません。
でも、少しずつコードを書いて、
「これはHTMLで構造を作っているんだ」
「こっちはCSSで見た目を変えているんだ」
と分かるようになると、バラバラだった知識が少しずつつながってきました。
この「分からない」が「分かった」に変わる瞬間が、勉強していて一番嬉しいところかもしれません。
HTMLとCSSの違いを理解すると、Web制作がもっと分かりやすくなる
今回改めて学んで感じたのは、
「最初に基本的な役割を理解しておくって大事だな」
ということです。
HTMLとCSSは、Web制作を始めるとかなり早い段階で出てくる言葉です。
だからこそ、
「HTML＝なんかコードを書くもの」
「CSS＝なんかデザインするもの」
くらいの理解で先に進んでしまうこともあります。
私もまさにそうでした。
でも、
HTMLはWebページの構造を作る
CSSはWebページの見た目を整える
と理解できるだけで、その後に出てくるコードも少しずつ意味が分かるようになります。
「なんとなく使う」のではなく、
「これは何のために書いているんだろう？」
と考えながら学ぶ。
今回の100日チャレンジでは、そんな学び方を大切にしていきたいと思います。
まとめ｜HTMLとCSSは「骨組みとデザイン」で考えればOK
今回学んだHTMLとCSSの違いを、もう一度まとめます。
HTML＝Webページの構造・骨組み
CSS＝Webページの見た目・デザイン
家に例えるなら、
HTML → 家の骨組み
CSS → 壁紙や家具などの内装
というイメージです。
最初から細かい文法やタグを全部覚える必要はありません。
まずは、
「HTMLで構造を作って、CSSで見た目を整える」
という大きな役割を理解する。
それだけでも、Web制作の勉強を始めるときのハードルはかなり下がると思います。
私自身、まだまだ学び直しの途中。
3人の子育てをしながら、毎日少しずつですが、できることを増やしていきたいと思います。
同じように、
「Web制作を始めたいけど、何から勉強すればいいか分からない」
「HTMLとCSSの違いがよく分からない」
という方の、最初の一歩になれば嬉しいです。
Web制作100日チャレンジ、明日もコツコツ続けます！
コメント