こんにちは、いつも「かつコード」のサイトをご覧いただきまして、ありがとうございます。
毎週金曜日にブログとしてリポートをお伝えしております。
16回目の本日は、「HTML・CSSって何？」についてお伝えします。
HTML・CSSとは？ホームページの「骨組み」と「内装」をわかりやすく解説
ホームページ制作について調べていると、
「HTML」
「CSS」
という言葉を目にすることがあります。
「HTMLで作っています。」
「CSSでデザインしています。」
と言われても、
「何が違うの？」
と疑問に思う方も多いのではないでしょうか。
この記事では、HTMLとCSSの役割を、専門用語をできるだけ使わずにご紹介します。
HTMLは「家の骨組み」
ここまでの記事では、
- ドメイン＝住所
- サーバー＝土地・建物
- SSL＝鍵付きの玄関
- レスポンシブデザイン＝どんな人でも入りやすい入口
- CMS＝管理室
という例えでホームページを説明してきました。
では、建物そのものは何でできているのでしょうか。
家を建てるとき、最初に作るのは柱や壁、部屋などの骨組みです。
ホームページでも同じように、
文章や見出し、画像、ボタンなどを配置する「土台」があります。
それがHTMLです。
HTMLは、ホームページの骨組みを作る役割を担っています。
CSSは「内装やインテリア」
家は骨組みだけでは完成しません。
壁紙を貼ったり、
床を選んだり、
照明や家具を配置したりして、
初めて住みやすい家になります。
ホームページでも同じです。
文字の色。
背景色。
余白。
ボタンのデザイン。
フォント。
こうした見た目を整える役割がCSSです。
つまり、
HTMLが家の骨組みなら、
CSSは壁紙や床、家具などの内装と言えるでしょう。
骨組みだけでは少し寂しい
例えば、
新築の家でも、
柱だけの状態では住めません。
逆に、
内装だけを準備しても、
骨組みがなければ家は建ちません。
ホームページも同じです。
HTMLだけでは情報は表示できますが、
とてもシンプルで読みづらいページになります。
そこへCSSを加えることで、
見やすく、美しく、使いやすいホームページになります。
HTMLとCSSはいつも一緒に使われる
ホームページ制作では、
HTMLだけ、
CSSだけ、
ということはほとんどありません。
HTMLで、
- 見出し
- 文章
- 写真
- ボタン
などを配置し、
CSSで、
- 色
- 大きさ
- 配置
- デザイン
を整えていきます。
二つは、それぞれ役割が違うものの、セットで使われることがほとんどです。
デザインを変えても骨組みは同じ
例えば、
同じ間取りの家でも、
- 和風
- ナチュラル
- モダン
- 高級ホテル風
など、内装によって印象は大きく変わります。
ホームページも同じです。
HTMLはそのままで、
CSSだけを変更すると、
まったく違うデザインのホームページに見えることもあります。
だからこそ、デザインの変更がしやすい仕組みになっています。
HTMLやCSSを覚える必要はある？
ホームページを運営する方であれば、
HTMLやCSSを細かく覚える必要はありません。
CMS（WordPressなど）を利用している場合は、
管理画面から文章や画像を更新できるため、
HTMLを書く機会はほとんどありません。
ただ、
「ホームページは骨組みとデザインでできている。」
という考え方だけ知っておくと、
制作会社との打ち合わせでも理解しやすくなるでしょう。
ホームページは見た目だけではない
ホームページというと、
デザインばかりに目が向きがちです。
もちろん、見た目は大切です。
しかし、
読みやすい文章。
分かりやすい構成。
必要な情報が見つけやすいこと。
これらもホームページでは重要です。
HTMLという土台がしっかりしているからこそ、
CSSで美しく整えたデザインも活きてきます。
まとめ
HTMLはホームページの骨組みを作る役割を持っています。
一方、CSSは色やデザイン、レイアウトなどを整える役割を持っています。
ホームページを家に例えるなら、
HTMLは柱や壁などの骨組み。
CSSは壁紙や床、家具などの内装です。
どちらか一方だけでは、使いやすく魅力的なホームページにはなりません。
ホームページは、「情報を正しく伝える骨組み」と、「見やすく整えるデザイン」の両方がそろって初めて、お客様にとって分かりやすく、使いやすいものになります。
3分で理解！HTML・CSSとは？
- HTML＝ホームページの「骨組み」
- CSS＝ホームページの「内装・インテリア」
- HTMLが文章や画像などの構造を作る
- CSSが色やレイアウト、デザインを整える
- 両方が組み合わさって、見やすく使いやすいホームページになる