左線+下線

目的

• 左と下に罫線を入れるだけのシンプルな見出しが欲しい。
• 2つの罫線は僅かに余白を付け、少しズラしてやや立体的に見せたい。

実行結果

サンプルテキスト

解説

• コンテンツの邪魔をせず、さりげなく見出しを付けたい時にオススメです。

HTML

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

CSS

.layout_2_3 {
	display: inline-block;
	padding-top: 5px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 20px;
	border-bottom-style: solid;
	border-bottom-width: 2px;
	border-bottom-color: #000000;
}

.layout_2_3 span {
	font-size: 16px;
	font-weight: bold;
	padding-top: 0px;
	padding-right: 5px;
	padding-bottom: 0px;
	padding-left: 5px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 5px;
	border-left-style: solid;
	border-left-width: 3px;
	border-left-color: #000000;
}

• 2行目のdisplay: inline-block;を入れる事で、下の罫線は最後のテキストの位置で止まる可変型になっています。入れないと端まで伸びてしまいます。

.layout_2_3 {
	display: inline-block;
	padding-top: 5px;
	padding-right: 0px;
	padding-bottom: 2px;
	padding-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 10px;
	border-bottom-style: solid;
	border-bottom-width: 2px;
	border-bottom-color: #000000;
}

.layout_2_3 span {
	font-size: 14px;
	font-weight: bold;
	padding-top: 0px;
	padding-right: 5px;
	padding-bottom: 0px;
	padding-left: 5px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 4px;
	border-left-style: solid;
	border-left-width: 3px;
	border-left-color: #000000;
}

• 2行目のdisplay: inline-block;を入れる事で、下の罫線は最後のテキストの位置で止まる可変型になっています。入れないと端まで伸びてしまいます。
• display: inline-block;を使い、値の単位に%を使うと、Safariなどのスマートフォンブラウザーで最後の1文字が改行される不具合が起きるためpxにしています。