あのデザイン、どうマークアップする？
山田あかね氏
見た目は同じデザインでもXHTML/CSSのマークアップの方法はいくつもある。どれも間違いではないけど、よりよいマークアップ方法はどれ？――エスカフラーチェの山田あかね氏による「マークアップ選びのコツ」「CSSデザインの実用テクニック」の2つは、入門者だけでなく知識の再確認をしたい人にも参考になる具体的なトピックを挙げて紹介していた。
たとえば、Webページのヘッダーに配置したサイトロゴ画像のマークアップ。<h1>タグで囲み、画像に置換する方法もあれば、<p>や<div>で囲う方法もある。「どちらも正解」（山田氏）ではあるが、「個別ページには主題となるテーマがあるのが一般的。その文書の内容にピッタリの<h1>を使うのが理想」という。山田氏のオススメは、Webサイトのトップページのロゴには<h1>を、トップ以下の個別ページではページ内容にあったタイトルを<h1>にし、ロゴには<div>や<p>を使う、という方法だ。
トップページはh1タグで、個別ページはpタグで括るロゴのマークアップ例
項目名と入力欄が並ぶ一般的なフォームのマークアップも、どのタグを使うか迷うところだ。<table><dl><ul>、どのタグを使ってもレイアウトができるし、考え方としても間違っていないように感じる。山田氏によると「いずれも間違いではない」が、オススメは<ul>タグを使う方法。携帯電話などのモバイルデバイスからのアクセス時に<table>では見づらくなってしまう、というのがその理由だ。
どのサイトでもほぼ必ず設置する、横並びのナビゲーションメニューも、いくつかの作り方がある。リストタグでマークアップしてスタイルシートで横並びにするまでは同じだが、その横並びの指定方法が2つあるのだ。1つは、<li>タグをインライン要素に指定する「display: inline;」、もう1つは<li>タグを「float: left;」で回り込みにする方法だ。ただし、前者の「display: inline;」の方法を使うとインライン要素になるため、幅や高さ、縦方向のmargin、paddingが無効になり、幅や高さを固定するようなナビゲーションが難しい。そこで山田氏は、後者のfloatを使う方法を薦めていた。
ナビゲーションの画像置換。背景画像として配置して後で見えなくする
ナビゲーション部分を画像に置換する場合も、いくつかやり方がある。山田氏は、<li>に画像を背景として指定。仕上げとしてリンクテキストを消すために、「text-indent:-9999px;」で画面領域から見えなくする方法、spanタグでテキストを括って「display:none;」で隠す方法の2つを紹介した。この2つの方法については、必ずしもどちらがいいとは言えないという。「両方ともメリット・デメリットがあるので、用途に合わせて使い分けを」と話していた。
次ページ：他人にも分かりやすいCSSセッティングを
