「サーバー」「ドメイン」と続いて、今回はいよいよホームページの「中身」のお話に入っていきます。
前回までで、ホームページに必要な土地（サーバー）と住所（ドメイン）の話ができました。土地を借りて、住所も決まった。となれば、いよいよ家そのものを建てていく番です。
今回登場するのは HTML と CSS という、ふたつの言葉。少しなじみが薄いかもしれませんが、安心してください。前回までと同じように、「家を建てる」イメージを軸に、ゆっくり進めていきます。
前回までを振り返りたい方はこちらから。 👉 わかりづらいWebのこと – サーバー編 – 👉 わかりづらいWebのこと – ドメイン編 –
ホームページは「家」に例えられる（おさらい）
ホームページは、家を建てる作業によく似ています。
- 土地 ＝ サーバー（データを置く場所）
- 住所 ＝ ドメイン（URLのこと）
- 骨組み・外観・装飾 ＝ HTML・CSS（今回のテーマ）
- 家の中の機能（家電） ＝ JavaScript（次回）
土地と住所が用意できたら、その上に家を建てて、外観を整え、装飾を仕上げていく。それがHTMLとCSSの役割です。
HTMLとは——家の「骨組み・間取り」のはなし
HTML（エイチティーエムエル） は、ホームページの骨組みと間取りを作る言語です。
家を建てるとき、まずは柱を立て、壁を組み、屋根をかけ、「ここがリビング、ここが寝室、ここに窓をつけよう」と部屋割りを決めていきますよね。HTMLが担当するのは、ちょうどこの部分です。
たとえば、ホームページに「上にタイトルがあって、その下に文章があって、写真が並んで、最後に問い合わせのボタンがある」——こうした配置と役割を決めていく作業がHTMLです。
ひとつひとつの要素に「これは見出しですよ」「これは段落ですよ」「これはリンクですよ」「ここに画像が入りますよ」とラベルを付けていくイメージ。お弁当箱に仕切りを入れて、「ここがおかず、ここがごはん、ここは果物」と整理していく感じに、ちょっと似ています。仕切りがあるから、何がどこにあるか一目で伝わるんですね。
ただ、HTMLだけで作ったホームページは、コンクリート打ちっぱなしの家のような状態。確かに家ではあるけれど、ちょっと殺風景です。
CSSとは——家の「外観と装飾」のはなし
CSS（シーエスエス） は、HTMLで建てた骨組みに、色・形・素材を加えていく言語です。
打ちっぱなしの家に、壁紙を貼り、床材を敷き、外壁の色を塗り、家具を配置していく。CSSが担当するのは、ちょうどこの部分です。
たとえば——
- 文字の大きさやフォントを整える
- ボタンに丸みや影をつけて、押せる感じを出す
- 写真をきれいに整列させる
- 余白をとって、すっきり見せる
- スマートフォンでも見やすいように、配置を切り替える
ホームページを見たときに感じる「カッコいい」「かわいい」「やさしい」「ミニマル」といった印象のほとんどは、CSSの仕事です。
同じ間取り（HTML）でも、CSSの組み合わせ次第で、和モダンにも、北欧風にも、ガーリーにも、ミニマルにも変身します。私たちデザイナーが、いちばん腕を発揮するのもこの部分です。
実はCSSのおもしろいところは、1ピクセル単位で表情が変わること。たった2ピクセル余白を広げただけで、急に上品な印象になったり。角の丸みを少し強くしただけで、ぐっとやさしい雰囲気になったり。一見ささいに見える調整の積み重ねが、サイト全体の「らしさ」を作っていきます。「なんとなく素敵」と感じるサイトの裏側には、たいてい、誰かの細やかな手仕事があるんです。
なぜHTMLとCSSは「分かれている」のか
ここでこんな疑問が湧くかもしれません。
「分けないで、最初からまとめてしまえばいいのに」
ごもっともです。でも、構造（HTML）と見た目（CSS）を分けておくことには、ちゃんとした理由があります。
たとえば、お部屋の模様替え。家具やカーテンを入れ替えるだけで、雰囲気はガラッと変わりますよね。骨組みはそのまま、装飾だけを差し替えられる。CSSの仕組みも、まさにそれです。
「もう少しシンプルな雰囲気にしたい」「春らしい色味に変えたい」と思ったとき、HTMLには触らず、CSSだけを書き直せばOK。あとから手を加えるときの身軽さが、ぜんぜん違ってくるんです。
これは、ホームページを長く育てていくという視点でも、とても大切な仕組みです。最初に作って終わり、ではなく、季節やキャンペーンに合わせて雰囲気を変えたり、ちょっとずつ磨き上げていったり。HTMLとCSSが分かれているからこそ、そうした「小さな手入れ」が無理なく続けられるんです。
CSSが作る「第一印象」のはなし
少し話が広がりますが、ここがCSSのいちばんおもしろいところなので、もう少しだけお付き合いください。
ホームページを訪れた人が瞬時に感じる「なんとなく信頼できそう」「ここ、自分のことを分かってくれそう」「洗練されてる」——そういった直感的な印象のほとんどは、CSSによって作られています。
たとえば、同じ「クリニック」のサイトでも、CSSの使い方でこれだけ印象が変わります。
- 白を基調に余白を広くとり、フォントを細くすると → 「清潔感・安心感」
- ベージュとブラウンで統一し、フォントを丸くすると → 「温かみ・親しみやすさ」
- ネイビーと白でグリッドをきっちり揃えると → 「信頼・専門性」
骨格（HTML）は同じでも、装飾（CSS）の選び方ひとつで、訪れた人が受け取る印象はまったく変わります。
「誰に、何を伝えたいか」——デザイナーの仕事とは、その問いに向き合いながらCSSを一つひとつ選んでいくことでもあります。「なんとなく素敵」に見えるサイトの裏には、たいてい、意図を持った細やかな選択が積み重なっているんです。
次回：家ができたら、家電を入れていく
ここまでで、ホームページに必要な「土地」「住所」「骨組み」「外観・装飾」の話ができました。家を建てる準備は、ほぼ完了です。
でも、家って、それだけではまだ「住める」とは言いきれませんよね。スイッチを押すと点く照明、近づくと開く自動ドア、ピンポンと鳴らすと応えてくれるインターホン——そんな家電や仕掛けがあって、はじめて暮らしが便利になります。
しかも、家電って、最初から全部そろっていなくてもいいんです。住みはじめてから「やっぱり食洗機がほしい」「ロボット掃除機を入れてみようかな」と、必要に応じて少しずつ買い足していけばいい。ホームページの「動き」も、それと同じです。
次回はその「家電」にあたる JavaScript のお話。シリーズ最終回、よかったらまた覗いてみてくださいね。
おわりに
HTML・CSSは、私たちデザイナーが日々もっとも近くで向き合っている言葉です。「ここはもう少し余白がほしい」「この色味、ちょっとだけ落ち着かせたい」——そんな細かな調整をひとつずつ積み重ねて、ようやく一軒のホームページが立ち上がっていきます。
「自分のサイト、もっとこうしたいんだけど」「なんとなく違和感はあるけれど、どこを直せばいいかわからない」——そんなときも、ぜひお気軽にご相談ください。3line Designは、家を建てて終わりではなく、長く心地よく住み続けられる状態を一緒に育てていく、伴走型のパートナーでありたいと思っています。