メニュー:リストを用いたメニュー
以前、テーブルを使用したメニューを紹介させて頂きました。
今回は図1に示すようなリストを用いたメニューです。
設置場所については好きなところに設置して下さいね。
HTML編集
以下のタグを任意の場所に入れます。
<li ><a href="URLを指定">メニューのタイトル</a></li>
<li ><a href="URLを指定">メニューのタイトル</a></li>
<li ><a href="URLを指定">メニューのタイトル</a></li>
<li ><a href="URLを指定">メニューのタイトル</a></li>
<br style="clear: both;">
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で作りました。