【CSSで装飾】コピペで簡単！CSSおすすめシンプルな見出し５選

HPやブログでは、見出しのデザインが最初に目に入ります。
ここでは、コピペで簡単に使える見出しを紹介します。

h1やh2、カラーコードなんかを書き換えて使ってください。

使い方

媒体によっていろいろありますが、CSSコードはCSSファイルに書き込み、HTML<h1>の部分はHTMLファイルに書き込みましょう。

シンプルでおしゃれな見出し

ワンポイント

border-bottomのカラーコードを変えると、下の線の色が変わります。
dotted 1px　は、線がドット（点線）で、太さが１pxとなります。
こちらもカスタム可能。

<h1>最初の文字だけ加工する見出しデザイン</h1>

h1{
	position: relative;
	padding:0 0 5px 0;
	font-size:20px;
	border-bottom:#BFBFBF dotted 1px;
}
h1:first-letter{
	font-size:35px;
	color:#325A8C;
}

ワンポイント

背景が白じゃないときは、「span」の背景色も白から変更してください。
h1 span{　の、background-color: #fff;　の#fffを背景色に

<h1><span>両端消えボーダーデザイン</span></h1>

h1{
	position: relative;
	text-align: center;
	font-size:20px;
}
h1::before{
	position: absolute;
	top: 50%;
	z-index: 1;
	content: "";
	display: block;
	width: 100%;
	height: 1px;
	background: #000;
	background: linear-gradient(-45deg, transparent, #325A8C 10%, #325A8C 90%, transparent);
}
h1 span{
	position: relative;
	z-index: 2;
	display: inline-block;
	padding: 0 20px;
	background-color: #fff;
	text-align: left;
}

ワンポイント

before,after両方にcontentで「□」を指定してます。
▽にしてもいいですし、before,afterを別の図形にしていしてもOKです。

<h1>頭にマーク付きのデザイン</h1>

h1{
	position: relative;
	padding-left: 30px;
	font-size:25px;
	color: #db7093;　/*左に来る□の色と文字色*/
}
h1::before,
h1::after{
	content: "□";
	position: absolute;
}
h1::before{
	left:0;
	top:-3px;
}
h1::after{
	left: 5px;
	top: 3px;
	color: #ffb6c1;　/*右に来る□の色*/
}

ワンポイント

色を変えたり始まり位置をかえたりで
だいぶ印象がかわります。透明度をいじってもOKですよ。

<h2>ボーダーカラフルデザイン</h2>

h2{
	padding:6px 0;
	border-bottom:6px solid #ff1493;/*ボーダーの太さ6px　色#ff1493*/
	position:relative;
}
h2:before, h2:after{
	content:"";
	display:block;
	height:6px;/*ボーダーの太さ変えたらここも変えよう*/
	position:absolute;
	bottom:-6px;/*ここも同じ数字に*/
}
h2:before{
	width:15%;/*二つ目のラインの幅変更*/
	left:5%;/*二つ目のラインの始まり位置変更*/
	background:rgba(255,255,255,0.7);/*RGBAカラーモデル 0.7は透明度*/
}
h2:after{
	width:10%;/*三つ目のラインの幅*/
	left:25%;
	background:rgba(100,50,50,0.3);
}

ワンポイント

立体的に山型になっています。
上の色を変更すると、下はその影が濃くなったような色になります。

<h1>ボーダーデザイン</h1>

h1 {
	margin-bottom: 50px;/*ボーダーの下のマージン*/
	padding: 0 0 5px;
	width: 100%;/*幅の指定*/
	color: #800000;/*フォントの色指定*/
	font-size: 24px;
	font-weight: normal;
	border-bottom: 8px ridge #f08080/*太さpxと上のラインの色*/
}