HTMLとCSSの役割

HTML(HyperText Markup Language)とは、WWW(World Wide Web)上で情報を発信する為に作られた言語で、HTML文書を作成しWebサーバーにアップロードすることで、全世界に向けて情報発信ができます。また、CSS(Cascading Style Sheets)とは、HTMLの表示(デザイン)を修飾する役割を担っています。

構造と表現の分離

従来のHTML(HTML4以前)では、文章の修飾のためのタグが用意されていました。例えば、

<font size="4" color="red">フォントサイズ4,カラー赤</font>

のように、文字サイズを大きくし、文字色を変えることで重要度を表すようなことをしていました。

しかし、本来、HTMLとは文書の構造を記述する為のものです。例で示したfontタグには文字装飾だけの意味を持ち、文書構造的な意味は含まれていませんので、ブラウザやクローラー、人に対して文書構造を解析する妨げとなっていました。

そこで、HTMLにCSSを適用させることで、HTML文書を(余計な情報を含まない)純粋な文書として記述でき、かつブラウザの見栄えでHTMLタグの持つ意味を表現する手法が採られるようになりました。

以下はstrong要素で文章を強調する例です。

HTML

<!-- HTMLにおける強調 -->
<strong>strong要素で文章に強調の意味を持たせる</strong>

CSS

/* CSSで強調を表現する */
strong { font-weight : bold ; color : red ; }

そういった背景もあり、HTML5では見栄えを修飾する為のタグがいくつか廃止されています。

ウェブ標準に準拠したサイト制作を

Webブラウザとは、HTML文書を取得し、構文解析し、人の為に見やすく表示するためのアプリケーションを指します。まさに今あなたがこのサイトを閲覧する為に利用しているソフトウェアです。

主なWebブラウザには、Windows OS に標準インストールされているInternet Explorer, Mac OS に標準インストールされている Safari, その他 Mozilla Firefox, Google Chrome, Opera 等があり、さらにバージョン毎で HTML, CSS の解釈も異なるため、見栄えも異なります。

あなたが利用しているブラウザは一つだけかもしれませんが、あなたが作成したウェブサイトを閲覧する人はどんなブラウザを利用するか分かりません。そういった様々なブラウザに対応する為、HTML と CSS の記述は可能な限りWeb標準に準拠したマークアップを意識する必要があります。

コメントを残す

メールアドレスが公開されることはありません。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)