CSSによる「読みやすく見やすい」リストデザインの作り方

読みやすく分かりやすいリストデザイン

先日サイトをリニューアルしましたが、なかでもリストのデザインには少し凝ってみました。たとえばolタグを使ったリストで作業手順を示す場合、以下のような感じになります。(注釈部分はulの入れ子になっています)

  1. 最初の手順を行います。
    最初の手順は□□□です。
  2. 次の手順を行います。
    • このとき、まず○○を行うことに注意してください。
  3. 第3の手順を行います。
  4. 最後の手順を行います。

手前味噌な言い方になってしまうのですが、作業手順が分かりやすく、注釈も入れやすいデザインになったのではないかと思います。

技術系ブログやサイトなどでも、意外とひとつひとつの手順(ステップ)は読みにくいことが多いように感じていたため、こんなデザインを自作してみました。

上記の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については、一番最初に載せたコードを参考にしていただければと思います。

コメントを投稿