読みやすく分かりやすいリストデザイン
先日サイトをリニューアルしましたが、なかでもリストのデザインには少し凝ってみました。たとえばolタグを使ったリストで作業手順を示す場合、以下のような感じになります。（注釈部分はulの入れ子になっています）
- 最初の手順を行います。
最初の手順は□□□です。 - 次の手順を行います。
- このとき、まず○○を行うことに注意してください。
- 第3の手順を行います。
- 最後の手順を行います。
手前味噌な言い方になってしまうのですが、作業手順が分かりやすく、注釈も入れやすいデザインになったのではないかと思います。
技術系ブログやサイトなどでも、意外とひとつひとつの手順（ステップ）は読みにくいことが多いように感じていたため、こんなデザインを自作してみました。
上記のCSSコード
上記のリストはすべてCSSで実現しています。
以下に、CSSのコードを記載します。
/* olリストデザイン */
.text ol {
counter-reset: li; /* カウンターリセット */
overflow: hidden;
}
.text ol > li {
float: left;
background: url('images/list_back.png') no-repeat 0px 12px;
border-bottom: 1px solid #EBEFF5;
padding: 5px 0px;
padding-left: 85px;
text-indent: -70px;
font-size: 0.9em;
width: 500px;
}
.text ol > li:before {
content: "Step" counter(li) ".";
counter-increment: li;
float: left;
margin-right: 0px;
color: #2B313C;
font-weight: bold;
display: block;
}
.text > ol > li:first-child {
border-top: 1px solid #EBEFF5;
}
/* ulリストデザイン */
.text ul > li {
background: url('images/list_back3.png') no-repeat 0px 12px;
padding: 5px 0px 5px 15px;
}
/* リスト入れ子デザイン */
.text ol li li,
.text ul li li {
padding: 10px 40px 5px 30px;
text-indent: 0px;
font-size: 0.95em;
border: none;
}
.text ol li li { background: url('images/list_back2.png') no-repeat 10px 17px; }
.text ul li li { background: url('images/list_back4.png') no-repeat 10px 17px; }
コード解説
counterによる連番挿入
ポイントはcounter(li)を使って連番を挿入している点です。
これにより、「Step」という文字と一緒に連番を記載できるようになります。
単純にbeforeだけで文字（Step）を追加すると、連番の左側に文字が追加されてしまうためです。
counterを使うには、まずカウントをリセットする必要があります。
リセットにはcounter-resetを使います。
.text ol { counter-reset: li; }
これでliのカウントがリセットされます。
それから、各liにbeforeとcontentを使って文字（Step）と連番を足します。
.text ol > li:before {
content: "Step" counter(li) ".";
counter-increment: li;
counter-incrementを設定することで、liがひとつ増えるたびに自動で数字が増えていく、いわゆる連番が実現できます。
連番部分と文章部分の切り離し
さらに、2行目以降の文頭の位置を、1行目の位置と揃えます。
これにより、手順ごとの区切りをはっきりさせて可読性の向上を目指します。
まず、連番部分と文章部分を完全に切り離すために、それぞれにfloatを設定します。
なぜこんな面倒なことをするかというと、そのまま連番部分にmargin-rightを設定してしまうと、連番の桁数が増える場合（ようするにStep9.→Step10.になる場合）に数字1文字分だけ1行目の文頭がずれてしまうためです。
.text ol {
counter-reset: li;
overflow: hidden;
}
.text ol > li {
float: left;
}
.text ol > li:before {
content: "Step" counter(li) ".";
counter-increment: li;
float: left;
display: block;
}
私はclearfixはあまり使わない派なので、かわりにolにoverflow:hiddenを設定しておきます。
それから文章部分（li）と連番部分にそれぞれfloat:leftを設定します。
また、beforeで追加された連番部分はdisplay:blockでブロック要素に変換しておく必要があるので注意してください。
text-indentによる文頭位置の調整
floatの設定が終わったら、text-indentを使って文頭位置を調整します。
といっても正確にはtext-indentだけでなく、paddingやmarginも含めて三つの数字を設定する必要があります。
まずpadding-leftで全体を右にずらします。
さらに、text-indentをマイナス数値で設定して一行目だけ左に移動します。
ただし、そのままだと文章部分まで合わせて移動してしまい、連番と文章が重なってしまいます。
なので、最後にmargin-rightをtext-indentと同じ量だけ設定します。
.text ol > li {
float: left;
padding-left: 85px;
text-indent: -70px;
}
.text ol > li:before {
content: "Step" counter(li) ".";
counter-increment: li;
float: left;
display: block;
margin-right: 70px;
}
以上でリストデザインが完成します。
あとはborderや文字サイズなど、お好みで設定してください。
そのほか入れ子になっているリストのCSSについては、一番最初に載せたコードを参考にしていただければと思います。