CSS の border プロパティを使って見出しを装飾しよう – 超有名サイトの見出し
『CSS の border プロパティを使って見出しを装飾しよう』 第4弾! ラストです!!
私がよく参考にさせて頂いている有名ブログの見出しを並べてみました. 私が真似て作っているだけなので実際のコードとは異なる部分がありますのでご注意下さい.
やはり有名なブログだと, ごちゃごちゃした見出しではなく, 見やすさを重視したシンプルなものが多いですね.
なんかデザインについて色々言っちゃっていますが, 私はゲームプログラマであってWeb に関しては素人です. なので, なんか言っちゃってんなぁ~程度に流してもらえれば幸いです.
※見出しで使用している画像は許可を頂いて使用しています. 本家サイトの許可無く転用しないようお願いします.
Table of contents
- サンプル
- コリス さんの見出し
- かちびと.net さんの見出し
- Webデザインレシピ さんの見出し
- ホームページを作る人のネタ帳 さんの見出し
- Webpark さんの見出し
- Web活メモ帳 さんの見出し
サンプル
サンプルです. もちろん jsdo.it で作成しているので実際に動かしたりコードを見たり, fork してイジって頂けると嬉しいです.
コリス さんの見出し
ホバー時に微妙に文字の色を変更し, 背景を変更することで強調しています. こういった細かい一手間が良いですね.
また 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%); }
本家サイトはこちら
かちびと.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; }
本家サイトはこちら
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, 'MS Pゴシック', 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; }
本家サイトはこちら
ホームページを作る人のネタ帳 さんの見出し
こちらのサイトの見出しも非常にシンプルです.
ヘッダーやフッター, ロゴなどが色々と手が凝っている分, メインコンテンツはシンプルで見やすい印象です.
見出しのコード自体も特に目新しいことはやっていないようです.
.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; }
本家サイトはこちら
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; }
本家サイトはこちら
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; }
本家サイトはこちら
これで『CSS の border プロパティを使って見出しを装飾しよう』は以上です.
ちなみに私のサイトの見出しは Web フォントと before 擬似クラスを使って 作っていたりしますw
この方法についても近々公開しますね♪
[css][web][border] / “CSS の border プロパティを使って見出しを装飾しよう – 超有名サイトの見出し | TM Life” http://t.co/ePYIVEZN
書きました! RT @tmlife_jp: [css][web][border] / “CSS の border プロパティを使って見出しを装飾しよう – 超有名サイトの見出し | TM Life” http://t.co/lQqbhK2W
“CSS の border プロパティを使って見出しを装飾しよう – 超有名サイトの見出し | TM Life” http://t.co/fpR6Fg7b
CSS の border プロパティを使って見出しを装飾しよう – 超有名サイトの見出し | TM Life 『CSS の border プロパティを使って見出しを装飾しよう』 第4弾! ラストです!! シンプルな見出し ちょい… http://t.co/wWhvYiX3
CSS の border プロパティを使って見出しを装飾しよう – 超有名サイトの見出し | TM Life: 『CSS の border プロパティを使って見出しを装飾しよう』 第4弾! ラストです!! シンプルな見出し … http://t.co/afHCiDdg
CSS の border プロパティを使って見出しを装飾しよう – 超有名サイトの見出し | TM Life: 『CSS の border プロパティを使って見出しを装飾しよう』 第4弾! ラストです!! シンプルな見出し … http://t.co/tLwH8LPl
CSS の border プロパティを使って見出しを装飾しよう – 超有名サイトの見出し | TM Life http://t.co/UvhLLHDz
CSS の border プロパティを使って見出しを装飾しよう – 超有名サイトの見出し | TM Life http://t.co/17lmEoT1
@colisscom 以前, 画像の使用を快諾していただきありがとうございました.
使わせて頂いたエントリーを公開しました.
http://t.co/1FYe4mkL
問題等ありましたらご連絡いただけると幸いです.
今後ともよろしくお願いします.
@WebDesignRecipe 以前, 画像の使用を快諾していただきありがとうございました.
使わせて頂いたエントリーを公開しました.
http://t.co/1FYe4mkL
問題等ありましたらご連絡いただけると幸いです.
今後ともよろしくお願いします.
CSS の border プロパティを使って見出しを装飾しよう – 超有名サイトの見出し | TM Life http://t.co/337FPw2r
CSS の border プロパティを使って見出しを装飾しよう – 超有名サイトの見出し | TM Life http://t.co/k6mPheDX
CSS の border プロパティを使って見出しを装飾しよう – 超有名サイトの見出し | TM Life: 『CSS の border プロパティを使って見出しを装飾しよう』 第4弾! ラストです!! シンプルな見出し … http://t.co/m6xAPzH5
CSS の border プロパティを使って見出しを装飾しよう – 超有名サイトの見出し | TM Life 『CSS の border プロパティを使って見出しを装飾しよう』 第4弾! ラストです!! シンプルな見出し ちょい派手な見出し ド派手な見出し
CSS の border プロパティを使って見出しを装飾しよう – 超有名サイトの見出し | TM Life http://t.co/7aJGLFCH
http://t.co/cBQK0vPA CSS の border プロパティを使って見出しを装飾しよう – 超有名サイトの見出し | TM Life
CSS の border プロパティを使って見出しを装飾しよう – 超有名サイトの見出し | TM Life
http://t.co/XlYKlf04
“CSS の border プロパティを使って見出しを装飾しよう – 超有名サイトの見出し | TM Life” http://t.co/3bm4SBeT
[css] / “CSS の border プロパティを使って見出しを装飾しよう – 超有名サイトの見出し | TM Life” http://t.co/HcVgvBU3
CSS の border プロパティを使って見出しを装飾しよう – 超有名サイトの見出し | TM Life http://t.co/UKMH0rcj
webデザイン系の有名ブログの見出しを1つずつ解説。おもしろい! / “CSS の border プロパティを使って見出しを装飾しよう – 超有名サイトの見出し | TM Life” http://t.co/pGAmT7mr
CSS の border プロパティを使って見出しを装飾しよう – 超有名サイトの見出し | TM Life http://t.co/C6Ltmt1l
CSS の border プロパティを使って見出しを装飾しよう – 超有名サイトの見出し | TM Life http://t.co/iJWUzzc7
CSS の border プロパティを使って見出しを装飾しよう – 超有名サイトの見出し | TM Life http://t.co/Li4ZTlzp
参考になります。
[…] 超有名サイトの見出し […]
これまでに書いたやつのまとめです. 良かったらぜひ♪ RT @tmlife_jp: [css][web][border] / “CSS の border プロパティを使って見出しを装飾しよう – 超有名サイトの見出し | TM Life” http://t.co/ePYIVEZN
CSS の border プロパティを使って見出しを装飾しよう – 超有名サイトの見出し | TM Life 『CSS の border プロパティを使って見出しを装飾しよう』 第4弾! ラストです!! シンプルな見出し ちょい派手な見出し ド派手な見出し