CSS の border プロパティを使って見出しを装飾しよう – ちょい派手な見出し
『CSS の border プロパティを使って見出しを装飾しよう』 第2弾!(第4弾まであります!!)
引き続き CSS の border プロパティを使って見出しを装飾する方法について紹介します.
ちょい派手な見出しです. シンプルな見出しです. 大見出しから中見出しを想定して作りました.
色については, 並べたときに見栄えするように hsl を使って色相を 60度ずつずらしていますが今回のエントリーとは無関係なので気にしないで下さい.
- シンプルな見出し
- ちょい派手な見出し←今ここ
- ド派手な見出し(近日公開予定)
- 超有名サイトの見出し(近日公開予定)
Table of contents
サンプル
サンプルです. もちろん jsdo.it で作成しているので実際に動かしたりコードを見たり, fork してイジって頂けると嬉しいです.
Header Type 01
背景を塗り, 左右にボーダーを引いて見出し感を出してみました.
.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%); }
Header Type 02
Header Type 01 に加え border-style
に double
を指定しています.
.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%); }
Header Type 03
左右にボーダーを入れている点は 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); }
Header Type 04
上下に 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%); }
Header Type 05
上下に細いライン, 左に太めのライン. 今回紹介するサンプルの中では最もメジャーな見出しです.
大見出しなんかによく使われます.
.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%); }
Header Type 06
左右に太めのラインを入れて, 上下に 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%); }
次回は『ちょい派手な見出し』について紹介します.
[css][装飾] / “CSS の border プロパティを使って見出しを装飾しよう – ちょい派手な見出し | TM Life” http://t.co/GXAsFPOR
CSS の border プロパティを使って見出しを装飾しよう – ちょい派手な見出し | TM Life http://t.co/VOUM3rnd
CSS の border プロパティを使って見出しを装飾しよう – ちょい派手な見出し | TM Life: 『CSS の border プロパティを使って見出しを装飾しよう』 第2弾!(第4弾まであります!!) 引き続き … http://t.co/9r5iS5sI
CSS の border プロパティを使って見出しを装飾しよう – ちょい派手な見出し | TM Life: 『CSS の border プロパティを使って見出しを装飾しよう』 第2弾!(第4弾まであります!!) 引き続き … http://t.co/eWXj3OSS
CSS の border プロパティを使って見出しを装飾しよう – ちょい派手な見出し | TM Life: 『CSS の border プロパティを使って見出しを装飾しよう』 第2弾!(第4弾まであります!!) 引き続き … http://t.co/3hZTw5ZE
CSS の border プロパティを使って見出しを装飾しよう – ちょい派手な見出し | TM Life http://t.co/3qjKuUGn
CSS の border プロパティを使って見出しを装飾しよう – ちょい派手な見出し | TM Life: 『CSS の border プロパティを使って見出しを装飾しよう』 第2弾!(第4弾まであります!!) 引き続き … http://t.co/pgcMt1lU
CSS の border プロパティを使って見出しを装飾しよう – ちょい派手な見出し | TM Life http://t.co/t9UiluSN
CSS の border プロパティを使って見出しを装飾しよう – ちょい派手な見出し | TM Life http://t.co/6hiHrkMk
【はてブ新着IT】 CSS の border プロパティを使って見出しを装飾しよう – ちょい派手な見出し | TM Life http://t.co/VBSTrHxb
CSS の border プロパティを使って見出しを装飾しよう – ちょい派手な見出し | TM Life http://t.co/kG5whlec
CSS の border プロパティを使って見出しを装飾しよう – ちょい派手な見出し | TM Life http://t.co/IwiyGfM9
CSS の border プロパティを使って見出しを装飾しよう – ちょい派手な見出し | TM Life
CSS の border プロパティを使って見出しを装飾しよう – ちょい派手な見出し | TM Life http://t.co/5crun4gw
CSS の border プロパティを使って見出しを装飾しよう – ちょい派手な見出し | TM Life http://t.co/5crun4gw
CSS の border プロパティを使って見出しを装飾しよう – ちょい派手な見出し http://t.co/JiYrFhnS @phi_jpさんから
CSS の border プロパティを使って見出しを装飾しよう – ちょい派手な見出し | TM Life http://t.co/gkLkYeRb
CSS の border プロパティを使って見出しを装飾しよう – ちょい派手な見出し | TM Life http://t.co/WMTm1SQr #css #web
CSS の border プロパティを使って見出しを装飾しよう – ちょい派手な見出し | TM Life http://t.co/7szcLafq
CSS の border プロパティを使って見出しを装飾しよう – ちょい派手な見出し | TM Life http://t.co/TiVW20rK
[…] ちょい派手な見出し […]
CSS の border プロパティを使って見出しを装飾しよう – ちょい派手な見出し | TM Life http://t.co/qteLnnCy
CSS の border プロパティを使って見出しを装飾しよう – ちょい派手な見出し | TM Life http://t.co/R1kpKMEO
CSS の border プロパティを使って見出しを装飾しよう – ちょい派手な見出し | TM Life http://t.co/5crun4gw
“CSS の border プロパティを使って見出しを装飾しよう – ちょい派手な見出し | TM Life” http://t.co/KQWGviKB
CSS の border プロパティを使って見出しを装飾しよう – ちょい派手な見出し | TM Life http://t.co/w3gsOzEO
CSS の border プロパティを使って見出しを装飾しよう – ちょい派手な見出し | TM Life http://t.co/WMTm1SQr #css #web
CSS の border プロパティを使って見出しを装飾しよう – ちょい派手な見出し | TM Life http://t.co/TiVW20rK
CSS の border プロパティを使って見出しを装飾しよう – ちょい派手な見出し | TM Life http://t.co/zuywAI6B
メモ / “CSS の border プロパティを使って見出しを装飾しよう – ちょい派手な見出し | TM Life” http://t.co/O0Azy7fi
[コンピュータ・IT][MyInterest][css][webデザイン][装飾][web制作][あとでみる] / “CSS の border プロパティを使って見出しを装飾しよう – ちょい派手な見出し | TM Life” http://t.co/pmRcACHT
[…] ちょい派手な見出し […]
[…] →CSS の border プロパティを使って見出しを装飾しよう – ちょい派手な見出し | TM Life […]