Step8　デザインの調整

今回は「デザインの調整」です。ページの詳細なデザインを確実に進めていくため、さまざまな問題に対処する方法を解説していきます。このプロセスには、アクセシビリティ対応や文書構造の確認、視覚表現の最終調整などがあります。具体的には「リニアライズ・チェック」、「文書構造の見直し」、「2カラムレイアウトの境界線を表現するテクニック」、「文書構造の変更に伴うCSSデザインの調整」といった作業を進めていきます。

まず、サンプルページの「リニアライズ（線形化）・チェック」を実行しておきましょう。この作業はアクセシビリティに関するチェックだと考えてください。サンプルページが採用しているフォーマットは、固定幅の「ヘッダ＋コンテンツ（メインコンテンツ＋サブコンテンツ）＋フッタ」（2カラムレイアウト）ですが、XHTMLのソースコードは以下のような順序になっています【図1】。

●コードの順序
・サイト名→レベル3
・サブコンテンツの小見出し→レベル3
・メインコンテンツの大見出し→レベル1
・メインコンテンツの中見出し→レベル2

このページで最も重要な見出しは、注目ニュース記事の見出しです（メインコンテンツの大見出しを「レベル1－h1」でマークアップしています）。最上部には、サイト名が記述されており「レベル3－h3」でマークアップされています。音声読み上げソフトによる見出しジャンプ（キーを押すごとに見出しを移動する）機能にも対応していますが、文書構造として見出しのレベル1が最上部にないのは歪な感じがします。

たとえば、以下のように順序を変更すると見出しのレベル1からレベル2、レベル3という上位から下位への文書構造が成立します【図2】。ただし、通常の文書として読み上げた場合、やはりサイト名は一番初めに記述されていた方が理解しやすくなります。

●コードの順序
・メインコンテンツの大見出し→レベル1
・メインコンテンツの中見出し→レベル2
・サイト名→レベル3
・サブコンテンツの小見出し→レベル3

3番目のパターンは、サイト名を最上部に移動させ、見出しのレベル1、レベル2、レベル3という順序にしました。サイト名は「見出し」として扱わず、段落＜p＞でマークアップしています【図3】。

●コードの順序
・サイト名→画像（&代替テキスト）
・メインコンテンツの大見出し→レベル1
・メインコンテンツの中見出し→レベル2
・サブコンテンツの小見出し→レベル3

海外の企業サイトなどを見ると、アクセシビリティに配慮したコーディングについてはそれほど違いがありませんが、文書構造の考え方はさまざまです。ブラウザで最も目立っている新着記事の見出しをレベル1でマークアップしているサイトもあれば、サイト名をレベル1として扱い、記事見出しはレベル2もしくはレベル3にしているサイトもあり、記述する順序も異なっています。

また、コードの順序によって、CSSデザインの内容も変わってくるので、サイトが完成した後の修正は手戻りが大きく大変な作業になってしまいます。できるだけ詳細なデザイン作業に入る前にチェックしておいた方がよいでしょう。

この作業では3番目のパターンを採用し、文書構造を変更しましょう。変更作業は、プロセス4で行います。

このプロセスでは、デザイン上の不具合をチェックしていきます。現在、コンテンツ領域内の段組みに大きな問題は見当たりませんが、メインコンテンツ領域の情報量を増やしてみると問題が発生します。段組みの境界線をサブコンテンツ領域の左ボーダーで表現しているため、反対側の情報量が増えるとボーダーが途切れてしまうのです【図4】。

右カラムの情報量が常に左カラムを上回るなど、固定できる仕様であれば対処できますが、ページの更新作業のたびに変化してしまう場合はほかの対策を考える必要があります。

最も普及している定番のテクニックは「背景画像による表現」です。左右カラムの背景色と境界線を画像で描き、親要素の背景として表示させます。背景画像の幅は「左カラムの幅＋境界線の幅＋右カラムの幅」となります。高さは数ピクセル程度にしておき、垂直方向に繰り返し表示します【図5】。

CSSの指定を修正します。背景画像を作成した後、左右カラムの親要素である「contentGroup」に対して「background- image: url(bg_rightColumn.gif) right top repeat-y;」を指定します。「leftColumn」に指定されている左ボーダーの指定「border-left: solid 1px #666;」は削除しておきます【図6】。

●CSSソース
#outerGroup #contentGroup {
background-image: url(bg_rightColumn.gif) right top repeat-y;
}

