ドット罫線

目的

• ドット罫線で囲んだだけのシンプルなリストが欲しい。

実行結果

1. うどん
2. 蕎麦
3. スパゲッティー

解説

• 罫線と背景色が薄いので、本文と箇条書きの分離をさりげなく自然に出来ます。

HTML

<ol class="layout_3_1">
	<li>うどん</li>
	<li>蕎麦</li>
	<li>スパゲッティー</li>
</ol>

CSS

.layout_3_1 {
	font-size: 16px;
	line-height: 1.7;
	background-color: #FDFDFD;
	padding-top: 20px;
	padding-right: 0px;
	padding-left: 0px;
	padding-bottom: 0px;
	margin-top: 0px;
	margin-right: 2%;
	margin-bottom: 15px;
	margin-left: 2%;
	border: dotted 1px #999999;
}

.layout_3_1 li {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 20px;
	margin-left: 40px;
}

.layout_3_1 a {
	text-decoration: none;
}

.layout_3_1 {
	font-size: 16px;
	line-height: 1.7;
	background-color: #FDFDFD;
	width: 94%;
	padding-top: 20px;
	padding-right: 0px;
	padding-left: 0px;
	padding-bottom: 0px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 15px;
	margin-left: auto;
	border: dotted 1px #999999;
}

.layout_3_1 li {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 20px;
	margin-left: 40px;
}

.layout_3_1 a {
	text-decoration: none;
}

• 理由は不明ですが、スマートフォン版だとwidthを指定せずmargin-right: 3%; margin-left: 3%;と書くと左側の罫線だけ消えてしまうため、widthを指定しています。