見出しのデザインをCSSのみでカスタマイズする(一部CSS3対応)

この記事は約25分で読めます。

  • LINEで送る

見出し デザイン

記事中に使用する見出しタグ「<h3></h3>、<h4></h4>」。
この見出しタグのデザインを変更するだけで、ブログ内のイメージはガラッと変わります。
賢威はシンプルな見出しタグが多いので、私はいつも見出しのデザインを変更しています。

見出しデザインは画像を使用する場合もありますが、
ここでは、CSSの修正のみで見出しのデザイン変えます。

シンプルな見出しから、凝った見出しまでデザインは様々なので、
あなたのWebサイト・ブログに合ったデザインを選んでください。

それぞれ、見出しデザインの見本とCSSへ追加するスタイルを並べています。
賢威の「h3」タグに合わせてCSSを作っていますので、
「h4」タグなど他に適用する場合は、フォントサイズ等を適宜変更して使用してください。

Topics

  1. 左ラインと下ラインのシンプルな見出し
  2. 上下2重ラインのシンプルな見出し
  3. 角丸のシンプルな見出し
  4. 外枠と長方形のワンポイントの見出し
  5. 角丸外枠と円のワンポイントの見出し
  6. 吹き出し型の見出し(賢威6.1プリティー版)
  7. リボン型の見出し
  8. ワンポイントと下線の見出し1
  9. 浮き出しているボックスの見出し
  10. 切り取ったようなラインの見出し
  11. 斜めに貼り付けたテープのような見出し
  12. 中が斜線になっている吹き出し型の見出し
  13. 右下が折れている紙のような見出し
  14. モザイクワンポイントの見出し
  15. 旗のような見出し
  16. ワンポイントと下線の見出し2
  17. 先頭文字を大きく際立たせた見出し
見出しサンプル1
h3{
	margin: 0 0 1.5em;
	padding: 0.8em;
	border-left: 7px solid #B92A2C;
	border-bottom: 1px dashed #B92A2C;
	font-size: 1.143em;
	font-weight: bold;
}
見出しサンプル2
h3{
	margin: 0 0 1.5em;
	padding: 0.8em;
	border-top: 3px double #B92A2C;
	border-bottom: 3px double #B92A2C;
	font-size: 1.143em;
	font-weight: bold;
}
見出しサンプル3
h3{
	margin: 0 0 1.5em;
	padding: 0.8em;
	border: 2px solid #B92A2C;
	font-size: 1.143em;
	font-weight: bold;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
}
見出しサンプル4
h3{
	position: relative;
	margin: 0 0 1.5em;
	padding: 0.8em 0 0.8em 1.5em;
	border: 2px solid #B92A2C;
	font-size: 1.143em;
	font-weight: bold;
}

h3:before{
	content: "";
	position: absolute;
	background: #B92A2C;
	top: 50%;
	left: 0.5em;
	margin-top :-15px;
	height: 30px;
	width: 8px;
	border-radius: 2px;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
}
見出しサンプル5
h3{
	position: relative;
	margin: 0 0 1.5em;
	padding: 0.8em 0 0.8em 2.5em;
	border: 1px solid #B92A2C;
	font-size: 1.143em;
	font-weight: bold;
	border-radius: 20px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
}

h3:before {
	content: "";
	position: absolute;
	background: #B92A2C;
	top: 50%;
	left: 0.5em;
	margin-top :-10px;
	height: 20px;
	width: 20px;
	border-radius: 15px;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	box-shadow: 1px 1px 1px #B92A2C inset;
	-moz-box-shadow: 1px 1px 1px #B92A2C inset;
	-webkit-box-shadow: 1px 1px 1px #B92A2C inset;
	-o-box-shadow: 1px 1px 1px #B92A2C inset;
	-ms-box-shadow: 1px 1px 1px #B92A2C inset;
}

見出しサンプル6
h3{
	position: relative;
	margin: 0 0 1.5em;
	padding: 0.8em;
	background: #B92A2C;
	color: #fff;
	font-size: 1.143em;
	font-weight: bold;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}

