CSSのみでかっこいい見出しを作る方法

大抵のWebサイトはコンテンツや文章がいくつもありますよね。

そうなると、見出しは何回も出てくることが多く、CSSでかっこよくデザイン出来るととても便利です。また、hタグによる見出しは検索エンジンに引っかかりやすい特性があります。

CSSで画像を指定することで、オリジナルの見出しを作ることもスタンダードな方法ですが、今回は画像を使用せずにできるかっこいい見出しを作っていきましょう。

左に罫線の見出し

css1

よく見かけると思いますが、とても基本的な見出しの1つです。CSSは下記の様な記述になります。 

内側の余白と、左側の罫線を指定しただけでわかりやすい見出しが作れました。
更に、下に罫線を指定することでより強調した見出しになります。

CSS2

見出し下の罫線の指定を追加しました。


罫線で囲む

他にもただ囲みたいだけの場合は、borderで指定します。

css3


更に、radiusの指定も記述することで、角を丸くすることもできます。

CSS4

罫線のカスタマイズ

見出しに欠かせないのが、線を上下や左右、または囲むように配置するスタイリングです。

先ほどご紹介したサンプルでは、罫線は実線(solid)を指定していましたが、その他にも色々な種類の罫線が指定できるので、線の種類を変更するだけで大きくカスタマイズが可能です。

・dotted 点
・dashed 点線
・double 二重線
・none なし

その他にも色々あるので、デザインにあわせて試してみてください。

背景色を変える

これも簡単に見出しを強調することができるスタイリングです。

CSS5

背景色を変えた時も、radiusの指定も記述することで、更に角を丸くできます。

CSS6

好みのスタイルを組み合わせる

代表的なものをいくつか紹介しましたが、これらを組み合わせることでよりたくさんのかっこいい見出しを作ることができます。

css6

これは背景色の指定と、下の罫線の指定を組み合わせたものです。更に上にも罫線を指定すると以下の様になります。

スクリーンショット 2016-02-17 0.25.36

線の太さも1px太くしてみました。

この様に簡単な指定を組み合わせるだけで、様々な見出しを作ることが可能です。文字の色やサイズでも印象が大きく変わるので、デザインに合わせて変更してみましょう。


Welcome to UX MILK

UX MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。

このサイトについて