使ってみよう！スタイルシート

パンくずリストや、簡単な手順を書く時に使えるテクニック。


テキストの間に矢印画像入れたい！

トップ<img src〜〜>サブメニュー<img src〜〜>今見ているページ

という書き方でも似たような事はできますが、
矢印の高さと文字の高さが合わなかったり、
画像のURLのせいでソースが無駄に長くなってしまい、ごちゃごちゃします。

CSS
/*------流れる矢印用ボックス------*/
div.allow-url{
float:left;
background:url(/xxx/xxx/images/arrow-red.gif);
background-repeat:no-repeat;　 /*赤い矢印を背景にしてリピートしない*/
background-position:100% 50%;　/*左端から100％、上端から50％（50％は高さの真ん中）*/
text-align:right;　　　　　　　/*文字を右寄せ*/
padding: 0px 12px 0px 0px;　　/*背景画像の矢印の分のスペースをとる*/
line-height:20px;
margin:0px;}

HTMLはこんな感じ。

<div class="clearfix"> ←関係ないボックスが右に並んでしまわないように最初にかこんでおく
<div class="allow-url">トップ</a></div>
<div class="allow-url">サブメニュー</div>
今見ているページ

サンプル画像はご自由にダウンロードしてください。