HTMLとCSSのみで実装できる見出しデザイン5選

こんにちは。
今回はHTMLとCSSを使用した見出し(<h1>～<h6>)のデザインを紹介します。
CSS3も含まれているため、対応ブラウザにはお気をつけください。

See the Pen PZZRdK by cube_tjmt (@cube_tjmt) on CodePen.0

こちらはドッグイヤーのような折り返しをつけた見出しです。
シンプルなので色合いによって雰囲気を変えやすいので汎用性があるかと思います。

See the Pen rxxdQg by cube_tjmt (@cube_tjmt) on CodePen.0

こちらはマーカーで下線を引いたような見出しです。下線が少し文字に被っていますね。
ただのボーダーに飽きた！という方は是非。

See the Pen RrrMvp by cube_tjmt (@cube_tjmt) on CodePen.0

こちらはCSS3のグラデーションでストライプ柄を作り背景にしたものです。
ポップな感じのWebサイトに使用できそうです。

See the Pen vLLRPx by cube_tjmt (@cube_tjmt) on CodePen.0

こちらは両端が浮き上がって見える見出しです。
以前よりこのようなデザインはありましたが画像なしで表現できるのは便利ですね。

See the Pen wMMmZm by cube_tjmt (@cube_tjmt) on CodePen.0

こちらは2種類のボーダーを組み合わせた見出しです。
先ほどご紹介したグラデーションを使用したストライプと、ノーマルなボーダーを組み合わせています。
自分自身あまり見かけないデザインかなと感じますが、使いやすいデザインであるとは思います。
以上になります。
CSS3を使用するにあたってのネックは、やはりIEかと思います。
良く使用するであろう角丸(border-radius)・ボックスシャドウ(box-shadow)はIE9から、
グラデーション(gradient)はIE10から対応しています。
実際の所、このようなリッチデザインは表示されなくとも「Webサイトから情報を得る」という目標は達成されるため、あまり気にしなくても良いのではないかと私は感じます。

余談ではありますが、私は現在Windows10にアップグレードしたパソコンを使用し業務をしています。
使いづらい等々言われていますが、データが吹っ飛ぶなんてことはなく今のところは順調です。
無料で配信されているものでもありますし、この機会に是非アップグレードをおすすめします。
(念のため大事なデータはバックアップを取ってくださいね。)

それでは今回はこの辺で。