ぼくはまちちゃん!(Hatena)

  • ライブドアリーダーで読む → Subscribe with livedoor Reader
ぼくはまちちゃん!のRSSフィード

2007/04/22

ふつうに横三角

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

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

» (»)
« («)

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

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

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

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

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




(サンプルコード) ※ダイアリーの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;
}

iMaiMa 2007/04/23 07:31 どう見てもこちらの方がお手軽です(´Д`) 参考にさせてもらいます。

erma1003erma1003 2007/04/27 11:14 数値文字参照の横三角 ▷等は機種依存(MaxOS9では表示できない)なのでご注意を。
あと<li>に直接マーカを入力するのは態とですか?