h3:after{
	position: absolute;
	bottom: -15px;
	left: 10%;
	z-index: 90;
	margin-left: -15px;
	border-top: 15px solid #B92A2C;
	border-left: 15px solid transparent;
	border-right: 15px solid transparent;
	border-bottom: 0;
	content: "";
}
見出しサンプル7
h3{
	position: relative;
	color: #fff;
	background: #B92A2C;
	font-size: 1.143em;
	font-weight: bold;
	margin: 0 -1.8em 1.5em -1.8em;
	padding: 0.8em;
	box-shadow: 0 1px 3px #777;
	-moz-box-shadow: 0 1px 3px #777;
	-webkit-box-shadow: 0 1px 3px #777;
	-o-box-shadow: 0 1px 3px #777;
	-ms-box-shadow: 0 1px 3px #777;
}

h3:after,
h3:before{
	content: "";
	position: absolute;
	top: 100%;
	height: 0;
	width: 0;
	border: 5px solid transparent;
	border-top: 5px solid #333;
}

h3:before{
	right: 0;
	border-left: 5px solid #333;
}

h3:after{
	left: 0;
	border-right: 5px solid #333;
}
見出しサンプル8
h3{
	position: relative;
	color: #111;
	font-size: 1.143em;
	font-weight: bold;
	margin: 0 0 1.5em;
	padding: 0.5em 0.5em 0.5em 1.7em;
	border-bottom: 3px solid #B92A2C;
}

h3:before{
	content: "";
	position: absolute;
	background: #d48789;
	top: 0;
	left: 0.4em;
	height: 12px;
	width: 12px;
	transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
}

h3:after{
	content: "";
	position: absolute;
	background:#d26466;
	top: 1.0em;
	left: 0;
	height: 8px;
	width: 8px;
	transform: rotate(15deg);
	-moz-transform: rotate(15deg);
	-webkit-transform: rotate(15deg);
	-o-transform: rotate(15deg);
	-ms-transform: rotate(15deg);
}
見出しサンプル9
h3{
	margin: 0 0 1.5em;
	padding: 0.8em;
	font-size: 1.143em;
	font-weight: bold;
	border: 2px solid #B92A2C;
	box-shadow: 3px 3px 3px rgba(0,0,0,0.4);
	-moz-box-shadow: 3px 3px 3px rgba(0,0,0,0.4);
	-webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.4);
	-o-box-shadow: 3px 3px 3px rgba(0,0,0,0.4);
	-ms-box-shadow: 3px 3px 3px rgba(0,0,0,0.4);
}
見出しサンプル10
h3{
	margin: 0 0 1.5em;
	padding: 0.8em;
	font-size: 1.143em;
	font-weight: bold;
	border-top: 1px dashed #aaa;
	border-bottom: 1px dashed #aaa;
	background: #eee;
	text-shadow: 1px 1px 0 rgba(255,255,255,1);
	box-shadow: 0 5px 4px -4px rgba(0,0,0,0.3) inset;
	-moz-box-shadow: 0 5px 4px -4px rgba(0,0,0,0.3) inset;
	-webkit-box-shadow: 0 5px 4px -4px rgba(0,0,0,0.3) inset;
	-o-box-shadow: 0 5px 4px -4px rgba(0,0,0,0.3) inset;
	-ms-box-shadow: 0 5px 4px -4px rgba(0,0,0,0.3) inset;
}
見出しサンプル11
h3{
	position: relative;
	padding: 0.8em;
	margin: 0 0 1.5em;
	font-size: 1.25em;
	font-weight: bold;
	text-align: center;
	color: #fff;
	background: #B92A2C;
	transform: rotate(-1deg) skew(-1deg);
	-webkit-transform: rotate(-1deg) skew(-1deg);
	-moz-transform: rotate(-1deg) skew(-1deg);
	-o-transform: rotate(-1deg) skew(-1deg);
	-ms-transform: rotate(-1deg) skew(-1deg);
	box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2), 1.0em 0 0 0 #B92A2C, -1.0em 0 0 0 #B92A2C;
	-moz-box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2), 1.0em 0 0 0 #B92A2C, -1.0em 0 0 0 #B92A2C;
	-webkit-box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2), 1.0em 0 0 0 #B92A2C, -1.0em 0 0 0 #B92A2C;
	-o-box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2), 1.0em 0 0 0 #B92A2C, -1.0em 0 0 0 #B92A2C;
	-ms-box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2), 1.0em 0 0 0 #B92A2C, -1.0em 0 0 0 #B92A2C;
}
見出しサンプル12
h3{
	position: relative;
	padding: 0.8em;
	margin: 0 0 1.5em;
	font-size: 1.143em;
	font-weight: bold;
	color: #333;
	background: #fff;
	text-shadow: 1px 1px 0 #fff, 1px 1px 0 #999;
	border: #B92A2C solid 2px;
	background-image: -webkit-gradient(linear, left top, right bottom,
		from(			rgba(255, 255, 255, 0.0)), 
		color-stop(0.4, rgba(255, 255, 255, 0.0)), 
		color-stop(0.4, rgba(0, 0, 0, 0.1)), 
		color-stop(0.6, rgba(0, 0, 0, 0.1)), 
		color-stop(0.6, rgba(255, 255, 255, 0.0)),
		to(				rgba(255, 255, 255, 0.0))
		);
	background-image: -webkit-linear-gradient(top -45deg,
		transparent 40%,
		rgba(0, 0, 0, 0.1) 40%,
		rgba(0, 0, 0, 0.1) 60%,
		transparent 60%
			);
	background-image: -moz-linear-gradient(top -45deg,
			transparent 40%,
		rgba(0, 0, 0, 0.1) 40%,
		rgba(0, 0, 0, 0.1) 60%,
		transparent 60%
			);
	background-image: -o-linear-gradient(top -45deg,
			transparent 40%,
		rgba(0, 0, 0, 0.1) 40%,
		rgba(0, 0, 0, 0.1) 60%,
		transparent 60%
			);
	background-image: linear-gradient(to bottom -45deg,
			transparent 40%,
		rgba(0, 0, 0, 0.1) 40%,
		rgba(0, 0, 0, 0.1) 60%,
		transparent 60%
			);
	background-size:4px 4px;
}

