ナビゲーション作成のポイント

HTML&CSS
  • ul要素とli要素は初期状態ではマージンとパディングが設定されていますので、いったん0にリセットします。
  • 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要素の左右に隙間ができる問題があります。
スポンサーリンク

お勧め書籍

AI関連

Python

JavaScript

HTML CSS関連

統計学

HTML&CSS
スポンサーリンク
dororoをフォローする
IT工房|AI入門とWeb開発
タイトルとURLをコピーしました