なるべく簡単に実装できる見出しデザインのサンプルです。※このサイトで使っている見出しとほぼ同じです。

可変する上下の線

見出しテキストの上下に線を入れます。線の幅は文字数で可変です。

次の要素はblock要素じゃないとレイアウトが崩れるので注意してください。

DEMO

HTML

<h1>見出しデザイン</h1>

※見出しのレベルは適宜変更してください

CSS

h1 {
    font-size: 1.8em;
    font-weight: 400;
    text-align: center;
    
	display: inline-block;
	padding: 1em 0;
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
	margin: 1em auto;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
    margin-bottom: 2em;
}

見出しの両脇に直線

見出しの両脇に直線を入れます。文字数に応じて左右の直線は可変です。

DEMO

HTML

<h1>見出しデザイン</h1>

※見出しのレベルは適宜変更してください

CSS

h1 {
    font-size: 1.8em;
    font-weight: 400;
    text-align: center;
    
    display: flex;
    align-items: center;
    -webkit-display: flex;
    -webkit-align-items: center;
    box-sizing: border-box;
    background-color: transparent;
    margin-bottom: 2em;
}

h1:before, h1:after {
    content: "";
    flex-grow: 1;
    height: 1px;
    display: block;
    background-color: #000;
    min-width: 5%;
}
 
h1:before {
    margin-right: 1em;
}
 
h1:after {
    margin-left: 1em;

文字数で変動しない中央揃えの下線

見出しの下に小さめの直線を入れます。線の幅は固定です。

DEMO

HTML

<h1>見出しデザイン</h1>

※見出しのレベルは適宜変更してください

CSS

h1 {
    font-size: 1.8em;
    font-weight: 400;
    text-align: center;
    
    position: relative;
    text-align: center;
    box-sizing: border-box;
    padding: 0;
    background-color: transparent;
    margin-bottom: 2em;
}
 
h1:before {
    content: "";
    position: absolute;
    bottom: -15px;
    display: inline-block;
    width: 60px;
    height: 1px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    background-color: #000;
}

文字数に応じて可変する斜めストライプ背景

文字数に応じてサイズが変わる斜めストライプの背景です。

次の要素はblock要素じゃないとレイアウトが崩れるので注意してください。

DEMO

HTML

<h1>見出しデザイン</h1>

※見出しのレベルは適宜変更してください

CSS

h1 {
    font-size: 1.8em;
    font-weight: 400;
    text-align: center;
    
	display: inline-block;
	text-align: center;
	padding: 0.5em;
	background: repeating-linear-gradient(45deg, #e9e9e9, #e9e9e9 3px, #f5f5f5, 3px, #f5f5f5 6px);
    margin: 0 auto 2em;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
}