難易度別、見出しデザインアイディア 7選【保存版・サンプルデータ付】

Webサイト制作には切り離すことのできない見出し。

今回はホームページ作成サービス「BiNDup」を使って、見出しの基本的な使い方からデザインのカスタマイズまで実例を交えてご紹介したいと思います。BiNDupのCSS機能「Dress」でできるデザインアイディアを難易度別に初級編〜上級編で用意してみました。サンプルデータをダウンロードしてぜひ利用してみてください。

サンプルを見る

見出しデザイン・初級編

背景色やボーダーを使った見た目・設定ともにシンプルな見出し。
簡単ではありますが角を丸くしたり、二重線にしたり、グラデーションにしたりと少しアクセントを加えるだけでも十分に扱えます。
こちらはDressの基本的な使い方だけでできますので、詳しい設定は割愛させていただきます。

サンプル３つ目の「文字数の幅だけデザイン」では一部高度な設定で「表示形式」を「インラインブロック」にしています。
こうすることで、本来横幅いっぱいに広がる見出しですが、インラインブロックにすることで文字数の幅で表現したカスタマイズができます。

見出しデザイン・中級編

ここからは「高度な設定」を積極的に使用していきます。
短調な初級編とは違い少し複雑な形になったかと思います。

これらは高度な設定の「before要素」「after要素」を利用しており、これらの基本的な使い方は下記の記事を参考にしてみてください。
https://bindup.jp/camp/bind/29739

ポイント

中級編以降のポイントとしては、見出し全体に配置方法「相対位置」を設定します。
相対位置に設定しておくと、後に解説するbefore要素をコントロールするための基準を作ることができます。

before要素

中級編サンプルの「２色の下線を引いた見出し」では、見出しにアンダーラインを引きつつ、before要素で別色のラインパーツを作り、見出しのラインに重ねることで２色のアンダーラインを表現しています。

before要素で作成したラインパーツは、高度な設定「位置」で重ねる位置を調整します。

解説

その他のサンプルもbefore要素でパーツを作り、見出しに重ねることで表現しています。

斜め背景

吹き出し

見出しデザイン・上級編

中級編ではbefore要素のみでしたが、こちらからは「after要素」も取り入れていきます。
基本的は中級編とあまり変わりませんが、単純にbefore要素とafter要素で２つの装飾パーツが使えるのでより複雑な表現が可能です。

セリフ風

アイコン付き

こちらはbefore要素だけですが、アイコンの表示がちょっと特殊です。
本来Dress上で普段ブロックエディタで挿入できるアイコンフォントは使用できませんが、フォントを「bindicon」にし、内容をアイコンフォントのコードにすることでDressでもアイコンフォントを使用することができます。
今回のチェックマークでだと内容は「'\ea10'」になります。

アイコンフォント コード例

	\ea10
	\e91a
	\e986
	\e9b0
	\ea03
	\e946
	\e971
	\e96c
	\e9d2
	\e9cc

---

いかがでしたか？
読んでいるだけだと難しくて理解できない、と言う方は以下よりサイトデータをダウンロードして設定を確認してみてくださいね。
また、各見出しはブロックDressにしてありますのでお手元のサイトデータにもそのまま利用できるかと思いますのでお試しください。