第7回 CSSで脱画像タイトルの奥義
脱！画像タイトル！というのは大げさだろうか。見出しに視覚要素を加えて装飾したければ、普通画像テキストを使うモノだが、それでは似たようなものを複数作るのに手間がかかるし、どうせなら徹底的にアクセシブルにしてみたい。というわけで、文字要素はきちんとテキストで、視覚要素は必要最低限の素材を作ってみた。
解説：矢野りん
■POINT
見出しテキストの背景に装飾要素があり、その横に著者のプロフィールが確認できるようなスタイルを考える。プロフィール、つまり顔写真は立派な情報の１つ。だからスタイルを受け付けないブラウザや機器に対しても、表示されるような方法を考える必要がある。また、装飾要素に関してはちょっと手描き風なラフさを付けることで、タイトル全体がより一層１枚の画像っぽく見えるようにと工夫している。
画像文字を使わずに文字作成した今回のスタイル完成画面
■STEP 1
XHTML全体はたいへん短いものだ。ポイントは見出しの背景である壁を塗りつぶしたような色付き部分を＜div＞の背景に指定しているところが、【図１】だ。顔写真は＜img＞タグで別途配置したものが【図２】となる。これで装飾はスタイルのほうに、情報である顔写真は文書構造のほうに振り分けられたものが、【図３】となる。ソースは、【ソース1】を参照して欲しい。
【図１】装飾の背景画像。少しラフなテクスチャーを付けている
【図２】顔写真は周囲を透明化しておく
【図３】スタイルなしで閲覧すると、装飾が取れ、顔写真と文字情報だけが見える
【ソース1】図3までのソース
テーブルの幅サイズやセル内部の余白についてはCSS側で指定するが、セルとセルの間隔をコントロールする「cellspacing」だけはここで指定しよう。そうしないとセル同士がうまくくっつきあってくれない。
■STEP 2
装飾用の背景画像に、表示領域の指定を含んだタグ部分のスタイルは以下の【ソース２】のとおりである。
【ソース２】表示領域を含めたソース
文字情報全体の位置を司る＜h2＞タグ部分のスタイルでは、全体が左寄りになるようにfloatを指定しおき、上と左側の余白量を決めている。【図4】が余白の数値で、ソースは【ソース3】を参照。
【ソース3】floatを指定しおき、上と左側の余白量を決める
■STEP3
各文字要素のサイズと色の指定。ここだけ同じタグ内で指定を分けたいために、idでなくclassによる指定を行った。
【ソース４】idでなくclassによる指定
視覚要素の＜img＞タグに対するスタイル。スタイル付きではボーダーを消す指定が必要だ。また、floatを右に指定して、位置を右側に寄せる。あとは上部に少し余白を入れたものが、【ソース５】だ。
【ソース５】視覚要素の＜img＞タグに対するスタイル
これで装飾付きの見出しのできあがりだ。オンラインマガジンに使うときは、著者別に顔写真を用意するなどして、バリエーションの作成が可能になる。【ソース６】が完成ソースなので、参考にして欲しい。
【ソース６】完成ソース
次回へつづく
 |
［プロフィール］ やの・りん●北海道足寄町生まれ。女子美術大学芸術学部芸術学科卒。著書に『Webレイアウト見本帳』、『WEBレイアウト・セオリー・ブック』（エム ディエヌコーポレーション）がある。近著『デザインする技術』（エムディエヌコーポレーション）も好評発売中。身長 152.1cm。 |
