- ul要素とli要素は初期状態ではマージンとパディングが設定されていますので、いったん０にリセットします。
- li要素のマーカーを消すためlist-style-type:noneとします。
- リンクであることがわかりやすいように、マーカーを付けます。マーカー画像はbackground-imageで指定します。
- マーカーの縦方向の中央はbackground-position:centerで指定します。
- マーカーとテキストの空間はpadding-leftで指定します。
- a要素にdisplay:blockを設定してクリッカブルな領域をブロック領域いっぱいに広げます。
- テキストの縦位置を調整するにはheightとline-heightの値を同じ値にします。
- 左右の中央揃えはtext-align:centerを使用します。
- リンクテキストのアンダーラインはtext-decoration:noneで消します。
- ナビのボタンを横並びにするにはli要素にfloatを設定します。
- ナビのボタンを横並びにする別の方法はdisplay:inlineにする方法もありますが、これはインライン要素の特性により高さ（height）の設定ができなくなります。
そのためdisplay:inline-blockを使用する方法があります。この場合はli要素の左右に隙間ができる問題があります。
ナビゲーション作成のポイント
HTML&CSS
