HTMLとcss、どちらもWEBを制作する上で必要不可欠なものです。

初心者のうちは、HTMLとcssと言われると「なんで2つ必要なんだろう？」と思ったりします。

HTMLとcssの違いについて、こっそり復習しておきましょう。

参考記事：初心者WEBデザイナーがよく悩むcssのidとclassの違いは？

着せ替え人形のイメージ

まずはHTMLとcssについて簡単にイメージしてみましょう。

HTMLは着せ替え人形本体、cssは人形の目鼻や髪、着せ替え用の洋服や小物をイメージしてみてください。

スポンサーリンク

HTMLがなければ、人形自体が存在しません。HTMLがあれば人形がどんな形をしているかはわかりますが、人形自体の個性はありません。

HTMLがあっても、cssがなければ、人形はのっぺらぼうの裸のままなのです。

HTMLとcssが揃って初めて、それが青い瞳と金髪を持つ華やかなドレス姿の人形だということがわかるようになるのです。

HTMLとcssの役割の違い

cssとは、Cascading Style Sheets～カスケーディング・スタイル・シートを略したもので、HTMLやXMLで表される要素のそれぞれをどのような形で表示（修飾）するかを指示するものです。

1994年にホーコン・ウィウム・リー氏により提唱され、現在ではW3Cによる仕様の一つとして広く普及しています。

Wikipediaでは、「文書の構造と体裁を分離させるという理念を実現する為に提唱されたスタイルシートの、具体的な仕様の一つ」と難しく書いてあります。

スポンサーリンク

簡単に言えば、Webサイトの本質的な部分はHTMLで表現し、デザインなどの装飾的な部分はcssで補うということです。

具体的には、背景の色、使用するフォントとその色や大きさ、リストの頭につけるアイコンなどといったデザインの詳細について、cssで一括設定することができるということです。

SEOに効果あり？

HTMLとは別にcssを設定する利点といえば、cssを入れ替えるだけで見た目をとても簡単に変化させることができることでしょう。

これは、PCだけでなくスマートフォンやタブレットなどの様々なメディアが使われるようになった現在において、より重要度を増してきています。

複数のcssを切り替え使い分けることで、それぞれのメディアに合わせて表示を変化させることができることは、WEBサイト制作者の意図した効果を閲覧環境に左右されず確実にユーザーに届けることができるということだからです。

また、cssを使うことは、SEO対策としてもとても有利なものとなっています。

検索エンジンは、正しい書式で作られた綺麗で整理されたコードを重用する傾向があります。

cssを分離したHTML構文は、無駄がなく、検索エンジンにとってもとても理解しやすいものとなるからです。

また、cssを分離することは、メンテナンスの効率も高めます。

私がWEBサイトを作り始めた頃は、cssはまだ今のようなしっかりとした形にはなっていませんでした。

当時は、h1タグの見出しのサイズを修正しようとすれば、HTML内の全てのh1タグに対してひとつひとつ修正を加えていかなければなりませんでした。

この手間のかかる作業が、cssを使用すれば、css内のh1タグ1箇所のみを修正するだけで済んでしまうのです。

すごい！cssって！とcssを覚えた当時、本当に感動したのを覚えています。cssを使うことで、WEB制作の作業効率は格段とアップします。

また、HTMLだけでは表現できなかった細やかな効果も、簡単に表示できるようになってきています。

cssを上手に使い、より魅力的なWEBサイトを作っていきましょう。

スポンサーリンク