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

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

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

1.first-letterを用いたもの

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

HTML

<ul>
	<li>※こめじるしのリストをスタイルシートで作るデモ!こめじるしのリストをスタイルシートで作るデモ!</li>
	<li>※こめじるしのリストをスタイルシートで作るデモ!こめじるしのリストをスタイルシートで作るデモ!</li>
</ul>

スタイルシート

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

サンプル

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

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

2.<dl>を用いたもの

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

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

HTML

<dl>
	<dt>※</dt><dd>こめじるしのリストをスタイルシートで作るデモ!こめじるしのリストをスタイルシートで作るデモ!</dd>
	<dt>※</dt><dd>こめじるしのリストをスタイルシートで作るデモ!こめじるしのリストをスタイルシートで作るデモ!</dd>
</dl>

スタイルシート

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

サンプル

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

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

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

関連記事

Pocket