コピペで使える！CSSとHTMLだけで作るシンプルな見出し12個

こんにちは！新年明けましておめでとうございます。 ANDSPACE コーダーの足立です。

見出し一つでサイトの印象はガラリと変わります。
今回はCSSとHTMLのみを使った、HTML・CSS初心者でもコピペで使用できる見出しデザインを掲載していきたいと思います。

共通スタイル

全ての見出しで使用しているスタイルです。
フォントのサイズ、上下の余白感じはこれを調整してください

.h3 {
  font-weight: bold;
  font-size: 24px;
  margin-top: 20px;
  margin-bottom: 40px;
}

1.アンダーライン

見出しデザイン

HTML

<h3 class="midashi_underline01">見出しデザイン</h3>

css

.midashi_underline01{
	padding-bottom: 10px;
	border-bottom: 1px solid #000;
}

2.アンダーライン（点線）

見出しデザイン

HTML

<h3 class="midashi_underline02">見出しデザイン</h3>

css

.midashi_underline02{
	padding-bottom: 10px;
	border-bottom: 1px dashed #000;
}

3.アンダーライン（グラデーション）

見出しデザイン

HTML

<h3 class="midashi_underline03">見出しデザイン</h3>

css

.midashi_underline03{
	padding-bottom: 10px;
	position: relative;
}
.midashi_underline03:after{
	content: "";
	width: 100%;
	height: 1px;
	position: absolute;
	left: 0px;
	bottom:0px;
	background: rgba(222,0,127,0.8);
	background: -moz-linear-gradient(-45deg, rgba(222,0,127,0.9) 0%, #1e257d 100%);
	background: -webkit-linear-gradient(-45deg, rgba(222,0,127,0.9) 0%,#1e257d 100%);
	background: linear-gradient(135deg, rgba(222,0,127,0.9) 0%,#1e257d 100%);
}

4.上下線

見出しデザイン

HTML

<h3 class="midashi_line">見出しデザイン</h3>

css

.midashi_line{
	padding: 10px 0px;
	border-bottom: 1px solid #000;
	border-top: 1px solid #000;
}

5.縦ライン

見出しデザイン

HTML

<h3 class="midashi_vertical">見出しデザイン</h3>

css

.midashi_vertical{
	padding-left: 10px;
	border-left: 5px solid #000;
}

5.マーカー

見出しデザイン

HTML

<h3 class="midashi_maker">見出しデザイン</h3>

css

.midashi_maker{
	background-image: -webkit-linear-gradient(transparent 70%, #FF0 0%);
    background-image: -o-linear-gradient(transparent 70%, #FF0 0%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(70%, transparent), color-stop(0%, #FF0));
    background-image: linear-gradient(transparent 70%, #FF0 0%);
}

6.四角

見出しデザイン

HTML

<h3 class="midashi_square">見出しデザイン</h3>

css

.midashi_square{
	padding-left: 20px;
	position: relative;
}
.midashi_square:before{
	content: "";
	width: 10px;
	height: 10px;
	background-color: #000;
	position: absolute;
	left: 0px;
	top: 50%;
	transform: translateY(-50%);
}

7.ひし形

見出しデザイン

HTML

<h3 class="midashi_diamond">見出しデザイン</h3>

css

.midashi_diamond{
	padding-left: 20px;
	position: relative;
}
.midashi_diamond:before{
	content: "";
	width: 10px;
	height: 10px;
	background-color: #000;
	position: absolute;
	left: 0px;
	top: 50%;
	transform: translateY(-50%) rotate(45deg);
}

8.丸

見出しデザイン

HTML

<h3 class="midashi_circle">見出しデザイン</h3>

css

.midashi_circle{
	padding-left: 20px;
	position: relative;
}
.midashi_circle:before{
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: #000;
	position: absolute;
	left: 0px;
	top: 50%;
	transform: translateY(-50%);
}

8.罫線

見出しデザイン

HTML

<h3 class="midashi_ruledline">見出しデザイン</h3>

css

.midashi_ruledline{
	padding: 15px;
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
	position: relative;
}
.midashi_ruledline:before,.midashi_ruledline:after{
	content: "";
	width: 1px;
	height: 120%;
	background-color: #000;
	position: absolute;
	top: -10%;
}
.midashi_ruledline:before{
	left: 5px;
}
.midashi_ruledline:after{
	right: 5px;
}

9.背景色

見出しデザイン

HTML

<h3 class="midashi_color">見出しデザイン</h3>

css

.midashi_color{
	padding: 15px;
	background-color: #efefef;
}

10.吹き出し

見出しデザイン

HTML

<h3 class="midashi_hukidashi01">見出しデザイン</h3>

css

.midashi_hukidashi01{
	padding: 15px;
	background-color: #efefef;
	position: relative;
}
.midashi_hukidashi01:after{
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 10px 10px 0 10px;
	border-color: #efefef transparent transparent transparent;
	position: absolute;
	left: 20px;
	bottom: -10px;
}

11.吹き出し2

見出しデザイン

HTML

<h3 class="midashi_hukidashi02"><span>見出しデザイン</span></h3>

css

.midashi_hukidashi02 span{
	display: inline-block;
	position: relative;
	padding-bottom: 10px;
	border-bottom: 1px solid #000;
}
.midashi_hukidashi02 span:after{
	content: "";
	width: 10px;
	height: 10px;
	border-top: 1px solid #000;
	border-right: 1px solid #000;
	background-color: #fff;
	transform: rotate(135deg) translateY(50%);
	position: absolute;
	bottom: -10px;
	left: 50%;
}

12.中央線

見出しデザイン

HTML

<h3 class="midashi_centerline"><span>見出しデザイン</span></h3>

css

.midashi_centerline span{
	display: inline-block;
	position: relative;
	padding-bottom: 10px;
}
.midashi_centerline span:after{
	content: "";
	width: 50px;
	height: 3px;
	background-color: #000;
	transform:  translateX(-50%);
	position: absolute;
	bottom: 0px;
	left: 50%;
}

いかがでしたでしょうか？
短めのCSSでも、いろいろな見出しを作ることができます。今回ご紹介した見出しは、全てCSSとHTMLのみで再現できます。
慣れてきた方は一度自分でオリジナルの見出しを作ったりしてみてはいかがでしょうか。
以上、実家から帰ってきて早速飼い猫が恋しい足立でした。