CSSのみで作るバイカラーの見出しサンプル・コピペOK14個

こんにちわ、だいぐぅです。

早速ですが、バイカラーでの見出しって、たまに必要になることがあります。
よくあるのが、チームカラーやコーポレートカラーが2色で、それらを見出しに配したい場合など。

そういった際に、見出しのデザインで頭を悩ませることが多いので、ある程度まとめておこうと思いました。ブログのカスタマイズなどにも使えると思います。

あくまでもサンプルですので、お好きにカスタマイズしてご利用ください。

シンプルなバイカラーの見出し

下線の見出し

See the Pen by Studio Argus (@Studio-Argus) on CodePen.

左線の見出し

See the Pen by Studio Argus (@Studio-Argus) on CodePen.

中央寄せ下線の見出し

See the Pen by Studio Argus (@Studio-Argus) on CodePen.

二重線囲みの見出し

See the Pen by Studio Argus (@Studio-Argus) on CodePen.

左二重線の見出し

See the Pen by Studio Argus (@Studio-Argus) on CodePen.

背景色を使ったバイカラーの見出し

斜め背景の見出し

See the Pen by Studio Argus (@Studio-Argus) on CodePen.

背景＋左線の見出し

See the Pen by Studio Argus (@Studio-Argus) on CodePen.

背景＋下線の見出し

See the Pen by Studio Argus (@Studio-Argus) on CodePen.

ポップなバイカラーの見出し

重ねた四角の見出し

See the Pen by Studio Argus (@Studio-Argus) on CodePen.

重ねた丸の見出し

See the Pen by Studio Argus (@Studio-Argus) on CodePen.

チェック背景の見出し

See the Pen by Studio Argus (@Studio-Argus) on CodePen.

斜め装飾を使ったバイカラーの見出し

右側にラインを横並びにした見出し

See the Pen by Studio Argus (@Studio-Argus) on CodePen.

右側にラインを縦並びにした見出し

See the Pen by Studio Argus (@Studio-Argus) on CodePen.

背景色＋斜めラインの見出し

See the Pen by Studio Argus (@Studio-Argus) on CodePen.

まとめ

取り急ぎ、思いついた分などを挙げてみました。他にも思い付いたら随時追加したいと思います。

バイカラーって、かなり組み合わせで印象が変わります。
コーポレートカラーなどであらかじめ指定がある場合が多いですが、それ以外の場合、最初にキーカラーを決めて、組み合わせを選ぶやり方が個人的にはいちばんやりやすいです。

反対色を選ぶも良し、近似色を選ぶも良し。
キーカラーを指定すると、色の組み合わせを提示してくれるサイトもありますので、そのあたりを利用してみるのも良いかもしれません。もちろん、カラーパレット系のサイトも便利ですね。