【CSS】見出しデザインのCSSサンプル集

2020年1月13日WordPress,WordPressカスタマイズ,CSS,CSSデザイン

色々な見出しデザインのCSSサンプル集です

WordPressの子テーマなど上書きが必要な場合はHタグのborder等を初期化しておくと良いです

h2.sample{
border:none;
background:none;
}

が、環境でズレがあるコードもあると思います

fontサイズは18~20あたりなら調節不要かもしれません

目次

下線付き見出しデザイン1

簡単な下線タイプの見出しタグです

h2{
padding: 10px;
border-bottom:3px solid #FF9100;
}

下線付き見出しデザイン2

少し太めにした下線タイプの見出しタグです

h2{
padding: 10px;
border-bottom:6px solid #00E676;
}

下線付き見出しデザイン3

doubleを指定して2重線にした下線タイプの見出しタグです

h2{
padding: 10px;
border-bottom: double 3px #FF9100;
}

下線付き見出しデザイン4

dashedを指定して破線（点線）にしています

dashedで指定した破線の幅は線の太さと比例します

h2{
padding: 10px;
border-bottom: dashed 2px #FF9100;
}

下線付き見出しデザイン5

dashedを指定して破線（点線）にし、少し太めに指定しています

dashedで指定した破線の幅は線の太さと比例します

h2{
padding: 10px;
border-bottom: dashed 4px #00E676;
}

横線付き見出しデザイン1

左にだけborderを付けた見出しタグです

h2{
padding: 10px;
border-left:5px solid #FF9100;
}

横線付き見出しデザイン2

左にだけ2重線のborderを付けた見出しタグです

h2{
padding: 10px;
border-left:5px double #FF9100;
}

横線付き見出しデザイン3

左にだけ破線（点線）を指定したborderを付けた見出しタグです

h2{
padding: 10px;
border-left:3px dashed #FF9100;
}

枠線付き見出しデザイン1

枠線付き見出しタグになります

h2{
padding: 10px;
border:2px solid #FF9100;
}

枠線付き見出しデザイン2

2重の枠線付き見出しタグになります

h2{
padding: 10px;
border: double 3px #FF9100;
}

枠線付き見出しデザイン3

破線（点線）の枠付き見出しタグになります

h2{
padding: 10px;
border: dashed 3px #FF9100;
}

最初の文字を大きくした見出しデザイン1

first-letterを利用して最初の一文字を大きくしています

h2{
padding: 0 5px;
border-bottom:3px solid #FF9100;
}
h2:first-letter{
font-size:2em;
}

最初の文字を大きくした見出しデザイン2

first-letterを利用して最初の一文字を大きくし、文字色を変更しています

h2{
padding: 0 5px;
border-bottom:3px solid #FF9100;
}
h2:first-letter{
font-size:2em;
color:#FF9100;
}

最初の文字を大きくした見出しデザイン3

first-letterを利用して最初の一文字を大きくし、背景色を加えています

h2{
padding: 10px;
}
h2:first-letter{
font-size:1.8em;
padding: 2px 10px;
color:#FFF;
background:#FF9100;
border-radius:50%;
}

薄い背景色の見出しデザイン1

背景色を付けた見出しタグです

h2{
padding: 10px;
background: #E0E0E0;
}

薄い背景色の見出しデザイン2

背景色を付けた見出しタグに左側だけボーダーを付けています

h2{
padding: 10px;
background: #E0E0E0;
border-left:5px solid #FF9100;
}

薄い背景色の見出しデザイン3

背景色を付けた見出しタグに左側だけボーダー、全体に影を付けています

h2{
padding: 10px;
background: #E0E0E0;
border-left:5px solid #00B0FF;
box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.9);
}

薄い背景色の見出しデザイン4

背景色を付けた見出しタグに破線（点線）を付けています

h2{
padding: 10px;
padding-left: 0.5em;
background: #E0E0E0;
border: dashed 2px #777;
}

薄い背景色の見出しデザイン5

背景色を付けた見出しタグに少し内側に破線（点線）を付けたタイプです

