人気ブログランキング | 話題のタグを見る
<< 今までのコメントは見れるけど、... 一部の投稿欄に背景を表示してみました >>
 

メニュー:リストを用いたメニュー


以前、テーブルを使用したメニューを紹介させて頂きました。
今回は図1に示すようなリストを用いたメニューです。
設置場所については好きなところに設置して下さいね。





図1 設置例



HTML編集


以下のタグを任意の場所に入れます。



HTML編集
<ul class="menunavi">
<li ><a href="URLを指定">メニューのタイトル</a></li>
<li ><a href="URLを指定">メニューのタイトル</a></li>
<li ><a href="URLを指定">メニューのタイトル</a></li>
<li ><a href="URLを指定">メニューのタイトル</a></li>
<li ><a href="URLを指定">メニューのタイトル</a></li>
</ul>
<br style="clear: both;">



CSS編集部分

CSS編集部分に以下のコードを追加します。
各自の画像に合わせた設定に変更する必要があります。



CSS編集


ul.menunavi li{

list-style-type: none;
display:inline;
padding:0;
margin: 0;
}

ul.menunavi li a, ul.menunavi a:visited{

color: #000000;
font-size: 10px; /*フォントのサイズ*/
font-weight: bold; /*フォントを太字*/
text-align:center; /*文字の中央揃え*/

margin: 0;
padding: 0;
padding-top:0px; /*上の空白の調整用*/
line-height: 20px;

text-decoration: none;
display:inline;

position:relative;
left:0px; /*表示位置補正用です。この数値を大きくすると表示位置を変えられます。*/

float: left;

background-image:url(イメージファイルURL);
background-repeat:no-repeat;
background-position:center;
width:100px; /*イメージファイルの幅*/
height:20px; /*イメージファイルの高さ*/
}






今日のポイント
  • display:inline;で横方向に表示するようにしています。

  • left:0px;の部分の数値を入れることにより表示位置をずらすことが可能です。




難易度:★★
なお、ボタンの素材はGIMPで作りました。

ぽっと

記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2004-11-27 11:16
<< 今までのコメントは見れるけど、... 一部の投稿欄に背景を表示してみました >>
掲載の記事や画像などすべての複写・転載・公衆送信等はご遠慮ください。