CSS の border プロパティを使って見出しを装飾しよう – ド派手な見出し
『CSS の border プロパティを使って見出しを装飾しよう』 第3弾!(第4弾まであります!!)
引き続き CSS の border プロパティを使って見出しを装飾する方法について紹介します.
ド派手な見出しです. 大見出しから中見出しを想定して作りました.
前回までの見出しとの違いは背景色を付けたり 上下左右をボーダーで囲ったりして見出しとしての役割を強調しています.
色については, 並べたときに見栄えするように hsl を使って色相を 60度ずつずらしていますが今回のエントリーとは無関係なので気にしないで下さい.
- シンプルな見出し
- ちょい派手な見出し
- ド派手な見出し←今ここ
- 超有名サイトの見出し(近日公開予定)
Table of contents
サンプル
サンプルです. もちろん jsdo.it で作成しているので実際に動かしたりコードを見たり, fork してイジって頂けると嬉しいです.
Header Type 01
背景に濃い色を指定し, 文字を白にして区切りを強調しております. ボーダーでやっていることはシンプルで背景よりも濃い色のボーダーを 左側に指定しているだけです.
.header-type01 { background-color: hsl(0, 50%, 50%); color: white; padding-left: 5px; border-left: 6px solid hsl(0, 50%, 35%); }
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%); }
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; }
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%); }
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%); }
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; }
次回は『ちょい派手な見出し』について紹介します.
[css][border][デザイン] / “CSS の border プロパティを使って見出しを装飾しよう – ド派手な見出し | TM Life” http://t.co/18jqTeRS
CSS の border プロパティを使って見出しを装飾しよう – ド派手な見出し | TM Life 『CSS の border プロパティを使って見出しを装飾しよう』 第3弾!(第4弾まであります!!) 引き続き CSS の… http://t.co/BWfGvHel
CSS の border プロパティを使って見出しを装飾しよう – ド派手な見出し | TM Life http://t.co/bbE1BvKC
CSS の border プロパティを使って見出しを装飾しよう – ド派手な見出し | TM Life 『CSS の border プロパティを使って見出しを装飾しよう』 第3弾!(第4… http://t.co/Bf2PSEUg
CSS の border プロパティを使って見出しを装飾しよう – ド派手な見出し | TM Life http://t.co/3C89siLa
CSS の border プロパティを使って見出しを装飾しよう – ド派手な見出し | TM Life http://t.co/c7Pj438q
CSS の border プロパティを使って見出しを装飾しよう – ド派手な見出し | TM Life
http://t.co/FzYRYXWv
【はてブ新着IT】 CSS の border プロパティを使って見出しを装飾しよう – ド派手な見出し | TM Life http://t.co/2udNKoP5
CSS の border プロパティを使って見出しを装飾しよう – ド派手な見出し | TM Life: 『CSS の border プロパティを使って見出しを装飾しよう』 第3弾!(第4弾まであります!!) 引き続き CS… http://t.co/mhXEJMoZ
“CSS の border プロパティを使って見出しを装飾しよう – ド派手な見出し | TM Life” http://t.co/3UkF14Ud
記事もお役立ちなんですが、ページを開くと落ちてくるマリオが可愛い。
記事もお役立ちなんですが、ページを開くと落ちてくるマリオが可愛い。 / “CSS の border プロパティを使って見出しを装飾しよう – ド派手な見出し | TM Life” http://t.co/kEd0TYNM
書きました! RT @tmlife_jp: [css][border][デザイン] / “CSS の border プロパティを使って見出しを装飾しよう – ド派手な見出し | TM Life” http://t.co/Ifs8jDOM
メモ / “CSS の border プロパティを使って見出しを装飾しよう – ド派手な見出し | TM Life” http://t.co/GbdBhNWT
書きました! RT @tmlife_jp: [css][border][デザイン] / “CSS の border プロパティを使って見出しを装飾しよう – ド派手な見出し | TM Life” http://t.co/Ifs8jDOM
CSS の border プロパティを使って見出しを装飾しよう – ド派手な見出し | TM Life http://t.co/fjJkjTKf
CSS の border プロパティを使って見出しを装飾しよう – ド派手な見出し | TM Life http://t.co/ZBTkbqwT
CSS の border プロパティを使って見出しを装飾しよう – ド派手な見出し | TM Life 『CSS の border プロパティを使って見出しを装飾しよう』 第3弾!(第4弾まであります!!) 引き続き CSS の border プロパティを使って見出しを装
記事もお役立ちなんですが、ページを開くと落ちてくるマリオが可愛い。