CSSでタイトルを装飾！
初心者でも大丈夫。超簡単解説付き

2017.05.15

コーディングをするときに、「タイトルは目立たせたいから画像にしよう！」と思うことありませんか？
確かに、タイトルを目立たせるために装飾を施したいですが、SEOを考えるとタイトルを画像にすることは好ましくありません。また、レスポンシブデザインにおいて、タイトルを画像にしてしまうと、PC用とスマホ用とで何枚も画像を用意しなければならないことになってしまいます。これはかなり面倒…
そこで、今回は、CSSでできる実際に使えるタイトルの装飾をご紹介します。ソースのコピペで実装できますが、初心者の方でも応用して使えるよう、簡単な解説付きでご紹介します。

基礎編：borderだけで実装できる装飾

二重線

doubleというスタイルを指定するだけで、簡単に二重線が実装できます。


<h2>タイトルが入ります</h2>


h2{
border-bottom:double 3px #ddd;
padding-bottom:5px;
}

3px以上の線幅を指定しないと二重に見えないのでご注意を

左と下の線

よくみるスタイルですね。これもborderを左と下に入れ、paddingで調整するだけで簡単に実装できます。


<h2>タイトルが入ります</h2>


h2{
border-left:solid 6px #ddd;
border-bottom:solid 1px #ddd;
padding:5px 0 5px 10px;
}

解説

テキストの左に太い線を、下に細い線を指定するだけです。
線の太さやタイプを変更すると、様々なバリエーションが簡単に作成できます。

応用編１：グラデーションを使った装飾

グラデーションのソースって見ただけで嫌になりますよね。安心してください。解説付きで紹介します。

蛍光ペンを引いたような装飾

文字の下でなく、文字全体でもなく、文字の半分ぐらいのこの太さ…諦めないでください。CSS1行で簡単に実装できます。


<h2><span>タイトルが</span>入ります</h2>


h2 span{
background: linear-gradient(rgba(255,246,0,0) 50%, rgba(255,246,0, 0.60) 50%);
}

解説
background のプロパティとして線形グラデーションのlinear-gradientを指定します。
background: linear-gradient(① ②, ③ ④);

① グラデーションの開始色です。透明色を指定します。transparentという記述でもいいのですが、transparentと書くと黒い背景が出てしまう場合があるので、rgbaで蛍光ペンの色を不透明度0にしておくと安全です。
② ①で指定した透明色が、上から何%の位置から開始させるかを指定します。透明色の幅なので、%が小さければ蛍光線が太く、大きければ細くなります。
③ グラデーションの終了色の色で、蛍光ペンの色を指定します。
④ ①から③へのグラデーションが、上からどの位置まで反映されるかを指定します。今回は実際にグラデーションの見た目がほしくないので、上から50%の位置からグラデーションが始まり、上か50%の位置でグラデーションが終わるという設定にします。するとパキッと色が変化し、実際にグラデーションが掛かっているようにみえません。

応用編２：タイトル装飾に欠かせない、疑似要素を使った装飾

疑似クラスとはHTMLのソース上では出てこない、フェイクの要素です。馴染みの深いものには、:hoverや:first-childなどがありますが、今回は:before :afterを使用します。

文字下の線の色だけを変える

レスポンシブでスマホ表示になっても表示は崩れません！（文字が横幅いっぱいになると、当然下線が１色になってしまいますが…）


<div class="line"><h2>タイトルが入ります</h2></div>


div.line {
position:relative;
}

div.line h2{
display:inline-block;
border-bottom:2px solid #000;
padding:0 0 10px 0;
}

div.line:after{
content:"";
width:100%;
border-bottom:2px solid #dddddd;
position:absolute;
bottom:0;
left:0;
z-index:-1;
}

解説

① divにposition:relativeを掛けます。
② タイトルの<h2>をinline-blockにします。これにより、下線が文字の下にだけ引かれます。
③ divの疑似クラス:beforeに全体に引きたい色の線を指定します。それをabusoluteで配置し、z-indexで重なり順を後ろにします。

タイトルの両側に線


<h2><span>タイトルが入ります</span></h2>


h2{
position:relative;
text-align:center;
}

h2:before{
content:"";
width:100%;
border-bottom:1px solid #ddd;
position:absolute;
top:50%;
left:0;
z-index:-1;
}

h2 span{
background-color:#fff;
padding:0 15px;
}

解説

① <h2>にposition:relativeを掛け、center配置にしておきます。
② <h2>の疑似クラスに線を付け、それをabsoluteで上から50%の位置に配置します。z-indexで重なり順を後ろにしておくことも忘れずに。
③ 最後にspanに対して背景色（この場合は白）を指定します。両サイドにpaddingで余白を入れます。

まとめ

いかがでしたか？
ここで紹介したのは、シンプルなタイトルの実装方法ですが、ほんの序の口です。
「え！？こんなこともできるの？」ということもcssでできてしまうので、諦めずにトライしてみてください！

WEBデザイナー／ F.M

WEBサイト制作に関するお問合せはこちら

CSSでタイトルを装飾！初心者でも大丈夫。超簡単解説付き