外側はshadowでそれっぽくしているタイプです

h2{
padding:10px;
padding-left: 0.5em;
background: #E0E0E0;
border: dashed 2px #777;
box-shadow: 0 0 0 4px #E0E0E0;
}

薄い背景色の見出しデザイン6

背景色を付けた見出しタグの全体を丸めたタイプです

h2{
padding: 10px;
text-align:center;
background: #E0E0E0;
border-radius:50%;
}

薄い背景色の見出しデザイン7

背景色を付けた見出しタグの全体を丸めたタイプに影を付けています

h2{
padding: 10px;
text-align:center;
background: #E0E0E0;
border-radius:50%;
padding:10px 0;
box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.7);
}

濃い背景色の見出しデザイン1

濃いめの背景色を付けた見出しタグです

h2{
padding: 10px;
color:#FFF;
background: #777;
}

濃い背景色の見出しデザイン2

濃いめの背景色を付けた見出しタグに左側だけボーダーを付けています

h2{
padding: 10px;
color:#FFF;
background: #777;
border-left:5px solid #FF9100;
}

濃い背景色の見出しデザイン3

濃いめの背景色を付けた見出しタグに左側だけボーダー、全体に影を付けています

h2{
padding: 10px;
color:#FFF;
background: #777;
border-left:5px solid #00B0FF;
box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.7);
}

濃い背景色の見出しデザイン4

濃いめの背景色を付けた見出しタグに破線（点線）を付けています

h2{
padding: 10px;
color:#FFF;
background: #777;
border: dashed 2px #FFF;
}

濃い背景色の見出しデザイン5

外側はshadowでそれっぽくしているタイプです

h2{
padding: 10px;
color:#FFF;
background: #777;
border: dashed 2px #FFF;
box-shadow: 0 0 0 4px #777;
}

濃い背景色の見出しデザイン6

濃いめの背景色を付けた見出しタグの全体を丸めたタイプです

h2{
padding: 10px;
text-align:center;
color:#FFF;
background: #777;
border-radius:50%;
}

濃い背景色の見出しデザイン7

濃いめの背景色を付けた見出しタグの全体を丸めたタイプに影を付けています

h2{
padding: 10px;
text-align:center;
color:#FFF;
background: #777;
border-radius:50%;
box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.7);
}

吹き出しの見出しデザイン1

吹き出しタイプの見出しタグです

数値を変更して位置や角度を調節します

h2{
padding: 10px;
background: #E0E0E0;
position: relative;
}
h2:after {
content: "";
position: absolute;
top: 100%;
left: 5%;
border: 0.5em solid transparent;
border-top: 1.3em solid #E0E0E0;
}

吹き出しの見出しデザイン2

吹き出しタイプの見出しタグです

数値を変更して位置や角度を調節します

h2{
padding: 10px;
color:#FFF;
background: #777;
position: relative;
}
h2:after {
content: "";
position: absolute;
top: 100%;
left: 5%;
border: 0.5em solid transparent;
border-top: 1.3em solid #777;
}

グラデーションの見出しデザイン1

背景をlinear-gradientで左から右へグラデーションにした見出しタグです

rgbaで透明色にして色から透明へグラデーションしています

指定しているlinear-gradientの％はどこまでに色を変更しきるかの数値で、少し手前でグラデーションを完了させています

