ナビゲーションのレイアウトを作成

ナビゲーションのブロックにIDを指定し、リスト全体、リストの各項目、リンク、及びリンク部分にマウスをのせた時のそれぞれにスタイルを設定します。

ナビゲーションブロックにカーソルを置きます。
「スタイルシートエクスブレス」の「カーソルの位置」パネルを選択します。
2つある「div」のうち下の「div」右クリックし、「ルールの新規作成」をクリックします。
「ルールの作成」のダイアログで「ID」を選択し「navi」と入力し、「OK」ボタンをクリックします。
「スタイルの設定」のダイアログで、「色と背景」タブを選択します。
「背景色」を「緑」に指定します。
「文字のレイアト」タブの「連続した空白文字」で「ふつう」を選択します。
「位置」タブの「幅」で「100％」を指定します。
「属性」で「回り込み」を「左」に指定し、「OK」ボタンをクリックします。

ここまでが「div id="navi"」と指定したナビゲーションブロックのスタイルの設定です。次にナビ用に作成したリスト全体「ul」のスタイルを設定します。

「スタイルシートマネージャーの表示」ボタンをクリックし、現れたダイアログで「追加」ボタンをクリックします。
「スタイルの設定」ダイアログで、「ID名」ボックスに「#navi ul」と入力します。
「レイアウト」タブで、「上方向」を選択し「パディング」を「10ピクセル」にします。
引き続き、「左方向」を選択し、「パディング」を「50ピクセル」に設定します。
さらに「右方向」を選択し、「パディング」を「10ピクセル」に設定します。
「リスト」タブを選択し、「リストマークのタイプ」を「無し」に設定し、「OK」ボタンをクリックします。

次にリストの各項目「li」のスタイルを設定します。

「スタイルシートマネージャーの表示」ボタンをクリックし、現れたダイアログで「追加」ボタンをクリックします。
「スタイルの設定」ダイアログで、「ID名」ボックスに「#navi ul li」と入力します。
「色と背景」タブで「背景色」を「白」に指定します。
「文字のレイアト」タブの「水平方向の配置」と「垂直方向の配置」を「中央」に指定します。
「レイアウト」タブで、「右方向」を選択し「マージン」を「5ピクセル」にします。
「位置」タブの「幅」で「5文字の高さ」、「高さ」で「自動」を指定します。
「属性」で「回り込み」を「左」に指定し、「OK」ボタンをクリックします。

続いてリンクのスタイルを設定します。

「スタイルシートマネージャーの表示」ボタンをクリックし、現れたダイアログで「追加」ボタンをクリックします。
「スタイルの設定」ダイアログで、「ID名」ボックスに「#navi ul li a」と入力します。
「フォント」タブで「文字飾り」を「なし」に指定します。
「色と背景」タブで「背景色」を「白」に指定します。
「位置」タブの「属性」で「表示」を「block」に指定し、「OK」ボタンをクリックします。

最後に、リンク部分にマウスポインタが乗ったときのスタイルを設定します。

「スタイルシートマネージャーの表示」ボタンをクリックし、現れたダイアログで「追加」ボタンをクリックします。
「スタイルの設定」ダイアログで、「ID名」ボックスに「#navi ul li a:hover」と入力します。
「色と背景」タブで「背景色」を「黄緑」に、「前景色」を「緑」に指定し、「OK」ボタンをクリックします。