HTML / CSSとは何かざっくり解説！

【ざっくり言うと】

HTMLとCSSは、Webページを作るための「骨組み」と「見た目」を担当する最強のコンビやで。

どうも、ワイです。

皆さんが今見ているこのブログも、YouTubeも、Googleも、全部この「HTML」と「CSS」という2つの言葉（言語）で書かれています。
プログラミングというよりは、Webサイトの「設計図」みたいなもんです。

なんで2つも必要なの？って思いますよね。
それは、役割が完全に分かれているからです。人間で例えると分かりやすいですよ。

HTML（エイチティーエムエル）：骨組み・構造
「ここに見出しを置く！」「ここに画像を貼る！」「ここにボタンを置く！」と指示します。
人間で言うと、骨や筋肉だけの状態。
これだけだと、白背景に黒い文字が並んでいるだけの、超地味な書類みたいになります。

CSS（シーエスエス）：見た目・装飾
「見出しは赤色にする！」「画像は真ん中に寄せる！」「ボタンは角を丸くする！」と指示します。
人間で言うと、おしゃれな服を着たり、バッチリメイクをした状態。
これのおかげで、サイトが見やすく、カッコよくなるんです。

Aさん（新人）：「うわあああ！！先輩！会社のホームページが壊れました！！」

Bさん（ベテラン）：「ん？どうした？」

Aさん：「見てくださいこれ！デザインが全部消えて、文字と画像が左に寄ってズラーッと並んでるだけになっちゃいました！ハッキングですか！？」

Bさん：「あー、これか。別に壊れてないぞ。ただCSSが読み込まれてないだけだ。」

Aさん：「えっ、これが正常なんですか？」

Bさん：「そう。それがWebサイトの『スッピン（HTMLだけ）』の姿だよ。普段はCSSという『厚化粧』をしてるから綺麗に見えるけど、裏側はみんなそんなもんなんだ。」

Aさん：「へぇ〜！ CSSがないとこんなに質素なんですね…化粧の力ってすげー…。」

私たちが使っている「Chrome」や「Safari」といったブラウザは、このHTML（構造）とCSS（指示書）を読み込んで、一瞬で「はい、こういう画面ですね！」と描画してくれているんです。

ビジネスの現場では、「どんなに裏側のシステムがすごくても、HTMLとCSS（見た目と使い勝手）がショボいと、ユーザーは一瞬で帰ってしまう」というくらい大事な要素です。
いわゆるUI（ユーザーインターフェース）の基本中の基本ですね。

まぁ、そんな感じです。