h2{
padding: 10px;
background: linear-gradient(to right, #FFCC80, rgba(255,255,255,0) 70%);
}

グラデーションの見出しデザイン2

背景をlinear-gradientで左から右へグラデーションにした見出しタグです

こちらは右端最後までグラデーションを維持しています

h2{
padding: 10px;
background: linear-gradient(to right, #00E676, rgba(255,255,255,0) 100%);
}

グラデーションの見出しデザイン3

濃い色を使ったグラデーションの見出しタグデザインです

h2{
padding: 10px;
padding-left: 0.5em;
color:#FFF;
background: linear-gradient(to right, #000, rgba(255,255,255,0) 100%);
}

グラデーションの見出しデザイン4

下線は疑似要素で細長い要素を作りボーダーぽくしたものです

h2{
padding: 10px;
position: relative;
}
h2::after{
content: "";
width:100%;
height:6px;
position: absolute;
left: 0;
bottom: 0;
background: linear-gradient(to right, #DD2C00, rgba(255,255,255,0) 100%);
}

グラデーションの見出しデザイン5

h2{
padding: 10px;
position: relative;
}
h2::after{
content: "";
width:100%;
height:6px;
position: absolute;
left: 0;
bottom: 0;
background: linear-gradient(to right, #000, rgba(255,255,255,0) 100%);
}

星マークの見出しデザイン1

h2{
position: relative;
padding-left:2em;
}
h2::before{
content: "★";
color: #FF9100;
font-size:2em;
position: absolute;
left: 0;
top: -0.2em;
}

星マークの見出しデザイン2

h2{
position: relative;
padding-left:2em;
}
h2::before{
content: "★";
color: #FF9100;
font-size:2em;
position: absolute;
left: 0;
top: -0.2em;
}
h2::after{
content: "★";
font-size:1.5em;
position: absolute;
left: 0.4em;
top: 0.3em;
color: #E65100;
}

ダイヤマークの見出しデザイン1

h2{
position: relative;
padding: 10px;
padding-left:2em;
}
h2::before{
content: "◆";
color: #FF9100;
font-size:2em;
position: absolute;
left: 0;
top: -0.1em;
}

ダイヤマークの見出しデザイン2

h2{
position: relative;
padding: 10px;
padding-left:2em;
}
h2::before{
content: "◇";
color: #FF9100;
font-size:1.9em;
position: absolute;
left: 0;
top: -0.1em;
}
h2::after{
content: "◇";
color: #325A8C;
font-size:1.3em;
position: absolute;
left: 0.4em;
top: 0.4em;
}

四角マークの見出しデザイン1

h2{
position: relative;
padding: 10px;
padding-left:2em;
}
h2::before{
content: "■";
color: #FF9100;
font-size:2em;
position: absolute;
left: 0;
top: -0.1em;
}

四角マークの見出しデザイン2

h2{
position: relative;
padding: 10px;
padding-left:2em;
}
h2::before{
content: "■";
font-size:1.5em;
position: absolute;
left: 0.1em;
top: 0.15em;
color: #FF9100;
}
h2::after{
content: "■";
font-size:1.4em;
position: absolute;
left: 0.4em;
top: 0.5em;
color: #325A8C;
}

ハートマークの見出しデザイン1

h2{
position: relative;
padding: 10px;
padding-left:2em;
}
h2::before{
content: "♥";
color: #FF9100;
font-size:2em;
position: absolute;
left: 0;
top: -0.1em;
}

ハートマークの見出しデザイン2

環境依存文字は、環境で結構変わるものもあるのでチェックしてから実装するのが良いですね

h2{
position: relative;
padding: 10px;
padding-left:2em;
}
h2::before{
content: "♡";
color: #FF9100;
font-size:1.8em;
position: absolute;
left: 0;
top: -0.05em;
}
h2::after{
content: "♡";
font-size:1.1em;
position: absolute;
left: 0.6em;
top: 0.6em;
color: #325A8C;
}

アイコンフォントを使った見出しデザイン1

アイコンフォントを使った見出しデザインです

利用しているWordPressテーマで「FontAwesome」使用されていたのでそのまま利用

h2{
position:relative;
padding:10px;
padding-left:2em;
}
h2::before{
font-family:'FontAwesome';
content:"\f0a9";
font-size:2em;
position:absolute;
left:0;
top:0.1em;
color: #FF9100;
}

アイコンフォントを使った見出しデザイン2

背景色あり、アイコンフォントもcolor指定で色変更

h2{
position:relative;
padding:10px;
padding-left:2em;
}
h2::before{
font-family:'FontAwesome';
content:"\f044";
font-size:1.8em;
position:absolute;
left:0.3em;
top:0.05em;
color:#FFF;
}

アイコンフォントを使った見出しデザイン3

指さしマークのアイコンフォント

h2{
position:relative;
padding:10px;
padding-left:2em;
}
h2::before{
font-family:'FontAwesome';
content:"\f0a4";
font-size:1.9em;
position:absolute;
left:0;
top:0;
color: #FF9100;
}

アイコンフォントを使った見出しデザイン4

チェックマークのアイコンフォント

h2{
position:relative;
padding:10px;
padding-left:2em;
}
h2::before{
font-family:'FontAwesome';
content:"\f058";
font-size:2em;
position:absolute;
left:0;
top:0;
color: #FF9100;
}

アイコンフォントを使った見出しデザイン5

細かいデザインのアイコンは大きくして見出し分の後ろに重ねるのも手ですね

h2{
position:relative;
padding:10px;
padding-left:2em;
z-index: 1;
}
h2::before{
font-family:'FontAwesome';
content:"\f1d7";
font-size:4em;
position:absolute;
left:0;
top:-0.4em;
color: #FFB74D;
z-index:-1;
}

アニメーションを使った見出しデザイン1

CSSアニメーションを利用して背景色を変更しています

h2{
padding: 10px;
background: #FFCC80;
animation: anime1_anime 5s reverse infinite;
}
@keyframes anime1_anime{
0% { background: #FFCC80; }
50% { background: #E1F5FE; }
}

アニメーションを使った見出しデザイン2

CSSアニメーションを利用してハートのアイコンサイズを変更しています

h2{
position: relative;
padding: 10px;
padding-left:2em;
}
h2::before{
content: "♥";
color: #FF9100;
font-size:1.8em;
position: absolute;
left: 0;
top: -0.05em;
animation: anime2_anime 3s reverse infinite;
}
@keyframes anime2_anime{
80% { transform: scale(1); }
90% { transform: scale(1.3); }
100% { transform: scale(1); }
}

アニメーションを使った見出しデザイン3

CSSアニメーションを利用してハートのアイコンを回転させています

h2{
position: relative;
padding: 10px;
padding-left:2em;
}
h2::before{
content: "♥";
color: #FF9100;
font-size:1.8em;
position: absolute;
left: 0;
top: -0.05em;
animation: anime3_anime 3s reverse infinite;
}
@keyframes anime3_anime{
100% {
transform: rotateY(360deg);
-webkit-transform: rotateY(360deg);
}
}

アニメーションを使った見出しデザイン4

CSSアニメーションを利用してハートのアイコンの色を変更しています


h2{
position: relative;
padding: 10px;
padding-left:2em;
}
h2::before{
content: "♥";
color: #FF9100;
font-size:2.5em;
position: absolute;
left: 0;
top: -0.25em;
animation: anime4_anime 3s infinite;
}
@keyframes anime4_anime{
0% { color: #FF9100; }
50% { color: #81D4FA; }
100% { color: #FF9100; }
}

シルエット画像を使った見出しデザイン1

マリオのシルエット画像を見出しの背景にしています

h2{
position:relative;
padding:50px;
color:#FF9100;
padding-left:2em;
background-image:url("https://naruhodo.repop.jp/wp-content/uploads/2018/02/mario.png");
background-size:contain;
background-repeat: no-repeat;
}

シルエット画像を使った見出しデザイン2

猫のシルエット画像を見出しの背景にしています、足元に下線も付けてみました

h2{
position:relative;
color:#FF9100;
padding:90px 40px 30px 0px;
padding-left:2em;
background-image:url("https://naruhodo.repop.jp/wp-content/uploads/2018/02/cat.png");
background-size:contain;
background-repeat: no-repeat;
}
h2::after{
content: "";
width:100%;
height:6px;
position: absolute;
left: 0;
bottom: 0;
background: linear-gradient(to right, #000, rgba(255,255,255,0) 100%);
}

See the Pen Heading tag design CSS by yochans (@yochans) on CodePen.

2020年1月13日WordPress,WordPressカスタマイズ,CSS,CSSデザイン

Posted by Yousuke.U