Lilac Bloom 見出しデザイン・チートシート（全10種）

コピー＆ペーストで使える、おしゃれな見出しデザインのバリエーションです。デザインを確認し、その下のコードをあなたのサイトのカスタムCSSへ貼り付けてください。

[title]HTML: ステッチ風[/title]
<h2 class="lb-h-stitch">Stitch Style Heading</h2>

[title]CSS: ステッチ風[/title]
.lb-h-stitch {
    font-size: 1.5rem;
    margin: 0;
    font-weight: bold;
	background: #bd93f9;
	color: #fff;
	padding: 15px 25px;
	border: 2px dashed #fff;
	box-shadow: 0 0 0 6px #bd93f9;
	border-radius: 4px;
}

[title]HTML: 二色ライン[/title]
<h2 class="lb-h-gradient">Gradient Line Heading</h2>

[title]CSS: 二色ライン[/title]
.lb-h-gradient {
    font-size: 1.5rem;
    margin: 0;
    font-weight: bold;
	position: relative;
	padding-bottom: 10px;
}

.lb-h-gradient::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 4px;
	background: linear-gradient(to right, #bd93f9 0%, #ff79c6 100%);
	border-radius: 2px;
}

[title]HTML: 吹き出し風[/title]
<h2 class="lb-h-bubble">Speech Bubble Heading</h2>

[title]CSS: 吹き出し風[/title]
.lb-h-bubble {
    font-size: 1.5rem;
    margin: 0;
    font-weight: bold;
	position: relative;
	background: #f1e9ff;
	padding: 15px 20px;
	border-radius: 8px;
	color: #6a5acd;
}

.lb-h-bubble::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 30px;
	border: 12px solid transparent;
	border-top: 12px solid #f1e9ff;
}

[title]HTML: ストライプ[/title]
<h2 class="lb-h-stripe">Stripe Pattern Heading</h2>

[title]CSS: ストライプ[/title]
.lb-h-stripe {
    font-size: 1.5rem;
    margin: 0;
    font-weight: bold;
	padding: 10px 15px;
	background: repeating-linear-gradient(-45deg, #f9f5ff, #f9f5ff 5px, #fff 5px, #fff 10px);
	border-left: 8px solid #bd93f9;
	border-bottom: 1px solid #bd93f9;
}

[title]HTML: ブラケット[/title]
<h2 class="lb-h-bracket">Bracket Style Heading</h2>

[title]CSS: ブラケット[/title]
.lb-h-bracket {
    font-size: 1.5rem;
    margin: 0;
    font-weight: bold;
	display: flex;
	align-items: center;
}

.lb-h-bracket::before, .lb-h-bracket::after {
	content: "";
	width: 15px;
	height: 35px;
	border: 4px solid #bd93f9;
}

.lb-h-bracket::before { border-right: none; margin-right: 15px; }
.lb-h-bracket::after { border-left: none; margin-left: 15px; }

[title]HTML: リボン風[/title]
<h2 class="lb-h-ribbon">Ribbon Style Heading</h2>

[title]CSS: リボン風[/title]
.lb-h-ribbon {
    font-size: 1.5rem;
    margin: 0;
    font-weight: bold;
	position: relative;
	background: #bd93f9;
	color: #fff;
	padding: 10px 20px;
	display: inline-block;
}

.lb-h-ribbon::before {
	content: "";
	position: absolute;
	top: 100%;
	left: 0;
	border-right: 15px solid #6a5acd;
	border-bottom: 15px solid transparent;
}

[title]HTML: 二重線[/title]
<h2 class="lb-h-double-line">Double Line Heading</h2>

[title]CSS: 二重線[/title]
.lb-h-double-line {
    font-size: 1.5rem;
    margin: 0;
    font-weight: bold;
	padding: 10px 0;
	border-top: 2px solid #bd93f9;
	border-bottom: 2px solid #bd93f9;
	text-align: center;
}

[title]HTML: マーカー[/title]
<h2 class="lb-h-marker">Marker Style Heading</h2>

[title]CSS: マーカー[/title]
.lb-h-marker {
    font-size: 1.5rem;
    margin: 0;
    font-weight: bold;
	display: inline-block;
	background: linear-gradient(transparent 60%, #e9d5ff 60%);
	padding: 0 10px;
}

[title]HTML: チェック[/title]
<h2 class="lb-h-check">Check Style Heading</h2>

[title]CSS: チェック[/title]
.lb-h-check {
    font-size: 1.5rem;
    margin: 0;
    font-weight: bold;
	position: relative;
	padding-left: 45px;
}

.lb-h-check::before {
	content: "";
	position: absolute; left: 0; top: 50%;
	transform: translateY(-50%);
	width: 30px; height: 30px;
	background: #bd93f9; border-radius: 4px;
}

.lb-h-check::after {
	content: "";
	position: absolute; left: 8px; top: 45%;
	transform: translateY(-50%) rotate(45deg);
	width: 7px; height: 14px;
	border-right: 3px solid #fff; border-bottom: 3px solid #fff;
}

[title]HTML: 3Dシャドウ[/title]
<h2 class="lb-h-3d">3D Shadow Heading</h2>

[title]CSS: 3Dシャドウ[/title]
.lb-h-3d {
    font-size: 1.5rem;
    margin: 0;
    font-weight: bold;
	background: #fdfbff;
	padding: 15px 20px;
	border: 1px solid #bd93f9;
	border-radius: 8px;
	box-shadow: 4px 4px 0 #bd93f9;
}