Webデザイン |
Lesson 15 | 可変の線と固定の線を 同時に表現するヘッドライン |
制作・文 | 大須賀政裕(oskadesign) | |||
> | To Use | CSS | ||
> | Browser | IE 6over | Firefox 3over | Safari 4over |
ヘッドラインにおいてCSSを2重に指定することで、ベースの固定された線と、文字数に合わせて可変する線を同時に表現できる。画像での表現でなく、テキストで動的に出力したい場合には特に効果的だ。 |
01
【1-1】作例ではわかりやすいようにシンプルなデザインを採用した
【1-2】黒色の部分を横サイズが固定の領域、緑色の部分を文字数に合わせて横サイズが可変の領域とする
02
【2-1】クラス名.titleを使って、<div class="title"></div>と記述している
03
【3-1】ここでは、<h1></h1>を記述している
【3-2】<h1></h1>の内部に見出しのテキストとして、『Boom Boom』と記述している
04
【4-1】
【4-2】【4-1】をブラウザで表示した図
05
【5-1】下線のデザインとして、border-bottom-width:2px;、border-bottom-style: solid;、border-bottom-color:#35FF19; を、内部と下線のスペースとしてpadding: 0px 0px 8px 0px;を、フォントのデザインとして、fontsize:14px;、font-family: Arial, Helvetica, Sans-Serif;、color: #222222;、letter-spacing: 2px;、lineheight:100%;を指定している
【5-2】【5-1】をブラウザで表示した図
06
【6-1】
IE8以下用のCSSハックを追記
参考サイト:Nettuts+(http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-how-to-target-ie6-ie7-and-ie8-uniquely-with-4-characters/)
07
【7-1】見出しの文字数に合わせて緑のラインが伸び縮みする
【7-2】CMSテンプレートの記述例
08
【8-1】CSSの記述をアレンジしたり画像と組み合わせることでデザインのバリエーションが広がる