CSSだけで実現！画像を使わないタイトルデザイン
Webページにおいてタイトルの装飾は内容を強調したり、特徴付けする上でとても大切です。
しかし装飾のために画像のみでタイトルを制作した場合PC用とスマホ用で何枚もの画像を用意する必要があります。またSEOを考えた際にも好ましくありません。
そこで、様々なシーンで活用可能なCSSだけでできるタイトルデザインをご紹介します。
//_HTML
<h2>左右に斜線を入れたタイトル</h2>
//_CSS
h2 {
display: flex;
}
h2:before, h2:after {
content: '';
width: 3px;/*線の太さ*/
height: 40px;/*線の長さ*/
background-color: #e8af00;/*線の色*/
}
h2:before { /*左側の線*/
margin-right: 30px;
transform: rotate(-35deg);
}
h2:after { /*右側の線*/
margin-left: 30px;
transform: rotate(35deg);
}
解説
擬似要素を使ってh2の左右に線を配置しています。線の太さ、長さ、色は共通部分のため一緒に指定しています。
transform: rotateプロパティを使用して回転させています。
サンプルはこちら
//_HTML
<h2>アイキャッチと線を使ったタイトル</h2>
//_CSS
h2:before { /*アイキャッチテキスト*/
content: 'おすすめポイント';
display: block;
color: #f99f1d;
font-size: 14px;
}
h2:after { /*下線*/
content: '';
display: block;
width: 40px;
height: 1px;
margin-top: 10px;
background-color: #f99f1d;
}
解説
アイキャッチテキストは疑似要素:beforeのcontent: ”;にテキストを入れると表示されます。サイズや色を指定することも可能です。
htmlに直接書き込まずに指定できるのでhtmlをシンプル化できます。共通のアイキャッチテキストでタイトルを量産する際にとても便利です。
サンプルはこちら
//_HTML
<h2>斜線が入ったマーカー風タイトル</h2>
//_CSS
h2 {
padding: 5px 20px;
color: #fff;
background: repeating-linear-gradient(-45deg, #0096ff, #0096ff 8px, #63bfff 8px, #63bfff 10px);
text-align: center;
display: inline-block;
}
解説
repeating-linear-gradientプロパティを使用してストライプ柄を作っています。
0〜8pxを「#0096ff」（濃い方）の色で指定し、8〜10pxを「#63bfff」（薄い色）の色で指定し、リピートさせるようにすると斜めのストライプを表現することができます。上記の数値を変更するとストライプの間隔が変わります。
サンプルはこちら
//_HTML
<h2>背景色・線を使ったタイトル</h2>
//_CSS
h2 { /*背景の指定*/
position: relative;
padding: 5px 20px 10px;
background: #fff100;
text-align: center;
display: inline-block;
}
h2:before { /*線の指定*/
position: absolute;
content: '';
top: -7px;
left: -7px;
width: 100%;
height: 100%;
border: 3px solid #000;
}
解説
h2に背景色を指定します。h2のpaddingはbottomの数値を大きくすることで見栄えが良くなります。
線は擬似要素で指定をしてpositionを使用し左上に少しずらしています。
サンプルはこちら
//_HTML
<h2>かぎかっこタイトル</h2>
//_CSS
h2 {
position: relative;
padding: 20px 25px;
text-align: center;
display: inline-block;
}
h2:before, h2:after {
position: absolute;
content: '';
}
h2:after { /*左上の指定*/
top: 0;
left: 0;
width: 30px;
height: 30px;
border-top: 6px double #e8af00;
border-left: 6px double #e8af00;
}
h2:before { /*右下の指定*/
right: 0;
bottom: 0;
width: 30px;
height: 30px;
border-right: 6px double #e8af00;
border-bottom: 6px double #e8af00;
}
解説
擬似要素を使って正方形を作りh2の左上と右下に配置しています。左上（:after）の方は上側と左側にborderの指定を、右下（:before）の方は右側と下側にborderの指定をしています。
widthとheightのサイズを変更することでガキかっこのサイズを変更することができます。
サンプルはこちら
まとめ
いかがでしたか？
Webページでタイトルデザインを考える際に参考にしていただけたらと思います。
その他にも工夫次第で、こんなものまで？！と言った複雑なものもCSSで組むことができます！楽しみながら挑戦してみてください！
WEBデザイナー ／ A.H
