第14回　文字のレイアウト工夫に挑戦

Webサイトの主役は文字である。インターフェースの使い勝手が重視されるEコマースサイトであろうと、動画の視聴サイトであろうと、サイトを開設した理由や商品の説明をする際は、必ず言葉が使われているではないか。だからサイトで文字がどう見えるか、もっと言えば言葉がどう伝わっているかは常に深く考えるに越したことはない。今回からはCSSでどこまで文字のレイアウトに工夫を凝らせるかに挑戦してみたい。

クラフトワークの手触り感をテーマに文字を表現する。問題は、リアルなノート用紙を模写できるかどうか。これは配色の妙にかかっている。ポイントは１つ。紙の上に書き込んだ（印刷した）要素は、必ず背景色の影響を受けるという物理現象を忠実に再現することである。

 

 

HTMLに難しい箇所は特にない。ノート用紙として見せる範囲をid付きのdivで指定する。spanはノートの罫線を、文字のあるところだけに表示させる目的で使う。pタグなどブロックレベル要素に対する指定では、文字ブロック全体の下線になってしまうが、インライン要素（テキストや画像など個々の要素のこと）に対するスタイル指定方法のspanなら、行ごとに線が付けられる。

CSSもとても単純だ。ノート用紙の表示範囲をピクセル指定した後、用紙まわりの余白、文字要素に内接する余白を確保する。用紙の背景色と文字の種類とサイズ、文字色もここで指定する。用紙の色は白でなく、グレーがった生成り色。つまり明度が高く、彩度を抑え気味に設定した黄色を使っている。周囲の罫線は同じ色から明度をほんの少し下げて設定した色を使う。

PCで再現する白（#ffffff）ほど真っ白な用紙は、現実の世界に存在しない。もしあるとしても、その色は人間の目にとって微妙に青みがかってみえるはずである。特に罫線付きのノートの場合、灰色がかった模造紙風の用紙を使っているものも少なくない。ここではそんな紙を意識して再現することにした。また、文字の色をグレーに指定したのは、背景色とのコントラストを下げて全体のまとまりを出しつつ、薄い鉛筆で書いたような印象を与えるため。グレーは周囲の色の影響を受けやすいので、あたかも背景色が透けて見えた結果のように見える。ちょうど弱い筆圧で鉛筆書きしたような感じが出るだろうか。

 

罫線はspanのclassとして指定した。テキストの下部に指定した破線のボーダーがノートの線になる。ここでも色使いには注意が必要だ。文字と背景のコントラストと同様、この色もトーンを抑え気味にして全体と馴染ませたほうが良い。そうすることで文字同様、背景色の影響力を保持させ、罫線がちゃんと紙の上にプリントされていると感じられることをねらう。

また、罫線が入ることを計算に入れ、行間はやや広めに取っている。行間指定だけでは、罫線に対してかなり下付の文字に見えるため、文字の下部に余白を設定して罫線間の中央に文字が配置するようにした。

これでおしまいである。とても単純だが、最後に同じことをしつつも配色に工夫しなかった例をみていただきたい。白い紙に青い罫線を引いてノートっぽくする。という方向性は一緒だが、白や青という色をカラーパレットから適当に選んだ「#ffffff」や「#0000FF」で表現している。見た感じ目的を達しているようにも思えるが、リアルさに欠けることからこの表現を採用する必然性がないようにも感じられる。なんかちょっとへん、とか、思ったようでない、というありがちな状態のほとんどが配色の失敗にあるということがよく分かる例だ。

なんだか穏やかじゃない呼び名だが、ハックの持つ「裏ワザ」的な意味を継承して付いたと思われる。CSSのバグを利用しつつ、レンダリングの品質を一定に保とうという工夫のことである。ブラウザによって解釈が異なるため、見栄えが変わる事態は今のところ避けられない。以前はブラウザごとにCSSを用意してJavaScriptで読み分けるなど対策をこうじていたが、今はハックだけで済ませる場合も少なくない。本作例にも*htmlというIE6以外は解釈できない、おかしなセレクタを入れることで、IE6にだけこっそり違う行間と余白指定をお伝えしている。ところがこのハック、「便利だけどCSSの記述方法としては標準的ではないのでやめたほうがいいよ」とIEの開発チームが昨年から呼びかけているのだが……。

 

 

IE開発チームの呼びかけ
http://blogs.msdn.com/ie/archive/2005/10/12/480242.aspx