コピーで簡単、目を引く見出し・タイトルデザイン

ブログの文中で使いたい、目を引くタイトルや見出しデザインを簡単に作るためのCSSTipsを見本帳としてご紹介します。

●使用方法


基本的には、コピーで使用可能です。

下の例で使っているデザインは、ほとんどh2タグにつけたクラスで実現しています。すぐ下の例でいうとex1というクラスです。

このh2タグのクラスを各例のクラス(ex1-ex13)に変えた上で、それにそったCSSをコピーしてください。

h2タグは、適宜h1-h6に変更してください。
現在の本サイトでは、何もクラスを付けていないときのh2のCSSは下記になります。
スマホ等のレスポンシブ対応のために単位にremを使っています。

●見出し例12個

強調させたい文言を囲み枠の線上に表示する見出しデザイン

囲み枠の四隅を外に伸ばす見出しデザイン

カラーの異なる下線をつける見出しデザイン

カラーの異なる下線をつける見出しデザイン2

グラデーションの下線をつける見出しデザイン

日本語の横に英語を表示する見出しデザインJapanese with English

スマホにも対応しますが、日本語が長い場合は英語部分が段代わりします。

背景がストライプの見出しデザイン

repeating-linear-gradientを使ってストライプを作ります。
repeating-linear-gradient(ストライプの角度, 色1 始点, 色1 終点, 色2 始点、色2 終点[, 色3 始点, 色3 終点, …何色でも])

先頭の文字のみ大きい見出しデザイン

ストライプの下線のついた見出しデザイン

両脇に線を表示する見出しデザイン

ポイント

・見出しが長い場合やスマホ等で横幅が小さい場合、線は切れます。
・背景が白の場合の設定ですので、白ではないときはspanの背景色を#fffから変更します。

カラーの異なる左線をつける見出しデザイン

吹き出し見出しデザイン

最近はいろんなところでよく見ますね。

強調文字を付けたい場合の見出しデザイン

例のなかの「わかった!」部分は、h2のタイトルとして、title=”わかった!”を加えています。