Web > Expression > Web (1.0) > Chapter 3 CSSによるレイアウト

6. ナビゲーションをデザインする

全ての年齢層、パソコンやインターネットの利用歴を問わず、誰でも「これがナビゲーションだ」と判別しやすいように、アクセシビリティを考慮したナビゲーションをデザインしましょう。ここでは、多くのWebページに利用されている、ページの上部に横に並べて配置されるナビゲーションを設置しましょう。本書では、箇条書きリストにスタイルを設定して横並びに配置する方法を解説します。

サンプルファイル

> Page 2 > Page 3

1. ナビゲーションボックスのスタイルを設定する

［スタイルの適用］作業ウィンドウの［新しいスタイル］をクリックします。
［新しいスタイル］ダイアログが表示されました。
［セレクタ］ボックスには、「#navigation」と入力します。
［ボックス］カテゴリを開きます。
paddingとmarginはすべて0ピクセルに指定しますので、下の図のように、それぞれ［すべてに同じ数値を使用する］にチェックがついていることを確認し、値を0ピクセルに指定します。
次に、［配置］カテゴリを開きます。
ボックス幅を自動にするため、width ボックスに「auto」を指定します。
最後に、［レイアウト］カテゴリを開きます。
左寄せ、または右寄せされた全ての要素に対する回り込みを解除し、はみ出た部分を非表示にするために、clear値に「both」、overflow値に「hidden」と指定します。
最後に［OK］ボタンをクリックします。
作業中のページ内に「#navigation」のCSSスタイルが生成されました。