#outerGroup #contentGroup #leftColumn {
border-left: solid 1px #666;　→※削除する
float: right;
margin:0;
padding: 10px;
width: 210px;
}

基本デザインのプロセスではサイト名をレベル3でマークアップし、ブラウザ上ではグラフィック画像を表示させていました。文書構造の変更に伴い、見出しの表現も修正しておきましょう。CSSで指定していた背景画像をimg要素による通常の画像として表示させることにします。まず、「header」の指定を削除します【図7】。

●削除するCSSソース
#outerGroup #header {
background: #4ae url(header_cover.jpg) left top no-repeat;
height: 417px;
width: 800px;
}

ヘッダ領域「header」の内容を以下のように変更します。テキストの「heading [Level 3]」を「＜img src="images/header_cover.jpg" alt="heading [Level 3]" /＞」に修正して、画像として表示させます。また、見出しのマークアップも取り消しておきます。

●XHTMLソース（ヘッダ領域）
＜div id="header"＞
＜h3＞heading [Level 3]＜/h3＞
＜/div＞

●XHTMLソース（ヘッダ領域／修正後）
＜div id="header"＞
＜p＞＜img src="images/header_cover.jpg" alt="heading [Level 3]" /＞＜/p＞
＜/div＞

最後のプロセスは冒頭で取り上げた「順序」の変更です。見出しレベル3の下にあるレベル1およびレベル2をサイト名の下に配置変更します。サイト名 →「メインコンテンツ領域」→「サブコンテンツ領域」→フッタ領域という順序になります（メインコンテンツとサブコンテンツが入れ替わります）。

「＜div id="rightColumn"＞サブコンテンツの領域＜/div＞」の上に「＜div id="content"＞メインコンテンツの領域＜/div＞」のコードを移動させます。メインコンテンツ領域「content」に「float: left;」を指定して浮動化し、「width: 550px;」を追加することで修正前と同じ2カラムレイアウトが表現されます。最後は、floatをクリアしている「.floatClear」の修正です。左右カラムにfloatを使用しているため「clear: right;」を「clear: both;」に変更します【図9】。

なお、メインコンテンツ領域の幅（550px）は、「コンテンツ領域の幅「800px」-（サブコンテンツ領域の幅「210px」＋サブコンテンツ領域の余白「10px＋10px」＋メインコンテンツ領域の余白「10px＋10px」）」によって算出されています。

●XHTMLソース（コンテンツ領域）
＜div id="contentGroup"＞
＜div id="rightColumn"＞サブコンテンツの領域＜/div＞
＜div id="content"＞メインコンテンツの領域＜/div＞
＜/div＞

●XHTMLソース（コンテンツ領域／修正後）
＜div id="contentGroup"＞
＜div id="content"＞メインコンテンツの領域＜/div＞
＜div id="rightColumn"＞サブコンテンツの領域＜/div＞
＜/div＞

●CSSソース
#outerGroup #contentGroup #content {
float: left;
margin:0;
padding: 10px;
width: 550px;
}

●メインコンテンツ領域の幅（550px）の算出方法：
コンテンツ領域の幅（width）「800px」－「250px」＝「550px」

● 「250px」の内容：
サブコンテンツ領域の幅（width）「210px」
＋
サブコンテンツ領域の余白（padding）「右10px＋左10px」
＋
メインコンテンツ領域の余白（padding）「右10px＋左10px」

Step8のまとめです。

・プロセス1：リニアライズ・チェック
アクセシビリティに関するチェック（文書構造の見直しを含む）
・プロセス2：垂直のボーダーを背景画像で表現
左右カラムの情報量が変化する場合のボーダー（境界線）表示テクニック
・プロセス3：見出しを画像で表現
文書構造の変更に伴う「サイト名」表現方法の変更
・プロセス4：XHTMLコードの順序を変更
文書構造の変更と採用フォーマット「2カラムレイアウト」の再現

今回のポイントは、サイト構築で何を重視しているのか再確認することです。本来であれば、実作業がスタートする前に検討されることですが、今回はあえて文書構造の見直しなど、「手戻り」を発生させました。サイトが完成してから、問題を指摘されてしまうと大変な作業になってしまいます。特に文書構造の変更などはCSSデザインにも大きな影響を与えますので、上位作業の重要性を理解しておきましょう。

最終回となる次回Step9では、ページの詳細なデザインを指定しながらプレビューおよびバリデーターによる検証作業を行います。また、ブラウザの解釈やバグなどに対処するテクニックなども解説していきます。