h3:before{
	content: " ";
	position: absolute;
	top: 100%;
	left: 24px;
	width: 0;
	height: 0;
	border-width: 12px;
	border-style: solid;
	border-color: transparent;
	border-top-color: #B92A2C;
}

h3:after{
	content: " ";
	position: absolute;
	top: 100%;
	left: 28px;
	width: 0;
	height: 0;
	border-width: 8px;
	border-style: solid;
	border-color: transparent;
	border-top-color: #F0F0F0;
	z-index:1;
}
見出しサンプル13
h3{
	position: relative;
	margin: 0 0 1.5em;
	padding: 0.8em;
	font-size: 1.143em;
	font-weight: bold;
	color: #fff;
	background: #B92A2C;
	box-shadow: 12px 0 0 0 #B92A2C, 0 12px 0 0 #B92A2C, 1px 15px 4px -3px rgba(0,0,0,0.2);
	-moz-box-shadow: 12px 0 0 0 #B92A2C, 0 12px 0 0 #B92A2C, 1px 15px 4px -3px rgba(0,0,0,0.2);
	-webkit-box-shadow: 12px 0 0 0 #B92A2C, 0 12px 0 0 #B92A2C, 1px 15px 4px -3px rgba(0,0,0,0.2);
	-o-box-shadow: 12px 0 0 0 #B92A2C, 0 12px 0 0 #B92A2C, 1px 15px 4px -3px rgba(0,0,0,0.2);
	-ms-box-shadow: 12px 0 0 0 #B92A2C, 0 12px 0 0 #B92A2C, 1px 15px 4px -3px rgba(0,0,0,0.2);
}

