『CSS の border プロパティを使って見出しを装飾しよう』 第２弾!(第４弾まであります!!)

引き続き CSS の border プロパティを使って見出しを装飾する方法について紹介します.

ちょい派手な見出しです. シンプルな見出しです. 大見出しから中見出しを想定して作りました.

色については, 並べたときに見栄えするように hsl を使って色相を 60度ずつずらしていますが今回のエントリーとは無関係なので気にしないで下さい.

• シンプルな見出し
• ちょい派手な見出し←今ここ
• ド派手な見出し(近日公開予定)
• 超有名サイトの見出し(近日公開予定)

Table of contents

• サンプル
• Header Type 01
• Header Type 02
• Header Type 03
• Header Type 04
• Header Type 05
• Header Type 06

サンプル

サンプルです. もちろん jsdo.it で作成しているので実際に動かしたりコードを見たり, fork してイジって頂けると嬉しいです.

up

Header Type 01

背景を塗り, 左右にボーダーを引いて見出し感を出してみました.

.header-type01 {
    background-color: rgb(240, 240, 240);
    color: hsl(0, 50%, 50%);
    padding-left: 5px;
    border-left: 4px solid hsl(0, 50%, 50%);
    border-right: 4px solid hsl(0, 50%, 50%);
}

up

Header Type 02

Header Type 01 に加え border-style に double を指定しています.

.header-type02 {
    background-color: rgb(240, 240, 240);
    color: hsl(60, 50%, 50%);
    padding-left: 5px;
    border-left: 8px double hsl(60, 50%, 50%);
    border-right: 8px double hsl(60, 50%, 50%);
}

up

Header Type 03

左右にボーダーを入れている点は Header Type 01 と同じですが, inset を指定して内側に食い込むように指定しています.

ただこれだけでは表示に変化は無いので, 上下に透明のラインを入れています.

border-bottom を指定してアンダーラインを引いています.

.header-type03 {
    background-color: rgb(240, 240, 240);
    color: hsl(120, 50%, 50%);
    padding-left: 5px;
    border-left: 8px inset hsl(120, 50%, 50%);
    border-right: 8px inset hsl(120, 50%, 50%);
    border-top: 4px inset rgba(255, 255, 255, 0);
    border-bottom: 4px inset rgba(255, 255, 255, 0);
}

up

Header Type 04

上下に double 指定のラインを入れてみました. コードはとてもシンプルですが, わりと見た目がしっくりくる.

よく使われる見出しです.

.header-type04 {
    background-color: rgb(240, 240, 240);
    color: hsl(180, 50%, 50%);
    padding-left: 5px;
    border-top: 4px double hsl(180, 50%, 50%);
    border-bottom: 4px double hsl(180, 50%, 50%);
}

up

Header Type 05

上下に細いライン, 左に太めのライン. 今回紹介するサンプルの中では最もメジャーな見出しです.

大見出しなんかによく使われます.

.header-type05 {
    background-color: rgb(240, 240, 240);
    color: hsl(240, 50%, 50%);
    padding-left: 5px;
    border-left: 4px solid hsl(240, 50%, 50%);
    border-top: 1px solid hsl(240, 50%, 50%);
    border-bottom: 1px solid hsl(240, 50%, 50%);
}

up

Header Type 06

左右に太めのラインを入れて, 上下に dotted 指定のラインを入れています. これも大見出しなんかでよく使われます.

.header-type06 {
    background-color: rgb(240, 240, 240);
    color: hsl(300, 50%, 50%);
    padding-left: 5px;
    border-left: 4px solid hsl(300, 50%, 50%);
    border-right: 4px solid hsl(300, 50%, 50%);
    border-top: 1px dotted hsl(300, 50%, 50%);
    border-bottom: 1px dotted hsl(300, 50%, 50%);
}

up

次回は『ちょい派手な見出し』について紹介します.