トップメニューを横に並べる

売れるホームページの作り方 ⇒ 速攻HTML ⇒ メニューを横に並べる


速攻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 タグだけに適用される書き方です。






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


  メニュー