h3:before{
	content: " ";
	position: absolute;
	top: 100%;
	left: 100%;
	width: 0;
	height: 0;
	border-width: 12px 12px 0 0;
	border-style: solid;
	border-color: transparent;
	border-top-color: #822022;
}

h3:after{
	content: " ";
	position: absolute;
	padding: 0 20px;
	bottom: 0;
	left: 0.8em;
	width: 10.0em;
	height: 1.5em;
	background: rgba(255,244,244,0.4);
	transform: rotate(-1deg);
	-webkit-transform: rotate(-1deg);
	-moz-transform: rotate(-1deg);
	-o-transform: rotate(-1deg);
}
見出しサンプル14
h3{
	position: relative;
	margin: 0 0 1.5em;
	padding: 0.6em 0.4em 0.6em 4.0em;
	font-size: 1.143em;
	font-weight: bold;
	color: #fff;
	background: #333333;
	z-index: 1;
}

h3:before{
	content: " ";
	position: absolute;
	top: 0;
	left: 0;
	width: 40px;
	height: 40px;
	border-right: #fff solid 2px;
	background: #B92A2C;
	background-image: -webkit-gradient(linear, left top, left bottom,
			from(			 rgba(255, 255, 255, 0.0)), 
			color-stop(0.20, rgba(255, 255, 255, 0.0)), 
			color-stop(0.20, rgba(255, 255, 255, 0.1)), 
			color-stop(0.40, rgba(255, 255, 255, 0.1)), 
			color-stop(0.40, rgba(255, 255, 255, 0.3)), 
			color-stop(0.60, rgba(255, 255, 255, 0.3)), 
			color-stop(0.60, rgba(255, 255, 255, 0.5)), 
			color-stop(0.80, rgba(255, 255, 255, 0.5)), 
			color-stop(0.80, rgba(255, 255, 255, 0.6)), 
			to(				 rgba(255, 255, 255, 0.6))
			);
	background-image: -webkit-linear-gradient(top,
			transparent 20%,
			rgba(255, 255, 255, 0.1) 20%, 
			rgba(255, 255, 255, 0.1) 40%, 
			rgba(255, 255, 255, 0.3) 40%, 
			rgba(255, 255, 255, 0.3) 60%, 
			rgba(255, 255, 255, 0.5) 60%, 
			rgba(255, 255, 255, 0.5) 80%, 
			rgba(255, 255, 255, 0.6) 80%, 
			rgba(255, 255, 255, 0.6) 100%
			);
	background-image: -moz-linear-gradient(top,
			transparent 20%,
			rgba(255, 255, 255, 0.1) 20%, 
			rgba(255, 255, 255, 0.1) 40%, 
			rgba(255, 255, 255, 0.3) 40%, 
			rgba(255, 255, 255, 0.3) 60%, 
			rgba(255, 255, 255, 0.5) 60%, 
			rgba(255, 255, 255, 0.5) 80%, 
			rgba(255, 255, 255, 0.6) 80%, 
			rgba(255, 255, 255, 0.6) 100%
			);
	background-image: -o-linear-gradient(top,
			transparent 20%,
			rgba(255, 255, 255, 0.1) 20%, 
			rgba(255, 255, 255, 0.1) 40%, 
			rgba(255, 255, 255, 0.3) 40%, 
			rgba(255, 255, 255, 0.3) 60%, 
			rgba(255, 255, 255, 0.5) 60%, 
			rgba(255, 255, 255, 0.5) 80%, 
			rgba(255, 255, 255, 0.6) 80%, 
			rgba(255, 255, 255, 0.6) 100%
			);
	background-image: linear-gradient(to bottom,
			transparent 20%,
			rgba(255, 255, 255, 0.1) 20%, 
			rgba(255, 255, 255, 0.1) 40%, 
			rgba(255, 255, 255, 0.3) 40%, 
			rgba(255, 255, 255, 0.3) 60%, 
			rgba(255, 255, 255, 0.5) 60%, 
			rgba(255, 255, 255, 0.5) 80%, 
			rgba(255, 255, 255, 0.6) 80%, 
			rgba(255, 255, 255, 0.6) 100%
			);
			z-index:-1;
}

