CSSでおしゃれにデザインされた見出しはページ全体を見やすくしてくれます。
見出しだけで雰囲気も変わるので、これから紹介するものをコピペしてみなさんのサイトにぴったりの見出しを見つけてください。
HTMLやCSSを紹介するとき、このサイトでは、jsFiddleを使用しています。jsFiddleについて詳しくは下記をご覧ください。
目次
シンプルに線だけ
基本となる下線だけのものです。
基本となる下線を太くし色をつけました。また、文字の上下に余白(padding)を追加することで、見出しが大きく見え強調される効果があります。
下線の種類をdashedにして線の太さを変えました。ここでの線種はdashedを使用していますが、この他の線種にしたい場合はこちらを参照してください。
左だけのものです。padding:15pxは上・右・下・左均等に15pxあけるという意味です。
左と下線の組み合わせです。padding:5px 20pxは上下5px、左右20pxあけるという意味です。
二重線の上下です。下だけにしたい場合はborder-topの箇所を消してください。
文字を線で囲むデザイン。
一工夫の線
左のborderの半分だけに色を指定しています。
右端が徐々に透明になっているデザインです。紹介してる線の色は緑色の蛍光色ですが、お好みで色を変えてもいいですね。
短い線です。widthとheightで線の長さ、太さが調整できます。
二色の線です。widthの15%の数字を上げると、青色の割合が多くなります。
線+背景色+影
背景色と文字色を指定する基本的なデザイン。
かなりインパクトのあるものができました。色が与える印象はすごいですね！
ぼやっとした影を付けて立体感を出しました。
角を丸くしたい場合は、border-radius:〇px;を追加してまるのところに20pxなど数字を入れてください。
角に丸みをもたせる「border-radius」と、下にborderを指定すると立体感のあるボタン風ができます。
背景の内側に線
borderとbox-shadowの組み合わせです。
おしゃれ
文字の横に線があります。CSSのh2にあるmargin-left:30px;の数字を大きくすると文字全体が右に動きます。
最初の文字だけ大きくなります。最初の文字の大きさを変えたい場合はfont-sizeの数字で調整してください。
文字の後ろにサブタイトルを付けました。CSSにあるfont-sizeで前と後ろの文字の大きさを変える事ができます。
斜めの線でおしゃれに
中央に縦長に配置するデザインです。文章の中の見出しで使うより、ページの最初に使うとかっこいいですね。
シンプルに中央で上下に線があるだけですが、とてもまとまっていますね。
左寄せにしたい場合はh2を全て消してください。
下線をストライプにしました。
四隅がクロスしているデザインです。線の色や太さを変えるとガラリと印象が変わります。
反射しているデザインです。全てのブラウザに対応しているわけではないので、普通の黒文字に見える方は違うブラウザでご確認下さい。
細い線+ワンポイント
長方形だけでなく、丸（サークル）もできます。
上にborder-bottomを指定しただけです。印象がかわりますね。
両端をまるくしました。
付箋風
右下に影を付けるだけでふわっと角が持ち上がり付箋風のできあがりです。
マーカー
下の部分にだけマーカーが引かれています。
タイトルが長いと2行となり、横幅が小さいスマートフォンなどで見ると2行目だけしかマーカーがつきません。ご注意ください。
上にあるマーカーのtransparent60%の数値を0にすると、文字全体にマーカーを引いたようになります。
最後の数字を100%などにすると、マーカーの上部分が徐々に透明になります。
吹き出し風
基本となる下向き中央の吹き出しです。
三角を中央から左右どちらかに変更したい場合は、「left:5%」の数字を変更してください。
上の基本となる吹き出しの角を丸くしました。border-radius:10px;を追加しただけです。
枠線だけの吹き出しです。
「left:5%」は三角の位置が左から5％の位置（中央）にあることを示しています。位置を変更したい場合はこの数字を変更してください。
ここに載せきれないCSSだけで作る吹き出しを集めたページを用意しました。興味のある方はこちらも合わせて読んでみてください。
リボン風
基本的なリボンです。
基本的なリボンに縫い目を付けました。
両端が山形になっているリボンです。
両端が山形になっているリボンに線を追加しました。
両端に折り目があるリボンです。メインの色はもちろん、文字色や折り目の色も変更可能です。
上のリボンにtext-align:center;を追加して、文字の位置を中央にもってきました。centerをrightに変えると文字が右にきます。
両端を折り曲がっているおしゃれなリボンです。最初にあるwidth:300px;の数字を大きくするとリボンの幅が大きくなります。必要に応じて変えて下さい。
他にもシンプルなものから複雑なものまで、こちらの「CSSで広がる！囲み枠（ボックス）デザイン【コピペ可】」で紹介しています。
最後に
デザイン一つでページ全体の印象が変わるのが見出しです。
個性のあるページをみると見出しにもインパクトがあるものだったり、ビジネス系のページではシンプルに、色は黒だけしか使用しないなど管理者の性格と伝えたい内容が伝わってきます。
たくさんの見出しを紹介しましたが、私がおすすめしたいのはページ内で何種類もデザインされた見出しを使用するのではなく、一種類を全てに使用するなどある程度統一感を持つといいと思います。
ごちゃごちゃしたページは読者の離脱する確率が高くなるというデータもあるくらいなので！
シンプル イズ ベストです！
この記事へのコメントはありません。