CSS の border プロパティを使って見出しを装飾しよう – ちょい派手な見出し

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

Pocket

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

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

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

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

screenshot

Table of contents

サンプル

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

up

Header Type 01

screenshot

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

.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

screenshot

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

.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

screenshot

左右にボーダーを入れている点は 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

screenshot

上下に 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

screenshot

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

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

.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

screenshot

左右に太めのラインを入れて, 上下に 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

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

TRACK BACK URL

POST COMMENT

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

COMMENT