【CSS】見出しデザインに使えるCSSの指定をまとめてみた

Pocket
LINEで送る

こんにちは、中村です。最近、WEB周りのところで自社のサイトだったり、お世話になっている方のお手伝いでサイト内のCSSの変更をさせていただく機会があるのですが、意外と見出しにこまることが多いので、デザインのテンプレートも兼ねてCSSでの見出しをいくつかご紹介します。

CSSを利用した見出しまとめ

見出し(下にボーダー)

h3.title01 {
    border-bottom: 3px solid #5A718F;
    border-left: 10px solid transparent;
}

テキストの下にボーダーを差し込んだ見出しです。シンプルなので使い勝手が良いです。pixel数やカラーコードを変えることで、線の太さやカラーの調整が行えます。
(ボーダーのpixel数を変更すると、場合によってはレイアウトの崩れがおこる場合があります)
「border-left」に幅を指定してtransparent(透明)を適用することで、鋭角なラインを生じさせることができます。

見出し(レフトにボーダー)

h3.title02 {
    border-left: 5px solid #5A718F;
}

レフトにボーダーを加えた見出しです。こちらもシンプルで使い勝手の良いCSSです。初心者の方でも簡単に設定ができるのでオススメです。
(ボーダーのpixel数を変更すると、場合によってはレイアウトの崩れがおこる場合があります)

見出し(背景色:グレー)

h3.title03 {
    background: #E2E2E2;
}

背景色を変えて、少しだけ文章と異なるように見せる見出しです。カラーコードの書き換えだけで、そのサイトにあった色合いに変更ができます。あまりCSSに馴染みの無い方でもさわりやすいCSSです。

見出し(上下のボーダー)

h3.title04 {
    border: 4px double;
    border-left: 0;
    border-right: 0;
}

ボーダーを二重線に設定することで、少し上品な見出しが作れます。カラーコードを変えるだけで、ボーダーの色は変更が可能です。

見出し(ボタン調)

h3.title05 {
    box-shadow: 0 -25px 0px #EFEFEF inset;
    border-radius: 10px;
    background: #F9F9F9;
    line-height: 2;
    border: 1px solid #EFEFEF;
}

box-shadowのinsetを利用することで、少しボタンのような印象の見出しが作れます。色を修正するだけでポップな雰囲気にもなるので、少しセンスの良いデザインをしたいときには使えるCSSの見出しです。

見出し(影)

h3.title06 {
    box-shadow: 1px 1px 5px #000;
    background: #fff;
}

box-shadowを利用して、影を付けることで高級感のある見出しが作れます。pixel指定は{box-shadow: x軸の移動 y軸の移動 ぼかし カラーコード}という指定になっています。

見出し(影を重ねる)

h3.title-ins1 {
    box-shadow: 0 0 0 1px #000,0 0 0 2px #FFF,0 0 0 3px #000,0 0 0 4px #FFF,0 0 0 5px #000,0 0 0 6px #FFF;
    background: #fff;
}

「box-shadow」は重ねがけができるプロパティです。「,」で区切ることで、こういったボーダー柄のようなエフェクトを作ることもできます。

見出し(文頭にアイコン)

h3.title07::before {
    content: "◆";
    color: #5A718F;
}

擬似要素を利用して、文頭に「◆」を追加しています。これは意図的に入力しなくても、CSSの指定さえできていれば自動で付与されます。contentに渡す値を変更すれば、文字列であればほぼ表示させることができます。自分の好きな記号やテキストを使うことも可能です。

見出し(ボーダーで三角を作る)

h3.title08 {
    border: 15px solid transparent;
    border-left: 15px solid #5A718F;
    line-height: 0 !important;
    padding: 0 0 !important;
}

ボーダーでは、transparent(透明)を上手くつかうことで三角形を再現することができます。テキストに頼らずに図形を作成することができるので、知っておくと重宝します。

見出し(角丸)

h3.title09 {
    border: 2px solid #5A718F;
    border-radius: 10px;
    border-top: 0px;
    border-right: 0;
}

border-radiusでは角丸を実装することができます。これとボーダーを利用して吹き出しを作ったりすることもできますし、こちらの見出しのように曲線のボーダーを作ることもできます。

