※から始まるリストのスタイリングについて。 よくある(?)方式だと2パターン思い当たります。
- first-letterを用いたもの
- <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方式の方を使うようにしようと思います。