h3:after{
	content: " ";
	position: absolute;
	top: 0;
	left: 0;
	width: 40px;
	height: 40px;
	background-image: -webkit-gradient(linear, left top, right top,
			from(			 rgba(255, 255, 255, 0.0)), 
			color-stop(0.20, rgba(255, 255, 255, 0.0)), 
			color-stop(0.20, rgba(255, 255, 255, 0.1)), 
			color-stop(0.40, rgba(255, 255, 255, 0.1)), 
			color-stop(0.40, rgba(255, 255, 255, 0.3)), 
			color-stop(0.60, rgba(255, 255, 255, 0.3)), 
			color-stop(0.60, rgba(255, 255, 255, 0.5)), 
			color-stop(0.80, rgba(255, 255, 255, 0.5)), 
			color-stop(0.80, rgba(255, 255, 255, 0.6)), 
			to(				 rgba(255, 255, 255, 0.6))
			);
	background-image: -webkit-linear-gradient(left,
			transparent 20%,
			rgba(255, 255, 255, 0.1) 20%, 
			rgba(255, 255, 255, 0.1) 40%, 
			rgba(255, 255, 255, 0.3) 40%, 
			rgba(255, 255, 255, 0.3) 60%, 
			rgba(255, 255, 255, 0.5) 60%, 
			rgba(255, 255, 255, 0.5) 80%, 
			rgba(255, 255, 255, 0.6) 80%, 
			rgba(255, 255, 255, 0.6) 100%
			);
	background-image: -moz-linear-gradient(left,
			transparent 20%,
			rgba(255, 255, 255, 0.1) 20%, 
			rgba(255, 255, 255, 0.1) 40%, 
			rgba(255, 255, 255, 0.3) 40%, 
			rgba(255, 255, 255, 0.3) 60%, 
			rgba(255, 255, 255, 0.5) 60%, 
			rgba(255, 255, 255, 0.5) 80%, 
			rgba(255, 255, 255, 0.6) 80%, 
			rgba(255, 255, 255, 0.6) 100%
			);
	background-image: -o-linear-gradient(left,
			transparent 20%,
			rgba(255, 255, 255, 0.1) 20%, 
			rgba(255, 255, 255, 0.1) 40%, 
			rgba(255, 255, 255, 0.3) 40%, 
			rgba(255, 255, 255, 0.3) 60%, 
			rgba(255, 255, 255, 0.5) 60%, 
			rgba(255, 255, 255, 0.5) 80%, 
			rgba(255, 255, 255, 0.6) 80%, 
			rgba(255, 255, 255, 0.6) 100%
			);
	background-image: linear-gradient(to right,
			transparent 20%,
			rgba(255, 255, 255, 0.1) 20%, 
			rgba(255, 255, 255, 0.1) 40%, 
			rgba(255, 255, 255, 0.3) 40%, 
			rgba(255, 255, 255, 0.3) 60%, 
			rgba(255, 255, 255, 0.5) 60%, 
			rgba(255, 255, 255, 0.5) 80%, 
			rgba(255, 255, 255, 0.6) 80%, 
			rgba(255, 255, 255, 0.6) 100%
			);
			z-index:-1;
}
見出しサンプル15
h3{
	position: relative;
	margin: 0 0 1.5em;
	padding: 0.8em;
	font-size: 1.143em;
	font-weight: bold;
	color: #fff;
	background: #B92A2C;
}

h3:before{
	content: "<";
	position: absolute;
	top: middle;
	left: -10px;
	width: 0;
	height: 0;
	font-size: 25px;
	line-height: 1.0;
	color: #c96;
}

h3:after{
	content: " ";
	position: absolute;
	top: -2px;
	left: -10px;
	width: 0;
	height: 130%;
	border: #600 solid 2px;
	border-radius:2px;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	transform: rotate(-2deg);
	-webkit-transform: rotate(-2deg);
	-moz-transform: rotate(-2deg);
	-o-transform: rotate(-2deg);

}
見出しサンプル16
h3{
	position: relative;
	font-size: 1.143em;
	font-weight: bold;
	margin: 0 0 1.5em;
	padding: 0.5em 0.5em 0.5em 2.0em;
	border-bottom: 2px solid #B92A2C;
}

