第17回　マークアップの最適化方法

文字要素はなるべくテキストで提供すべき……。という原則はわかっていながらも、やはりタイトルくらいはデザインを施してサイトの内容を伝えたい。そんな時、どのようなマークアップが適しているのだろうか。そんな疑問を持っている方もいると思うが、マークアップ最適化の方法を今回は解説していこう。

タイトルのデザインがスタイルのすべてになるが、ポイントとするならフォントの選び方。メインの「美しい」はあえてアナログ風の手触りをフォントから出したかったため教科書体を選び、欧文のCSSとWebはそれに合わせて正統的なgaramond（ギャラモン）を使っている。「による」および「デザイン」は見出しミンで無難にまとめた。

 

 

まず文字要素の伝達に考慮し、最終的に画像化するタイトルも見出しとして入力しておく。

するとレンダリング結果は当然ながら【図１】のようになるはずだ。

 

これで文書構造、アクセシビリティ的に問題はないはず。次はスタイルシートを使って当初の予定通り見出しを画像で作成したものと差し替えてしまう作業に移ろう。

いきなりだが、大見出し、つまりタイトルの文字要素を非表示にしてしまった。画像を入れたいのでスタイルを適用した状態では大見出しのテキストには消えてもらおう。 次はナビゲーションとして使うchapterの表記方法を定める。ulブロック全体でビュレットは不要なので先に指定しておき、リンクを張ることが前提条件のliはフォントをGeogiaに、サイズと色も指定しておく。

 

 

続いて日本語の部分もブラウザを問わずSerif体に合わせて明朝で表示してほしいので、spanのclassで細かく指定できるよう、クラスセレクタを作っておく。この時、欧文であるGeogiaよりもわずかにフォントサイズを小さく指定して、欧文のフォルムより大ぶりになる和文の表示バランスを整えておこう。

さてこれではタイトルの無いページになってしまうので、最終的に背景画像としてタイトル画像を含む１枚の画像を配置することとしよう。画像の表示範囲を指定したdivに対して以下のようなスタイルを作成した。

ちなみにナビゲーションの文字要素とタイトル画像の文字色は同じだが、これは使用する背景色に黒を透過させるイメージで作っている。作り方はillustratorかphosohopのようなレイヤーに透明度の付けられるツールで黒の矩形を70％ほど透明化して、【図２】のように最終結果の色情報を抽出している。

さてこれでおおかたできあがってきた。最後はナビゲーションの位置を調整して終わりである。今回はdiv内で左と上部の余白を付け、位置調整とした。

 

 

 

素直に考えると行の先頭はタイトルにある「Webデザイン」の「W」に合わせるべきだが、「W」はぴったり左端に揃えた要素よりも必ず飛び出して見える。というわけで「W」の跡の行に配置する要素は前もってやや右寄り、つまり内側にちょっと食い込むような形で配置してやる。【図３】のように、ちゃんと揃って見えるようになるのだ。

今回は見栄えを重視してタイトルを画像化したわけだが、このことで起こるマイナス面には目を向けておかなければいけない。作例のようにいくら文書構造上見出しを与えておいたとしても、スタイルを適用している人から見ればh1の要素は隠れてしまう。となればブラウザにとって文字要素はないも同然。もちろん全文検索で抽出することはできない。作例のようにページの先頭にドーンと表示するタイトルなら検索される必要もないが、１ページに表示する情報量が多い場合、小見出しを画像化するのは考え物だ。フォントスタイルでメッセージ性を伝えることも大切だけれど、機能とのバランスにはいつも気を配るべきだろう。

次回は11月7日掲載です。お楽しみに!!