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

こんにちは、中村です。最近、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;
}

図形が２つ重なったような形を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を使うことで、色々な変化を付けることができます。