見出し(重ね図形)

h3.title10 {
    background: #fff;
    border: 1px solid #5A718F;
    box-shadow: 7px 5px 0 #5A718F;
}

図形が2つ重なったような形をbox-shadowによって実装しています。ぼかしのpixelを0に設定し、x,y軸にずらすことで作成しています。カジュアルな見出しを作ることができます。

見出し(一部角丸)

h3.title11 {
    background: #fff;
    border: 1px solid #5A718F;
    border-radius: 1em 0 1em 0;
}

border-radius(角丸)は、角ごとの設定ができるので、不安定な角丸をつくることもできます。指定は{border-radius: 左上 右上 右下 左下}になります。

見出し(隆起)

h3.title12 {
    border: 5px outset #5A718F;
}

borderにoutsetを指定することで、出っ張ったような隆起したデザインの枠線を作ることができます。これと反対に陥没させたようなデザインの場合は inset を指定します。

見出し(擬似クラス利用)

h3.title13::before, h3.title13::after {
   content: "☆_ ♪^*";top: -2px;
   -webkit-transform: rotateZ(10deg)scale(0.6);
   -moz-transform: rotateZ(10deg)scale(0.6);
   -ms-transform: rotateZ(10deg)scale(0.6);
   -o-transform: rotateZ(10deg)scale(0.6);
   transform: rotateZ(10deg)scale(0.6);
   display: inline-block;
}
h3.title13::after {
   transform: rotateZ(-8deg)scale(0.6);
   -webkit-transform: rotateZ(-8deg)scale(0.6);
   -moz-transform: rotateZ(-8deg)scale(0.6);
   -ms-transform: rotateZ(-8deg)scale(0.6);
   -o-transform: rotateZ(-8deg)scale(0.6);
   transform: rotateZ(-8deg)scale(0.6);
}

擬似クラスとcontentを利用して、独自の枠線のような装飾をつくれます。また、transformを使うことで、色々な変化を付けることができます。

追加でCSSだけで作った見出しを追加しました。

ふと見返したら、「紹介してるやつ大半レベルひっくいな〜。。」と思ったので、可能なかぎり努力したものを追加で紹介しておきます!w

See the Pen 【CSS】見出しデザイン0001 by nkmrkisk (@rekid) on CodePen.

左からラベルっぽいものが突出しているような見出しです。

See the Pen 【CSS】見出しデザイン0002 by nkmrkisk (@rekid) on CodePen.

CSSのbeforeとafterの擬似クラスを利用して、ダイヤっぽいものを装飾として頭にいれています。

See the Pen 【CSS】見出しデザイン0003 by nkmrkisk (@rekid) on CodePen.

CSS3のAnemationを利用して、くるくると回るアイコンを追加しました。

See the Pen 【CSS】見出しデザイン0004 by nkmrkisk (@rekid) on CodePen.

なんか、擬似クラスを利用してもっと綺麗な見出しを作りたいなぁと思いながら作ったものです。。。よく見たら、多分これborderとbox-shadowで同じエフェクト作れますね。

See the Pen 【CSS】見出しデザイン0005 by nkmrkisk (@rekid) on CodePen.

ラベルっぽいものを取り付けました。テキストは擬似クラスのcontentプロパティの値を変更すれば変わります。今一歩バランスが良くないなと思いましたが、ゲシュタルト崩壊しました。

See the Pen 【CSS】見出しデザイン0006 by nkmrkisk (@rekid) on CodePen.

本の付箋っぽいようなデザインを見出しに入れました。しおりみたいな。

See the Pen 【CSS】見出しデザイン0007 by nkmrkisk (@rekid) on CodePen.

見出しの頭にハートをつけました。これ作れるのは知ってたので自力で試行錯誤してたのですが、結局わからずググりました。。

See the Pen 【CSS】見出しデザイン0008 by nkmrkisk (@rekid) on CodePen.

最初は手裏剣作りたいな〜と思って作ってましたが、擬似クラスだけだとちょっと難しい気がしてこのタイルっぽい形にしました

See the Pen 【CSS】見出しデザイン0009 by nkmrkisk (@rekid) on CodePen.

鉛筆です。鉛筆です。。

SNSでもご購読できます。