初心者のWEBデザイン

HTML,CSS、その他WEBデザインに関する事を記述していきます

20150411143621

CSS 縦メニューの作り方

縦メニューの作り方をメモしておきます。

今回は画像ではなくHTMLとCSSだけで書けるタイプです。 画像で作るナビは違う日に記述します。

HTMLのbody要素内を下記で作成します。

<body>
<div id="nav">
<ul>
<li><a href="#">Rock</a></li>
<li><a href="#">Jazz</a></li>
<li><a href="#">Blues</a></li>
<li><a href="#">funk</a></li>
<li><a href="#">soul</a></li>
</ul>
</div>
</body>

 

    1. htmlファイルを新規で作成し基本を入力
    2. メニューを複数決める。(今回は音楽ジャンル記述します。)
    3. ブラウザによって誤差が出ないようにCSSでリセットプロパティを書きます。
    4. 幅、フォント(サイズ、強弱)、マージンを#navでまとめて決める。
    5. #nav ul{}でbottom以外のborderを決める。
    6. #nav li a {}でまずブロックにする。(display: block;)
    7. 一番下部のborder、フォントや背景の色、line-height、paddingを決める
    8. #nav a:hover {}で背景色決める(マウスを載せた際の色)

f:id:bellsmarket:20150209232723p:plain f:id:bellsmarket:20150209232724p:plain

出来上がると上部の画像のようになります。下記に今回書いたCSSを参考に載せときます。
あくまでも一例ですので僕と同じ初心者の方の参考になれば幸いです。

 

/* reset */

body,div,ul,li,a {
padding:0;
margin: 0;
line-height:1.0;
font-family:
"Hiragino Kaku Gothic ProN",
Mieryo,
sans-serif;
}
a {
text-decoration:none;/*下線を消す*/
}
ul {
list-style:none;/*・黒丸を無しにする記述*/
margin:50px auto;
width:120px;/*ナビの横幅を決めます。*/
border:2px solid #000;
border-bottom:none;
}
li a {
display:block;/*ブロックボックスを生成する*/
border-bottom: 2px solid #000;
background:#3399FF;
color:#FFF;
font-size:16px;
text-align:center;
padding:10px;
}
li a:hover {/*マウスが乗った際の変化*/
border-bottom: 2px solid #000;
background:#000;
}

※注意点

  • あくまでも<li>で文字の詳細、li a{}でブロックになったフォントの色や背景色を決める事。
  • ブロック指定しないとli a{}は面にならず、マウスはフォントの上だけしか反応しない。
  • 面にしてあげる事でマウスが<li>領域にも反応する。
  • ※文字をpadding-leftで動かす場合はulやliにpaddingをかけるとborderや左側に余白が空いてしまうのでli aにかけると安定する。
  • <li>の上に<a>が薄く載っているようなイメージで作成。
  • #navでまとめてない場合:
  • <li>でフォントサイズ等は決める。
  • li a:hover{}でマウスを載せた設定を行う事。
topへ戻る