ワイヤーフレームのようにサイトの「あるべき姿」を定義する方法は分かったけれど、実際に情報をブラウザに表示する方法は？無論、コードのお世話になるしかない。ツールまかせにしてきた人も、この機会にちょっと中身をのぞいてみてはどうだろう。テキストエディターだけでページを作る簡単なエクササイズに挑戦してみよう。

コードの中身は2部構成

　HTMLやXHTMLなど、サイトを構築する手段であるソースコードの構成は共通している。前半にデータそのものの振る舞いや種類などを定義する、いわゆるメタ情報群を記述する部分を記述し、後半にはブラウザ上に表示される文字や画像を盛り込む本文を記述した2部構成の体裁だ【図１】。
図1 2部構成を持つコードの状態。コードはタグと呼ばれる部分が半角英数字による記述となり、日本語の全角文字は本文箇所（文字情報）に対して行う。もっぱらブラウザに表示されるのは後半のボディ部分だ

　前半部分は視覚的にブラウザへ反映されない要素が多いので、レイアウトの「見栄えの問題」ばかりに集中しているとつい軽視しがちな部分ではないだろうか。しかし、サイトをあたかもアプリケーションのようにネットの世界で活躍させるためにはとても大事な記述ばかりがここに集中することを意識したい。一方、コードの後半、いわゆるボディといわれる部分は、見出しや本文、画像など、コンテンツを秩序立てて盛り込むための部分となる。

　こうしたコードを適切に記述して使い勝手の良いサイトに仕立て上げるには幅広い知識が必要となるので、プロジェクトの規模によってはプロのコーダーの力を借りてブラッシュアップすることも検討しなければならない。多くのサイト構築ツールは「見栄えの問題」つまりコードの後半に関係する部分をいかに効率的に作るかに機能が集中しているので、細かいところはどうしても生の記述を確認しながらの作業となる。

サイトをメディアにする部品は２つある

　前半部分の詳しい役割や解読方法については後まわしにして、情報をブラウザに表示するためのデータ構成を確認しよう。情報はサイトに秩序立てて表示されることではじめてメディアになるわけだが、そのためには(X)HTMLと呼ばれる情報の構造を定義したコードと、その容姿（スタイル）を定義したスタイルシート（CSS）というコードの2種類が必要だ【図２】。特にXHTMLのように、人間が目で確認するための情報だけでなく、システムにとっても情報の構造を把握しやすく工夫されたコードでは、構造とスタイルは区別して作ることになっている。

図2 コンテンツ（XHTML）とスタイル（CSS）の両方を反映したものがメディア（サイト）だ。その他XHTMLを核としてJavaScriptなどのスクリプト要素やFlash、Webアプリケーションのコードなどが加わってサイトを構成する

　ところで機械にも分かる情報の構造・・と一口に言ってもなかなかピントこないのではないだろうか？新聞の紙面を想像してみよう。私たちは普段、大見出しで欲しい内容を探して、本文を読んでいる。これは大見出しが見てそれと分かるスタイルを持っているからできる技なのだが、情報をコードやテキストとして処理しているだけのシステムにとってはページの「見かけ（スタイル）」など分からない。そこで見出しを表すHタグなどをテキストデータに与えて中身を定義してやるわけだ。コードで見出しと本文を区別することで、システムは情報を適材適所に振り分けられるようになる。本コーナーの第一回目でも言及したが、マークアップは本来こうした情報の定義に使うものなのだ。

　とはいってもサイトの一般的な用途はユーザーが目で見て中身を確認するものであろう。ネット上の仮想店舗にも位置付けられる企業サイトなら、企業パンフレットと同等かそれ以上の見た目の美しさは不可欠である。また、見やすさや分かりやすさという視覚的な要件もスタイルが作り出すものだ。それらを実現するために必要な工夫はすべてスタイルシートのほうに定義する。スタイルに含まれる要素は文字のサイズ設定から色、文字と画像の位置設定まで見かけに関する工夫のすべてと考えて良い。

　ところで過去のHTMLでは文字の色や大きさを始め、段組レイアウトの実現に至るまでスタイルのほとんどをHTMLタグの応用で実現していた。しかしその方法ではシステムが構造を確実に把握できるコードを作るのは難しい。サイズの大きなテキストに対して見かけ上大見出しの役割を与えても、Hタグでマークアップしない限りシステムはその文字を見出しとは理解できない。旧HTMLでは大きな文字を表示したいという目的でHタグを使うケースもあったほどだが、こういうタグの目的を無視した使い方こそ、スタイルと構造の矛盾というわけだ。

　また、HTML側にスタイルの定義を含めたHTMLコードは、PC用のブラウザでしか正常にレンダリングできない可能性が高く、汎用性に欠ける。ネットに接続可能な機器の種類も増え、ネットメディアの応用範囲も広がった現在では、情報の構造は共通に使用可能な状態にしておき、スタイルだけ機器の数だけ用意するほうが効率的だ。そういった理由もあって現在はスタイルと構造を厳格に分離する方法である、XHTMLの採用が推し進められている。まずこの点を理解することが、使えるサイト制作への近道になる。