-
HTML/CSS
- css
- html
【HTMLとCSSの関係】web制作の勉強を始める前に読む話
HTMLとCSSについて学習を始めたばかりのころは両者がどのような関係にあるのかなかなかすぐにイメージをすることができないものです。
今回は、HTMLやCSSを全く知らない素人でも両者の関係性が分かるように、専門用語を極力使わず、かつイメージをしやすいように解説します。
web制作にものづくりのイメージはない人も多いかもしれませんが、行程が似ているため、何かをつくることが好きな方には実はピッタリです。
今回の話を知っておくことで、今後web制作を学習し始めた際に、自分がどの部分でつまずいているのかを仮説を立てながら解決していくことができるのではないでしょうか。
HTMLは基礎と骨組み！CSSがなければほぼ使い道がない
HTMLはHypertext Markup Language（ハイパーテキストマークアップランゲージ）と呼ばれるもので、マークアップ言語に分類されます。
HTMLの設計
実際に家を建てるにはまずは何をするでしょうか。
どんな家でも急にレンガを積み始めることはありません。必ずと言っていいほど、「設計図」を書き出します。HTMLも同様で、紙とペンでどのようなサイトをゴールとするかを書き出し、サイトの具体的な設計を予め考えてからコードを打ち始める制作者も少なくありません。
素材集め・計画
さて、設計図が完成しました。それでもまだ家を建て始めることはできません。
設計図通りの家を作るには、どんな材料が必要か？作業日数はどのくらいか？誰がどの部分を作るのか？どこから着手していくのか？などなど、考えるべきことが山ほどあります。
web制作も同様で、多くの制作者がこの段階で素材を集めたり、納期に間に合うかを確認し、間に合わなければ一部を外注したり、作業を分担したほうがよい場合などは役割分担などをして、制作に入る前の準備をします。
基礎作りとHTML基本構造
やっと準備ができたので、まずは土台となる基礎作りから始めます。HTMLでこの基礎に当たる部分が、「基本構造」と呼ばれる部分なのですが、一軒家の基礎部分と同様に傍目からは目にすることができません。
HTMLを記述するうえで、基本構造はなくてはならないのですが、こちらもwebサイトには直接表示されないものの、裏方的に非常に重要な役割を担っています。
ここではこれ以上触れませんが、基本構造についてもっと体系的に知りたいという方は参考書を1冊購入するのもおすすめです。
柱と部屋
基礎工事が終わった後は、ようやく柱などの骨組みに着手していきます。
柱は家屋のなかでも基礎の次に大切なパーツとも言えます。
HTMLにおいて、柱的な役割をするのは基本構造と呼ばれる物の中でも重要な役割を担うタグになります。<h1>~<h6>などを代表とする、見出しタグは分かりやすい例です。
また、<header>、<main>、<footer>などで指定された範囲は、家で例えると、「寝室」「リビング」「子ども部屋」「風呂」「トイレ」など一つの空間・部屋に該当し、それぞれに役割を持っています。
CSSは屋根・床・壁！HTMLがなければ存在できない
やっとHTMLができました。続いて、CSSです。CSSはCascading Style Sheets（カスケーディングスタイルシート）と呼ばれ、HTMLで作った構造に見た目の装飾を施していきます。
家を建てるとなれば、柱や基礎はそう簡単に変えることはできないですが、屋根や床・壁であれば家を立て替えるよりは容易です。
CSSはコードの変更をすることで、簡単に色・配置などの見た目の部分を作り変えることが可能です。
部屋（ボックス）の大きさや配置を決める
通常家を建てるとなると、基礎作りや柱を立てる段階で、部屋の大きさや配置はほとんど決まってしまいます。
web制作が家を建てる手順と大きく異なる点は、この「大きさ」や「配置」は後から決定することができるということです。
コンテンツの幅や高さを指定したり、余白を作ったりするのはCSSの役割となっています。
目に見えるデザインを決定する
屋根や床といったパーツは、部屋の大きさや配置を決めてからでなければ作ることはできません。
web制作でもここでようやく背景色、背景画像を適用するといった作業に入ることが多いですが、実際には、表示されるページを見ながら色の入る範囲や画像の大きさの微調整をしていきます。
またこれと同時にテキストの装飾も行っていき、無機質なページをより分かりやすく、見栄えが良くなるようにします。
オプションをつける
web制作も家づくりと同様に、本体が完成した後に様々なオプションを施すことができます。
例えば、クリックをしたときにテキストの色や背景色に変化を与えたり、カーソルを合わせると画面上に動きが出たり。
なくても問題なくサイトが表示されるが、あるとより使いやすい機能や、見やすいサイトになるという装飾は、初心者であればこの段階で追加するのもありでしょう。
HTMLとCSSの関係は一言で表すなら「構造と装飾」
HTMLとCSSの関係は言葉通り、構造をつくり、装飾を施すことにあります。
建物と同様、構造のみでも存在しうるので、HTMLのみでもページを表示させることは可能です。
しかし、それだけでは非常に味気ない白黒のテキストになり、頻繁に訪れたくなるサイトとは程遠い仕上がりになってしまいます。骨組みだけの家に誰も住むことができないのと同様です。
HTMLの構造そのものに、CSSで人間がとっつきやすいサイトにするための装飾を行うことで、私たちが普段利用するような便利なwebサイトが完成するのです。
ただし、近年ではHTMLとCSS以外にもwebページをつくるための様々な言語が存在し、それらは複雑に絡み合って1つのものが作り上げられています。
複数の言語を使ったサイトを完成させるためには、イメージしたサイトを作成するにあたり、どのような言語を使用する必要があるのかを考えるということも設計段階で必要な行程だと言えるでしょう。
このように、一筋縄ではいかないweb制作の世界ですが、入り口はHTMLとCSSであることは間違いありません。
HTML、CSSの使い方について詳しく知りたいという方は、以下の記事も合わせてお読みください。
