ドーナツ型二重丸

目的

• ドーナツ型の二重丸の見出しにしたい。

実行結果

サンプルテキスト

解説

• シンプルな下線にアクセントを付けたい時にオススメ。

HTML

<h6 class="layout_2_6"><span><span></span></span><span>サンプルテキスト</span></h6>

CSS

.layout_2_6 {
	display: flex;
	align-items: flex-start;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 5px;
	margin-left: 20px;
}

.layout_2_6 > span:first-child {
	background-color: #563724;
	display: block;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	flex-shrink: 0;
}

.layout_2_6 > span:first-child > span {
	background-color: #FFFFFF;
	display: block;
	width: 16px;
	height: 16px;
	margin-top: 8px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 8px;
	border-radius: 50%;
}

.layout_2_6 > span + span {
	font-size: 20px;
	line-height: 1.7;
	font-weight: bold;
	text-decoration: underline;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 8px;
}

• ドーナツ型二重丸の大きさを変えるなら17行目〜18行目を変更後、26行目･27行目･28行目･31行目･36行目を同じ比率で変更してください。

.layout_2_6 {
	display: flex;
	align-items: flex-start;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 5px;
	margin-left: 10px;
}

.layout_2_6 > span:first-child {
	background-color: #563724;
	display: block;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	flex-shrink: 0;
}

.layout_2_6 > span:first-child > span {
	background-color: #FFFFFF;
	display: block;
	width: 12px;
	height: 12px;
	margin-top: 6px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 6px;
	border-radius: 50%;
}

.layout_2_6 > span + span {
	font-size: 16px;
	line-height: 1.7;
	font-weight: bold;
	text-decoration: underline;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 6px;
}

• スマホ版の解説内容はPC版と同じなので、PC版をご覧ください。