シンプル角丸

目的

• シンプルな角丸の見出しにしたい。

実行結果

サンプルテキスト

解説

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

HTML

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

CSS

.layout_2_5 {
	font-size: 16px;
	line-height: 16px;
	font-weight: bold;
	color: #FFFFFF;
	background-color: #064458;
	display: inline-block;
	padding-top: 8px;
	padding-right: 8px;
	padding-bottom: 8px;
	padding-left: 8px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 5px;
	margin-left: 20px;
	border-radius: 6px;
}

.layout_2_5 {
	font-size: 14px;
	line-height: 14px;
	font-weight: bold;
	color: #FFFFFF;
	background-color: #064458;
	display: inline-block;
	padding-top: 8px;
	padding-right: 8px;
	padding-bottom: 8px;
	padding-left: 8px;
	margin-top: 0px;
	margin-right: 0ox;
	margin-bottom: 5px;
	margin-left: 15px;
	border-radius: 6px;
}