CSSでオシャレな見出し(hタグ)の作り方 10選

どうも@De_webdesignです。

ブログや記事を書く際に使用できるCSSで実装できるオシャレな見出しの作り方を紹介していきます。
僕自身はあまり凝った装飾よりかは、フォントや太さの違いだけでデザインをするのが好きなので使用しませんが、皆さんのブログなど使用して読者にわかりやすい記事を書いていただけたらと思います。

目次

  • 斜めに傾けたタイトル
  • 背景に回り込むようなタイトル
  • ポップな吹き出しタイトル
  • 付箋みたいなタイトル
  • ラインマーカーのような下線
  • タイトル最初の文字を大きく
  • 左と下にボーダー
  • 背景+下ボーダー
  • ボーダーの上にテキストを重ねる
  • リボン

1.斜めに傾けたタイトル

Sample Title

こちらは比較的シンプルなので、どのデザインにも合いやすいと思います。傾きや色、フォントを変えるだけでだいぶ印象が変わると思うのでぜひ試してみてください。

2.背景に回り込むようなタイトル

Sample Title

これも先ほど同様シンプルで、ちょっとした変化を与えたいときに使用できますね。この記事では使っていませんが、仕事でこの前使用しました。見出しだけでなくタグを写真の上に表示して使う方法でしたが。

3.ポップな吹き出しタイトル

Sample Title

ポップなデザインにはもってこいのタイトルですね。僕は使用することはありませんが、タイトルを見立たせるという意味ではとてもいい装飾だと思います。beforeとafterで下の吹き出しを作り、背景のストライプはbackgroound-imageで表現してますね。

4.付箋みたいなタイトル

Sample Title

こちらは、タイトルというよりは他で使う機会の方が多いですね。何かのポイントを説明するときとかに使用してみてはいかがでしょうか?

5.ラインマーカーのような下線

Sample Title

after要素で下線を表現しています。これはポップなやつにもシンプルなやつにも使えるやつですね。

6.タイトル最初の文字を大きく

sample title

シンプルにデザインしたい場合は、これなんか使いやすいんじゃないんですかね。僕も使用してみようかなーと思っているのですがなかなか使う機会に巡り合えてませんが。

7.左と下にボーダー

Sample Title

afterを使用してのデザインです。これを機にbeforeやafterなどの疑似要素に慣れてしまいましょう。これが使えるようになるとデザインの幅が広がる気がします。

8.背景+下ボーダー

Sample Title

少ない労力で大きい効果を得るならこれですね。ただ注意点は装飾があまりないので、色使いやフォントにかなりデザインが左右されるので「俺はデザインセンスあるよ!」って方はバンバン使ってください。コツは、背景に指定している色よりも濃い色を下ボーダーに指定してあげることですかね。

9.ボーダーの上にテキストを重ねる

Sample Title

何かを仕切るときに使えるCSSですね。

h1のbeforeで線を表現し、spanで文字を重ねていますがコツはspanの背景色を周囲の色と同じ色に指定してあげることで文字の後ろだけ線がないように見えるようになります。

10.リボン

Sample Title

この表現は僕はおそらくこの先も使うことはないでしょう。笑
やりたい方はどうぞコピーしていってください。

よろしければシェアをお願いします。

Keisuke Yamashita

新卒CM制作会社でPM→カナダでWEBデザインを勉強→カナダでWEBデベロッパーとして就職→日本で事業会社でデザイナー デザインからフロントエンドを主に担当しています。休日はNetflixを見ながら過ごしています。

最新情報をお届け

De.からWEBデザインの最新情報を受け取りたい方は、下記のボタンでLIKEしてください。