h3:before{
	content: "□";
	font-size: 200%;
	position: absolute;
	color: #ff6b6e;
	top: -0.8em;
	left: 0.3em;
	height: 12px;
	width: 12px;
}

h3:after{
	content: "□";
	font-size: 200%;
	position: absolute;
	color: #B92A2C;
	top: -0.5em;
	left: 0;
	height: 12px;
	width: 12px;
}
見出しサンプル17
h3{
	color: #111;
	font-size: 1.143em;
	font-weight: bold;
	margin: 0 0 1.5em;
	border-bottom: 2px solid #B92A2C;
	box-shadow: 0 1px 0 #aaaaaa;
	-webkit-box-shadow: 0 1px 0 #aaaaaa;
	-moz-box-shadow: 0 1px 0 #aaaaaa;
	text-shadow: #999999 0px 1px 1px;
}

h3{
	font-size:3.0em;
}

一部のデザインで以下のサイトを参考させて頂き、賢威用にアレンジしました。

H1一つでここまで出来るCSS見出しデザインのアイデア9個 | SQUEEZE
CSSの擬似要素を使った見出しデザイン | Webpark

  • LINEで送る

“見出しのデザインをCSSのみでカスタマイズする(一部CSS3対応)” への27件のフィードバック

  1. […] 見出しのデザインをCSSのみでカスタマイズする(一部CSS3対応) | 賢威カスタマイズ研究所 […]

  2. […] H2タグのスタイルは「賢威カスタマイズ研究所」さんの記事「見出しのデザインをCSSのみでカスタマイズする」のCSSを参考にさせてもらいました。サンプルコードから色と幅を変えただけの結果がコレです。おおむね満足の結果となりました。 […]

  3. […] 見出しのデザインをCSSのみでカスタマイズする(一部CSS3対応) | 賢威カスタマイズ研究所 via kwout […]

  4. […] デザインとコード取得ができる参考サイトはこちら ※ご自身でお気に入りのデザインを他のサイト等で探してコード取得しておいてもOKです。   上記の参考にさせていただいたサイ […]

  5. […] 見出しのデザインをCSSのみでカスタマイズする(一部CSS3対応) | 賢威カスタマイズ研究所 […]

  6. […] なお、このカスタマイズについては、『賢威カスタマイズ研究所』さんのこの記事を参考にさせていただきました。 […]

  7. […] 見出しのデザインをCSSのみでカスタマイズする(一部CSS3対応) […]

  8. […] 見出しのデザインをCSSのみでカスタマイズする(一部CSS3対応) […]

  9. […] サンプル10~13は見出しのデザインをCSSのみでカスタマイズする(一部CSS3対応)を参考にさせていただきました。 […]

  10. […] 見出しのデザインをCSSのみでカスタマイズする(一部CSS3対応) […]

  11. […] | WEB道 CSS見出し-ジェネレーター | WEB道   見出しのデザインをCSSのみでカスタマイズする(一部CSS3対応) | […]

  12. […] 参照サイト:WordPressテーマ マテリアル 見出しデザイン参照:賢威カスタマイズ研究所 […]

  13. […] 見出しのデザインをCSSのみでカスタマイズする(一部CSS3対応) […]

  14. […] 参考 見出しのデザインをCSSのみでカスタマイズする(一部CSS3対応)−賢威カスタマイズ研究所− […]

  15. […] 見出しのデザインをCSSのみでカスタマイズする(一部CSS3対応) […]

  16. […] 見出し5と6は“賢威カスタマイズ研究所”さんの物を色を変えて使用しています。 […]

  17. […] 見出しのデザインをCSSのみでカスタマイズする CSS でカッコいい見出しをつくろう アクセントに使えるCSSのborderと擬似要素を使った立体的な見出しデザイン […]

コメントを残す

このページの先頭へ