【CSS】 ※印付きのリストを作る。

注釈リストのサンプル

<ul>、<li>タグとCSSを使って、※印がついた注釈のリストを作るティップス。

このレイアウトのポイントは、文章が長くて自動改行してしまった場合の処理。2行目の先頭は、※印の右端に揃わなくてはならない。このサンプルでは、リスト側に text-indent:-1em; を指定することで、※印一文字分が左にめり込むようにして実現している。

<!-- XHTML -->
<ul>
    <li>※注釈リストです。注釈リストです。</li>
    <li>※注釈リストです。注釈リストです。</li>
</ul>

<!-- CSS -->
<style type="text/css">
    ul{
        padding-left:1em;
    }
    ul li{
        text-indent:-1em;
        list-style-type:none;
    }
</style>

IEを無視するなら、li:before{ content:"※"; } を使うことで、HTML上の※印は排除できるが、それが許されるのはもう少し先のことだろう。

• ※ITmediaの記事 「IEの市場シェア、減少続く――67.5％に」 によると、IEのシェアは 70% を切った模様。ただしこの情報は米Net Applications 社 の調べによる。世界シェアかな？
• ※注釈リストは、PicklesCSS では、ul.annotation としてモジュール化されている。