ふつうに横三角

ＣＳＳで横三角。「半キャラずらし」 (インターネット帳面)
今回はお題の通りインターネット帳面でもやってる「ＣＳＳで横三角をやる方法」。２バイト文字の三角記号は▲や▼しかないので横方向を示すことができませんでした。これをなんとかどーにかできんものかと。

↑こんな記事があって、ちょっと面白かったので、
参考までに、ふつうの横三角のコードも書いておきますね！

» (»)
« («)

▷ (▷)
▶ (▶)
◁ (◁)
◀ (◀)

そうそう、この中でも » って結構使えるよ！

よくサイドのメニューとかで、CSS を使って
<li> の背景左端に、三角っぽい画像を設定したりするよね！

でも &raquo; をつかえば、画像がなくてもこんな感じ！

• » Diary
• » Bookmark
• » Fotolife
• » Group

どうかな！ おてがるだね！

(サンプルコード) ※ダイアリーのCSSを上書きする関係で、よけいなスタイルもまじっちゃってるよ＞＜

<ul id="raquoSample">
<li><a href="/Hamachiya2/">&raquo; Diary</a></li>
<li><a href="/Hamachiya2/">&raquo; Bookmark</a></li>
<li><a href="/Hamachiya2/">&raquo; Fotolife</a></li>
<li><a href="/Hamachiya2/">&raquo; Group</a></li>
</ul>

ul#raquoSample {
 width: 10em;
 border: 1px solid #99c;
 border-width: 1px 1px 0 1px;
 line-height: 1.2em;
}

ul#raquoSample li {
 margin: 0;
 padding: 0;
 list-style-type: none;
 border-bottom: 1px solid #99c;
}

ul#raquoSample li a {
 display: block;
 margin: 0;
 padding: 2px 1em;
 background-color: #ccf; 
 color: #333;
 font-family: monospace;
 font-weight: bold;
 border: 0;
}

ul#raquoSample li a:hover {
 background-color: #ffd700;
}