]]>
bt_02.gif
bt_03.gif
bt_04.gif
bt_05.gif
bt_06.gif
bt_07.gif
bt_08.gif
HTMLの記述
<ul>
<li id="internet"><a href="#">インターネット関連</a></li>
<li id="pleasure"><a href="#">趣味と娯楽</a></li>
<li id="memo"><a href="#">考察メモ</a></li>
<li id="family"><a href="#">犬と猫がいる生活</a></li>
</ul>
CSSの記述
ul{
margin:0px;
padding:0px;
list-style:none;
}
a{
text-decoration:none;
text-indent:-1000px;
text-align:center;
width:160px;
height:20px;
overflow:hidden;
display:block;
}
#internet a:link,
#internet a:visited{
background:url("bt_01.gif") no-repeat;
}
#internet a:hover{
background:url("bt_02.gif") no-repeat;
}
#pleasure a:link,
#pleasure a:visited{
background:url("bt_03.gif") no-repeat;
}
#pleasure a:hover{
background:url("bt_04.gif") no-repeat;
}
#memo a:link,
#memo a:visited{
background:url("bt_05.gif") no-repeat;
}
#memo a:hover{
background:url("bt_06.gif") no-repeat;
}
#family a:link,
#family a:visited{
background:url("bt_07.gif") no-repeat;
}
#family a:hover{
background:url("bt_08.gif") no-repeat;
}
ポイント
liタグにそれぞれidを付け、そのidごとに適応させる画像を設定しています。これだけだと、画像の上に文字が乗っかってしまうので、文字を消さなければいけません。
まず、aタグにtext-indent:-1000px;を設定することで、文字を-1000px分移動させます。次にoverflow:hidden;で設定したサイズ160px×20pxからはみ出した文字を隠します。これで文字を消すことが出来ます。
-1000pxという数値は適当に付けています。文字数が多くなったり、文字サイズが大きくされても、確実に隠せるよう多めに設定すると良いでしょう。]]>
文字サイズに対応してレイアウトサイズの倍率も変化する、エラスティックレイアウトのベーシックテンプレート（elastic layout basic templates）を5種類作りました。是非ご利用ください。]]>
テンプレートのダウンロード
ブラウザのサイズによってレイアウト幅が可変する、リキッドレイアウトのベーシックテンプレート（liquid layout basic templates）を5種類作りました。是非ご利用ください。]]>
テンプレートのダウンロード
ウェブレイアウトのスタンダードである、固定幅レイアウトのベーシックテンプレート（fixed layout basic templates）を5種類作りました。是非ご利用ください。]]>
テンプレートのダウンロード
]]>
トピックパス（パンくずリスト）用アイコン ic_arrow02.gif（12px×12px）
