webdev

ウェブの技術とか開発環境構築の覚書。

IEに対応した※リストのCSS

2012年9月13日

※から始まるリストのスタイリングについて。 よくある（？）方式だと2パターン思い当たります。

  1. first-letterを用いたもの
  2. <dl>を用いたもの

1.first-letterを用いたもの

cssでlist-style-typeをnoneにした<ul>のリストを定義し
<li>の左マージンを1文字ぶん設けておいて、first-letterだけ左に1文字ぶんのネガティブマージンを設定する方法。

HTML

&lt;ul&gt;<br />
	&lt;li&gt;※こめじるしのリストをスタイルシートで作るデモ！こめじるしのリストをスタイルシートで作るデモ！&lt;/li&gt;<br />
	&lt;li&gt;※こめじるしのリストをスタイルシートで作るデモ！こめじるしのリストをスタイルシートで作るデモ！&lt;/li&gt;<br />
&lt;/ul&gt;

スタイルシート

#sample-pt1 li {<br />
	margin-left: 1em;<br />
	margin-bottom: 0.5em;<br />
}<br />
#sample-pt1 li:first-letter {<br />
	margin-left: -1em;<br />
}

サンプル

  • ※こめじるしのリストをスタイルシートで作るデモ！こめじるしのリストをスタイルシートで作るデモ！こめじるしのリストをスタイルシートで作るデモ！
  • ※こめじるしのリストをスタイルシートで作るデモ！こめじるしのリストをスタイルシートで作るデモ！こめじるしのリストをスタイルシートで作るデモ！

ただし、このやり方がIEで効かない…orz
IEだけは折り返した行の先頭にインデントが入りません。

2.<dl>を用いたもの

というわけで出てきたのが、<dl>を使った方式。
※を<dt>で、本文を<dd>で囲って
<dt>にはfloat:leftを、<dd>はフロートせず左マージンを1文字ぶん設けるやり方です。

これならIEでも折り返した行の先頭にインデントが入ります。

HTML

&lt;dl&gt;<br />
	&lt;dt&gt;※&lt;/dt&gt;&lt;dd&gt;こめじるしのリストをスタイルシートで作るデモ！こめじるしのリストをスタイルシートで作るデモ！&lt;/dd&gt;<br />
	&lt;dt&gt;※&lt;/dt&gt;&lt;dd&gt;こめじるしのリストをスタイルシートで作るデモ！こめじるしのリストをスタイルシートで作るデモ！&lt;/dd&gt;<br />
&lt;/dl&gt;

スタイルシート

#sample-pt2 dt {<br />
	float:left;<br />
	margin-bottom: 0.5em;<br />
}<br />
#sample-pt2 dd {<br />
	margin-left: 1em;<br />
	margin-bottom: 0.5em;<br />
}

サンプル

※

こめじるしのリストをスタイルシートで作るデモ！こめじるしのリストをスタイルシートで作るデモ！こめじるしのリストをスタイルシートで作るデモ！
※

こめじるしのリストをスタイルシートで作るデモ！こめじるしのリストをスタイルシートで作るデモ！こめじるしのリストをスタイルシートで作るデモ！

というわけで、IEサポート案件で※リストが出てきそうなときは
dl方式の方を使うようにしようと思います。

関連記事