目次
構造を作るHTML、見た目を整えるCSS。この役割分担がWebサイトを作っています
ブログやホームページを自分で触ってみようとすると必ず出てくる「HTML」と「CSS」という言葉。
「なんとなく難しそう……」と距離を置いている方も多いかもしれませんが、実はこれ、僕たちの「暮らし」に例えると驚くほどシンプルに理解できるんです。
役割を分けることで、メンテナンスが劇的に楽になるんです
なぜ、わざわざ2つの言語に分かれているのか。それは、一箇所を変えれば全体が変わるような「効率の良さ」を求めた結果です。 一昔前までは、これらが混ざり合って混沌としていた時期もありましたが、今は「骨組み」と「装飾」を完全に分けるのが通常です。 これにより、文章の中身を変えずにデザインだけを一新したり、逆にデザインはそのままで内容だけを更新したりすることが、自在にできるようになりました。
HTMLは「大工さんの仕事」、CSSは「内装・インテリアの仕事」
これを家づくりに例えると、一気にイメージが湧くはずです。
- HTML（エイチティーエムエル）は「家の骨組み」
ここに玄関があって、ここにリビングがあって、ここに窓がある……という「構造」を決めるのがHTMLの役割です。 大工さんが柱を立てるように、「ここは見出し」「ここは本文」「ここは画像」と、情報の配置を決めていきます。これがないと、Webサイトは形を成しません。 - CSS（シーエスエス）は「内装・インテリア」
骨組みができた家に、壁紙を貼ったり、カーテンを選んだり、照明を置いたりするのがCSSの役割です。 「文字の色は緑に」「背景に写真を敷く」「ボタンを角丸にする」。こうした「自分らしさ」を表現するのがCSSの仕事。大工さんの作った構造に、彩りを吹き込むインテリアコーディネーターのような存在ですね。
HTMLで「何を伝えるか」という骨組みをしっかり作り、CSSで「温かみ」を感じる色や余白をデザインしています。この2つが手を取り合うことで、ようやく「自分らしいWebサイト」が完成するのです。
見た目比較の参考例
1）HTMLのみ
2）CSS追加
More Green
菌ちゃん畑レポート
今日の土の状態は良好です。微生物たちが活発に働いています。
トピック
今日の天気は快晴です。
タマネギの芽が出てきました。
HTMLとCSSを知ると、WEBは“触れる世界”になる
HTMLとCSSを理解すると、WEB制作がブラックボックスではなくなります。
テーマのデザインが崩れた理由も、表示がズレる原因も、なんとなく見当がつくようになります。
コードを書かなくてもいい。
でも、仕組みを知っているかどうかで、WEBとの距離感はまったく変わります。
「ホームページは専門家のもの」から「少し触れば、自分でも調整できるもの」へ。
こうした知らなくても使えるけど、知ると一気に楽になる知識を、これからも少しずつ紹介していきたいと思います。
ではまた。
