CSS の border プロパティを使って見出しを装飾しよう – シンプルな見出し

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

Pocket

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

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

シンプルな見出しです. 中見出しから小見出しを想定して作りました. CSS もシンプルなので簡単に使えます.

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

screenshot

Table of contents

サンプル

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

up

Header Type 01

screenshot

border-left を使って左側にちょい太めのボーダを引いています.

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

up

Header Type 02

screenshot

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

.header-type02 {
    color: hsl(60, 50%, 50%);
    padding-left: 5px;
    border-left: 4px double hsl(60, 50%, 50%);
}

up

Header Type 03

screenshot

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

.header-type03 {
    color: hsl(120, 50%, 50%);
    padding-left: 5px;
    border-bottom: 4px solid hsl(120, 50%, 50%);
}

up

Header Type 04

screenshot

Header Type 03 の double 版です.

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

up

Header Type 05

screenshot

Header Type 01 と Header Type 03 との組み合わせです.

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

up

Header Type 06

screenshot

Header Type 05 とほとんど同じですが, border-bottomdotted を指定して点線にしています.

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

up

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

TRACK BACK URL

POST COMMENT

メールアドレスが公開されることはありません。

COMMENT