CSSだけでオシャレな見出しにカスタマイズする方法

<h2>や<h3>などの見出しを、画像を使用せず、CSSだけでオシャレなデザインにカスタマイズする方法をご紹介します。コピペでOKです。

現在、CSS3だけで表現したグラデーションや幾何学模様を紹介されているサイトが沢山あります。それらを参考にした「見出しのデザイン」をいくつかご紹介します。CSSをコピー＆ペーストするだけで利用できます。もしくは、色をカスタマイズしたりしてご利用ください。

見出しデザイン
感想

見出しデザイン

参考サイトとCSSをご紹介します。「h2タグ」に適用した場合を想定してご紹介しています。

※デザインのベースとして、全ての「h2タグ」に下記のCSSを適用しています。どのテーマにも下記と似たような設定がされていますので、このCSSに関しては無視してください。レスポンシブデザインではないので貼り付けない方がいいです。フォントサイズや余白などデザインのベースは、現在お使いのテーマの設定を活かした方がいいです。

h2{
margin:50px 0 30px 0;
padding:0.6em 0 0.6em 0.5em;
font-size:22px;
line-height:1.5em;
font-weight:bold;
}

しかし、場合によっては、下記のCSSで罫線を消してあげる必要があると思います。元々ある設定の罫線を消したい場合は、下記のCSSを追加してください。

border:none;

また、白抜き文字を利用する場合は、CSS3を表示できない古いブラウザ対策として、できれば背景色も追加で指定しておきましょう。グラデーションが適用されず、背景色も文字色も白だと読めなくなるためです。例えば下記のように、状況に応じてグラデーションやパターンに近い色の背景色を指定してあげてください。

background:#4c688e;

それでは、ご紹介いたします。

グラデーション1

見出し見本

グラデ見出し見本1

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

CSS

h2{
background-image:linear-gradient(-90deg, #9E6B71, #4c688e);
background:#4c688e;
color:#fff;
}

参考サイト

jxnblk.com

shade

Mathematically derived gradient explorer

スクロールバーを操作すれば簡単に美しいグラデーションが作成できます。あとは、右下のCSSをコピペするだけでOKです。

グラデーション2

見出し見本

グラデ見出し見本2

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

CSS

下記の参考サイトに記載されています。

参考サイト

ColorZilla

Ultimate CSS Gradient Generator from ColorZilla

A powerful Photoshop-like CSS gradient editor

好みのグラデーションを簡単に作成できます。右下のCSSをコピペでOKです。

幾何学模様1

見出し見本

ドット見出し見本

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

CSS

h2{
background:#444;
background-image:radial-gradient(#5a5a5a 20%, #444 21%, transparent 0),radial-gradient(#5a5a5a 20%, #444 21%, transparent 0);
background-position:0 0, 10px 10px;
background-size:20px 20px;
color:#fff;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
}

参考サイト

www.nxworld.net

https://www.nxworld.net/tips/css-gradient-pattern.html

ドット、ストライプ、チェックなど様々な幾何学模様が紹介されています。CSSをコピペするだけでOKです。

幾何学模様2

見出し見本

チェック見出し見本

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

CSS

下記サイトで紹介されています。

参考サイト

bennettfeely.com

CSS Gradients with background-blend-mode

とてもCSSだけで表現されているとは思えないスゴイデザインが沢山あります。CSSをコピペするだけでOKです。

BOXシャドウ

見出し見本

レイヤー風見出し見本

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

CSS

h2{
-webkit-box-shadow: 10px 10px 0px #D3D3D3;
-moz-box-shadow: 10px 10px 0px #D3D3D3;
box-shadow: 10px 10px 0px #D3D3D3;
background-color: #2F4F4F;
margin-right: 10px!important;
color: #FFF;
}

参考サイト

css3.mikeplate.com

CSS3 Playground

BOXシャドウ以外にもグラデーション、文字色なども簡単にカスタマイズ可能です。真ん中下のCSSをコピペするだけでOKです。

吹き出し

見出し見本

吹き出し見出し見本

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

CSS

h2{
position:relative;
padding:0.6em;
background:#0079c2;
color:#fff;
}
h2:after{
position:absolute;
content:'';
top:100%;
left:30px;
border:15px solid transparent;
border-top:15px solid #0079c2;
width:0;
height:0;
}

見出し見本

角丸吹き出し見出し見本

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

CSS

h2{
position:relative;
padding:0.6em;
background:#00ada9;
color:#fff;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
}
h2:after{
position:absolute;
content:'';
top:100%;
left:30px;
border:15px solid transparent;
border-top:15px solid #00ada9;
width:0;
height:0;
}