list-style-image を使用すると、LI 要素の前に付くマークに任意の画像を指定できますが、フォントのサイズが変わっても、画像はそのままですからバランスが悪い場合があります。 Picasa は、URL にサイズ指定できるので、以下のような運用が可能になります。
- あああああああああああああああ
- あああああああああああああああ
- あああああああああああああああ
- あああああああああああああああ
- あああああああああああああああ
- あああああああああああああああ
- あああああああああああああああ
- あああああああああああああああ
- あああああああああああああああ
- あああああああああああああああ
こちらは、元の画像ですここをクリックすると、以下のコードを編集しながらテストする事ができます
<style type="text/css">
.my_li li {
font-size: 16px;
list-style-image:url(http://lh4.googleusercontent.com/-K5VtJ3GdFXM/Tk2_0St9H3I/AAAAAAAADSI/Cbp0frLPgyU/s12/li_img.gif)
}
.my_li2 li {
font-size: 26px;
list-style-image:url(http://lh4.googleusercontent.com/-K5VtJ3GdFXM/Tk2_0St9H3I/AAAAAAAADSI/Cbp0frLPgyU/s18/li_img.gif)
}
</style>
<ul class="my_li">
<li>あああああああああああああああ</li>
<li>あああああああああああああああ</li>
<li>あああああああああああああああ</li>
<li>あああああああああああああああ</li>
<li>あああああああああああああああ</li>
</ul>
<ul class="my_li2">
<li>あああああああああああああああ</li>
<li>あああああああああああああああ</li>
<li>あああああああああああああああ</li>
<li>あああああああああああああああ</li>
<li>あああああああああああああああ</li>
</ul>
|
|
【HTML / CSSの最新記事】
- タイトルの背景画像を CSS でスクロールさせて雪を降らせ、after を使って画像で装飾する
- A 要素と CSS だけでボタンを表現する 『BUTTONS』
- BUTTON 要素と CSS だけでアイコンボタンを表現する 『BUTTONS』
- CENTER 要素内での position:absolute で、位置指定されていない場合の振る舞い
- INPUT type="number" の振る舞いをブラウザ間で調整する
- META 要素の viewport で content 内の区切り文字に ;(セミコロン) を使うと Google Chrome で警告が出ました。
- CSS の display に 設定する inline-table と inline-block を交互に設定して効果を確認
- ブロックレベル要素内のブロックレベル要素を常に中央に表示する jQuery のデモ
- IE9 以降での完全な「データ URI」の利用 / WEBページにバイナリデータを埋め込む / data Protocol
- CSS で、white-space に pre-line を指定している PRE 要素内の ブラウザ毎の結果の違い
- TABLE要素を使わずに DIV 要素を使って横方向にエリアを配置する
- HTML : 画像を使ったボタンのバリエーション
- WEB フォントの記述方法の考察
- これがいい方法かどうかは解りませんが、直観的で解りやすい UL 要素内の LI 間の改行調整
- Google Chrome で IFRAME の frameborder="yes" が動作しないのですが(一般仕様はともかくとして)、よくよくブラウザ別に比べるとかなり違います。
- CSS3 の角丸を IE8以前でも使うには( ブログで使うには )
- CSS : display / vertical-align
