初心者のWEBデザイン

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

20150411143621

CSS 横メニューの作り方

CSSで横メニューについて作り方について記述します。

先日と同じ下記の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>

CSSの記述手順

  1. いつも通りhtmlファイルを新規で作成し任意のフォルダに保存し基本を入力
  2. メニューを複数決める。(奇数が好ましい。3,5,7等)
  3. リセットCSSを書く
  4. #nav ul {} で幅指定、border-right以外を指定する。floatに備え、overflow: hiddenを入力 ※1
  5. #nav li {} でボタン一つ一つの幅を指定。float: leftで全て回り込ませる。※2
  6. #nav li a {}でブロック指定しborder-rightを指定。※3
  7. #nav a:hover {}でマウスを載せた際の設定を指定

下記の表示になります。

#nav li a #nav li a:hover

※1:任意で事前に#navで幅、フォント、marginを指定
※2:任意でtext-alignで中央揃え
※3:任意でフォントカラー・背景色・line-heightの指定をする

 

注意事項

#nav li {} でborder-right指定すると幅の余裕がない場合にレイアウト崩れを起こす(写真参照)

f:id:bellsmarket:20150108215621p:plain

topへ戻る