WisdomSoft - for your serial experiences.

構造・スタイル・ロジック

HTML は文書の意味と構造を記述するためのマークアップ言語であり、原則としてレイアウト情報やプログラムを含みません。そこで、文書のデザインはスタイルシート、処理はスクリプトと呼ばれる異なるファイルと組み合わせます。

スタイルとロジックを組み込む

HTML に含まれるコードには、デザインは含まれません。HTML の役割は文書構造を記述することであり、文書に含まれる文や画像が、どのような意味を持つかしか記述しません。

しかし、Web や PC がリッチになると同時に Web デザイナーは Web ページに色やフォントなどのレイアウトを組み入れたいと考えるようになりました。これは当然の要求にも思えますが、デザインのために HTML の構造を変えることは意味の破壊に繋がります。例えば、色で飾られた文書は、フルカラーではないディスプレイや色覚障害者が読めなくなる可能性があり、文書の携帯性や永続性に問題を及ぼします。

こうした問題を避けるために、HTML ではデザインを指定するようなコードを非推奨とし、代わりにスタイルシート(style sheet)と呼ばれるデザインやレイアウト情報(すなわちスタイル)を記述した別のファイルと組み合わせる方法を採用しています。

図1 HTMLと他のファイルの組み合わせ
図1 HTMLと他のファイルの組み合わせ

標準的な Web ページは、図1のように文書構造を記述した HTML ファイル、デザイン情報を記述したスタイルシート、そして Web ページを制御するプログラムが記述されたスクリプトの 3 つのファイルの組み合わせて構成されます。

スタイルシートやスクリプトを記述する言語は HTML とは分離されて仕様が決められています。従って、指定したスタイルやスクリプトが有効かどうかは、ブラウザが指定したスタイルシートとスクリプトに対応しているかどうかに依存します。

事実上、スタイルシートは W3C が策定する CSS(Cascading Style Sheets)、スクリプトは ECMA が策定する ECMAScript に習った JavaScript が標準で用いられています。

デザインやプログラムが不要であれば、スタイルシートやスクリプトは必要なく、HTML ファイル単体で Web ページを表示できます。この場合は、ブラウザ既定のスタイルで表示され、プログラムは動作しません。