『CSS の border プロパティを使って見出しを装飾しよう』 第４弾! ラストです!!

• シンプルな見出し
• ちょい派手な見出し
• ド派手な見出し
• 超有名サイトの見出し←今ここ

私がよく参考にさせて頂いている有名ブログの見出しを並べてみました. 私が真似て作っているだけなので実際のコードとは異なる部分がありますのでご注意下さい.

やはり有名なブログだと, ごちゃごちゃした見出しではなく, 見やすさを重視したシンプルなものが多いですね.

なんかデザインについて色々言っちゃっていますが, 私はゲームプログラマであってWeb に関しては素人です. なので, なんか言っちゃってんなぁ～程度に流してもらえれば幸いです.

※見出しで使用している画像は許可を頂いて使用しています. 本家サイトの許可無く転用しないようお願いします.

Table of contents

• サンプル
• コリス さんの見出し
• かちびと.net さんの見出し
• Webデザインレシピ さんの見出し
• ホームページを作る人のネタ帳 さんの見出し
• Webpark さんの見出し
• Web活メモ帳 さんの見出し

サンプル

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

up

コリス さんの見出し

ホバー時に微妙に文字の色を変更し, 背景を変更することで強調しています. こういった細かい一手間が良いですね.

また CSS3 の text-shadow で視認性を高めています. 背景色と文字色が若干近いのでその対応かもしれません.

.header-type01 {
}
.header-type01 a {
    color: hsl(26, 16%, 52%);
    text-shadow: hsl(40, 8%, 85%) 0px 1px 0, hsl(0, 0%, 54%) -1px 0;
    text-decoration: none;
    display: block;
    padding: 10px 6px;
    background: hsl(25, 34%, 86%) url(http://tmlife.net/wp-content/uploads/2012/10/coliss01.png);
    border-bottom: 1px solid hsl(34, 23%, 82%);
}
.header-type01 a:hover {
    color: hsl(27, 18%, 42%);
    background: hsl(25, 34%, 86%) url(http://tmlife.net/wp-content/uploads/2012/10/coliss02.png);
    border-bottom: 1px solid hsl(30, 21%, 80%);
}

本家サイトはこちら

up

かちびと.net さんの見出し

コレ以上ないっていうくらいシンプルな見出しです. かちびとさんのサイトは全体的にシンプルでスタイリッシュな印象なので, 見出しもこのくらいシンプルな方が馴染みますね.

コード自体もシンプルで text-decoration: none; でリンクの アンダーラインを非表示にして, ホバー字に文字色が赤になるよう color: red; を指定しています.

.header-type03 {
}
.header-type03 a {
    color: hsl(0, 0%, 31%);
    font-size: 18px;
    font-weight: 400;
    text-decoration: none;
}
.header-type03 a:hover {
    color: red;
    text-decoration: none;
}

本家サイトはこちら

up

Webデザインレシピ さんの見出し

全体的に女性的でフォントや配色にこだわりを感じるサイトデザインですね. ページがグレイとピンクを貴重としているので見出しもピンクです.

文字の下に破線を引いていますが, これは border-style ではなく background でリピート指定して 表示しています. border-style だとブラウザによって見栄えが若干異なるからでしょうかね?

.header-type04 {
    font: 13px/1.8 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Arial, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Osaka, 'ＭＳ Ｐゴシック', sans-serif;
    font-size: 123%;
    margin-top: -.25em;
    line-height: 1.4;
    text-shadow: 0 1px white;
    margin-bottom: 5px;
}
.header-type04 a {
    display: block;
    color: hsl(338, 62%, 57%);
    text-decoration: none;
}
.header-type04 a span {
    background: url(http://tmlife.net/wp-content/uploads/2012/10/webdesignrecipes.png) repeat-x 0 100%;
    padding-bottom: 2px;
}

本家サイトはこちら

up

ホームページを作る人のネタ帳 さんの見出し

こちらのサイトの見出しも非常にシンプルです.

ヘッダーやフッター, ロゴなどが色々と手が凝っている分, メインコンテンツはシンプルで見やすい印象です.

見出しのコード自体も特に目新しいことはやっていないようです.

.header-type05 {
    font-size: 170%;
    line-height: 110%;
    margin: 30px 0 15px;
}
.header-type05 a {
    color: hsl(343, 73%, 47%);
    text-decoration: none;
}
.header-type05 a:hover {
    color: #903;
}

本家サイトはこちら

up

Webpark さんの見出し

白と青を貴重としてウェブサイトです. 見出しも同様, 青に文字色に白の text-shadow を指定しています.

ホバー時は鮮やかなピンクを指定してマウスを載せているのが ひと目で分かるようになっています.

.header-type06 {
    color: hsl(213, 100%, 28%);
    font-size: 24px;
    font-weight: bold;
    line-height: 130%;
    margin: 7px 0px 0px 0px;
    padding: 0px 0px 3px 0px;
    border-bottom: 3px solid hsl(0, 0%, 87%);
}
.header-type06 a {
    color: hsl(213, 100%, 28%);
    text-shadow: 1px 1px 0px white, 2px 2px 1px hsl(213, 100%, 85%);
    text-decoration: none;
}
.header-type06 a:hover {
    color: #ff0099;
}

本家サイトはこちら

up

Web活メモ帳 さんの見出し

パッと見凝っているように見えますが, どれもシンプルに作ってあります.

見出しもホバー時にアンダーラインを表示するだけで, とくに難しいことはやっていません.

.header-type08 {
    font-size: 20px;
    color: black;
    font-weight: normal;
    margin: 0px 0px 6px 0px;
}
.header-type08 a {
    color: black;
    text-decoration: none;
}
.header-type08 a:hover {
    text-decoration: underline;
}

本家サイトはこちら

up

これで『CSS の border プロパティを使って見出しを装飾しよう』は以上です.

ちなみに私のサイトの見出しは Web フォントと before 擬似クラスを使って 作っていたりしますw

この方法についても近々公開しますね♪