Lesson 15 可変の線と固定の線を同時に表現するヘッドライン - Webデザイン表現&技法の新・スタンダード・レイアウト編

Webデザイン 表現&技法の 新・スタンダード

Lesson 15

可変の線と固定の線を 同時に表現するヘッドライン

	制作・文			大須賀政裕（oskadesign）
＞	To Use			CSS
＞	Browser			IE 6over | Firefox 3over | Safari 4over

ヘッドラインにおいてCSSを２重に指定することで、ベースの固定された線と、文字数に合わせて可変する線を同時に表現できる。画像での表現でなく、テキストで動的に出力したい場合には特に効果的だ。

まずはFireworksやIllustratorなどを使って、ヘッドラインのデザインを考える。ヘッ ドラインのベースにあたる部分を黒色で太 さ２ピクセルの線、文字の下の部分を緑色 で太さ２ピクセルの線にする【1-1】。ヘッドラインを画像で表現するのであれば、このまま書き出してしまえばよいが、作例ではこれをテキストで表現するためにCSSを用いる【1-2】。


【1-1】作例ではわかりやすいようにシンプルなデザインを採用した


【1-2】黒色の部分を横サイズが固定の領域、緑色の部分を文字数に合わせて横サイズが可変の領域とする

HTMLの記述を行う。ベースの固定線を表現するために、divなどのブロック要素を設ける【2-1】。


【2-1】クラス名.titleを使って、<div class="title"></div>と記述している

<div class="title"></div>の内部に、h1などのヘッドラインタグを用いてテキストエリアを設ける【3-1】【3-2】。なお、このエリアを可変領域にするためには、外部CSSでの指定をインライン要素にする必要がある（05参照）。あるいは、あらかじめspanなどのインライン要素を設けてもよいだろう。


【3-1】ここでは、<h1></h1>を記述している


【3-2】<h1></h1>の内部に見出しのテキストとして、『Boom Boom』と記述している

今度は、外部CSSの記述を行う。クラス名.titleでは、下線のデザインとしてborderbottom- width: 2px;、border-bottomstyle:solid;、border-bottom-color :#222222;を、内部と下線のスペースとしてpadding: 0px 0px 9px 0px;を指定する【4-1】【4-2】。


【4-1】


【4-2】【4-1】をブラウザで表示した図

ヘッドラインタグh1では、下線のデザイン、内部と下線のスペース、フォントのデザインを指定する【5-1】【5-2】。ここでのポイントは、ヘッドラインタグをブロック 要素からインライン要素に変換するために、display: inline ;を指定していることである。このようにすることで、横サイズが文字数に合わせて可変となる。


【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】をブラウザで表示した図

主要なブラウザで表示をチェックしながらCSSを調整する。Internet Explorerと他のブラウザでは、解釈が異なる場合があるため、若干の調整が必要である。ここでは、Internet Explorer8とそれ以下用のCSSハック（ブラウザのバグを利用した調整、右記URL参照）として、padding: 0px 0px 8px 0px¥9; を加えている【6-1】。


【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/）

J最後にこのHTMLとCSSにおいて、文字数の異なる任意のテキストを記述したものをいくつか作成し、それぞれ比較してみる【7-1】。文字数に合わせて緑色の線の横サ イズが変化していれば成功だ。このテクニックはCMSなどにも応用が可能である。たとえば、【7-2】のように、WordPressのテンプレートのPHPにおいて今回の記述に加えて、<h1> ～</h1>の内部のテキストを変数にすることで、動的な出力にも対応できる。


【7-1】見出しの文字数に合わせて緑のラインが伸び縮みする


【7-2】CMSテンプレートの記述例

J最後にこのHTMLとCSSの記述を編集すれば、他にも様々なバリエーションが可能である【8-1】。CSSのborder部分を変更することにより、線の位置や色や太さを変えたり、backgroundを記述することにより、背景に変化をつけたりすることができる。また、画像などを組み合わせることによっても、デザインの可 能性を広げることができるだろう。


【8-1】CSSの記述をアレンジしたり画像と組み合わせることでデザインのバリエーションが広がる