『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: hsl(0, 50%, 50%);
    color: white;
    padding-left: 5px;
    border-left: 6px solid hsl(0, 50%, 35%);
}

up

Header Type 02

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

.header-type02 {
    background-color: hsl(60, 50%, 50%);
    color: white;
    padding-left: 5px;
    border-left: 8px groove hsl(60, 50%, 35%);
}

up

Header Type 03

ボーダーで全体を囲っています. 更に CSS3 の border-radius で角丸にしています.

.header-type03 {
    background-color: hsl(120, 50%, 50%);
    color: white;
    padding-left: 5px;
    border: 2px solid hsl(120, 50%, 35%);
    border-radius: 5px;
}

up

Header Type 04

パッと見カッコよさげな見出しです. 左に groove, 下に double を指定することでスタイリッシュな見出しにしてみました.

.header-type04 {
    background-color: rgb(250, 250, 250);
    color: hsl(180, 50%, 50%);
    padding-left: 5px;
    border-left: 8px groove hsl(180, 50%, 35%);
    border-top: 4px double hsla(180, 50%, 50%, 0);
    border-bottom: 4px double hsl(180, 50%, 50%);
}

up

Header Type 05

回りを groove を指定したボーダーで囲って 文字を中央揃えにしてみました.

.header-type05 {
    background-color: rgb(250, 250, 250);
    text-align: center;
    color: hsl(240, 50%, 50%);
    padding-left: 5px;
    border-left: 16px groove hsl(240, 50%, 35%);
    border-right: 16px groove hsl(240, 50%, 35%);
    border-top: 8px groove hsl(240, 50%, 50%);
    border-bottom: 8px groove hsl(240, 50%, 50%);
}

up

Header Type 06

border-radius を左上と右下にのみ指定して一味違う見出しにしてみました.

.header-type06 {
    background-color: hsl(300, 50%, 50%);
    text-align: center;
    color: white;
    text-shadow: 1px 1px 2px black;
    padding: 5px;
    border-left: 16px groove hsl(300, 50%, 35%);
    border-right: 16px groove hsl(300, 50%, 35%);
    border-top: 1px solid hsl(300, 50%, 35%);
    border-bottom: 1px solid hsl(300, 50%, 35%);
    border-top-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

up

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