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

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

Pocket

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

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

ド派手な見出しです. 大見出しから中見出しを想定して作りました.

前回までの見出しとの違いは背景色を付けたり 上下左右をボーダーで囲ったりして見出しとしての役割を強調しています.

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

screenshot

Table of contents

サンプル

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

up

Header Type 01

screenshot

背景に濃い色を指定し, 文字を白にして区切りを強調しております. ボーダーでやっていることはシンプルで背景よりも濃い色のボーダーを 左側に指定しているだけです.

.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

screenshot

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

.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

screenshot

ボーダーで全体を囲っています. 更に 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

screenshot

パッと見カッコよさげな見出しです. 左に 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

screenshot

回りを 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

screenshot

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

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

TRACK BACK URL

POST COMMENT

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

COMMENT