トップメニューを横に並べてデザインする

このサイトについて サイトマップ


アフィリエイトで稼ぐのは厳しい ⇒ 速習HTML ⇒ メニューを横に並べる


リスト形式メニューを横に並べてデザインする。

  この文字をクリックするとサンプルダウンロード出来ます。


トップメニューを作成する ← | → 画像を組み込む


ここでする事は次の内容です。かなり、メニューらしくします。

 ・メニュー項目を横に並べる
 ・リンク用文字の先頭の ”・”マークを削除する。
 ・リンク用文字の表示色を青色にする。
 ・カーソルが乗った時、赤色に変る様にする。
 ・メニュー領域に背景色を付ける

これらの設定は全てスタイルシートで行います。style-css.cssを開いて下さい。

● スタイルシートに以下を追加します。

a     { color: #0000ff; }    リンク文字表示を青色に設定

a:hover { color: #ff0000; }    カーソルが乗った時、赤色にする

ul    { list-style-type: none;    リストマークの”・”を消す
       background-color: #bbffaa;    領域背景色を黄緑色にする
       padding: 3px 20px;    上下、左右の位置を調整
       margin-top: 0 }    上コンテンツ境界とピッタル付ける

li    { display: inline;    横並びのリストにする
      padding-right: 10px;    項目の右を10ピクセル空ける
      font-size: 0.75em; }    文字サイズを指定

li a  { text-decoration: none; }    リンク文字に下線が付かない様にする






● 各項目の説明。

@ リンクのaタグで囲まれたコンテンツの表示色は青が通常です。
  検索者のストレスをなくす為にセレクタaで、必ず青に設定して下さい。

A カーソルが乗った時、色を変える場合の表示色を設定します。何色でも構いません。
   a:hover で指定します。 
B list-style-typeでリストのスタイルを設定。●や■も指定できますが、割愛します。

C background-colorで ul で設定したリストの背景色を設定します。

D margin と padding
  文字や画像も周りを境界で囲まれています。特に指定しないと境界巾は0です。
  marginは自分の境界と、上下左右にある他のコンテンツの境界との余白です。
  paddingは自コンテンツと自分の境界との余白です。

  padding

  指定方法(paddingを例) 

  ・padding-top:上     上余白サイズを指定 padding-top:10px; など 
  ・padding-bottom:下 
  ・padding-left:左
  ・padding-right:右
  ・padding 上 右 下 左 padding: 10px 15px 1px 5px; など
  ・padding 上 左右 下
  ・padding 上下 左右   padding: 10px 15px(上下10、左右15)

E liタグのdisplayプロパティでリストを横に並べました
  インライン要素、ブロック要素などが指定できますが、今回はインライン要素と
  して設定しました。

  ブロック要素にして、要素の巾・全体の巾設定で横に並べることも出来ます。

F リンクのaタグで囲まれたコンテンツは通常は下線付きにします。
  リストタグ内のリンクにダケ下線を付けない様にしました。

  li a { } は liタグ内の a タグだけに適用される書き方です。




サンプルの表示イメージです。メニュー部分中心のイメージです。

  メニュー