CSS+JavaScriptで画像に柔軟なレイアウトを作る。（日本語訳）

著者: Aaron Gustafson
件名: If I Told You You Had a Beautiful Figure...
日付: 2007年9月25日
URL: http://www.alistapart.com/articles/figurehandler
訳者: Arata Kojima
その他: Translated with the permission of A List Apart Magazine and the author[s].

If I Told You You Had a Beautiful Figure...

率直に言って、画像というのは本当にイライラさせる。OK、ところで、たぶん画像自体が問題なのではない。しかし、画像をデザインの中でかちっとレイアウトするのは難しい。画像を使って、うまくコンテンツの意味を訪問者に知らせたいときは、特にそうだ。
もちろん、ちゃんと設計されたグリッドレイアウトが崩れないように、クライアントに画像の幅を明示するための書類の山を作ることもできる。しかし、たとえクライアントにそのガイドラインを守るように強調したとしても、何かしらの間違いが起こる可能性がある。その1つは、悪意のない不幸な災難だ。238px と打ち込むところを、283pxと間違えてしまう、するとあなたのレイアウトはだめになってしまう。
もちろん、あなたはCMS（適切な画像にするためのライブラリがインストールされたもの）を使うこともできる。しかし、もしCMSとかそういったライブラリを使えないとしたら、画像をガイドラインに合わせ、恐る恐るピクセル単位でリサイズしないとならないのだろうか。
それをDOM scriptingが救ってくれる！
こういったややこしい問題を解決する時に、僕たちのWebページでどんな画像をレイアウトする時にも、短くて賢いJavaScriptが大きな役に立つだろう。
注意：コンテンツに関係する画像とデザインに関係する画像を区別するために、私はこれ以降前者を「図表」と書くようにしている。私が「画像」と使う場合は、img要素に関係するファイル名だと思ってくれて構わない。

さっぱりとした図表

scriptの話をする前に、図表をマークアップするためのちゃんとしたパターンを用意しよう。その1つとして、どんな環境でもうまい具合に動かすために、十分な柔軟性を持っているもの。画像に対して可能性を持ったmicroformatをいくつか使って、こんな感じで作ってみた。

<div class="figure">
  <img src="fa.jpg" alt="" />
  <p class="credit"><abbr class="type" title="Photograph">Photo</abbr> by <cite>Aaron Gustafson</cite></p>
  <p class="caption"><em class="title">Figure 1</em> The &#8220;Faces of the Fallen&#8221; exhibit at Arlington National Cemetery.</p>
</div>

このサンプルのマークアップは画像そのものを表示すると共に、いくつかの選択できるデータも提供している。

タイトル
タイプ（写真、イラストなど）
キャプション
クレジット、もしくは署名

これらのデータで、Webで使われている90％くらいの図表をカバーできる。そして、自分が使いたいデータを使うための十分にフレキシブルなマークアップパターンも作れる。

<div class="figure">
  <img src="faces-of-the-fallen.jpg" alt="The &#8220;Faces of the Fallen&#8221; exhibit at Arlington National emetery." />
</div>

もちろん、いくつかの段階を踏まえてマークアップし、microformatのrel="license"やhcard、geo-positioning dataも埋め込むことができる。しかし、好みによっては、画像そのものよりも、longdesc属性を使うこともできる。

魅力的な図表

マークアップと共に、これはデフォルトスタイルについても考えるきっかけとなる。どのみち、JavaScriptが使えても使えなくてもレイアウトするようなものを必要とする。その目的のために、次のようなものを指定しておけばうまくいく。

.figure {
  margin: 0 0 1.5em;
}
.figure p {
  margin: 0;
}
.figure .credit {
  font-size: .8em;
  text-align: right;
}
.figure .credit cite {
  font-style: inherit;
}
.figure .caption {
  font-style: italic;
  font-size: 1.1em;
}
.figure .title {
  font-style: normal;
  font-weight: bold;
}
.figure .title:after {
  content: ":";
}

このマークアップを指定すると、Figure 1のようなものになるだろう。（body要素などに指定しているスタイルも継承するわけだけど。）

図表のスクリーンショットの例。デフォルトスタイルと共に、キャプションが描かれる。
図表を左や右にfloatするためにどんなCSSも使っていないことを、たぶん気が付いただろう。私は、マークアップにおいて表現に関係する情報を含めてはならないと思っている。（少なくともデフォルトでは）それに、これはmicoformatのページの“existing practices”の画像の事例でも骨格の主張となっている。
かちっとしたデザインを制作するということにおいて、画像はその幅によってレイアウトされるということだけに意味がある。例えば、カラムの50％以上の幅を取るような図表の場合はfloatされるべきではないだろう。そんな図表の周りにテキストが回りこんでしまうようなものは変だ。同じような意味で、テキストの左側のカラムの半分を占めてしまうような幅の図表も、あなたはほしくはないだろう。
私たちのようなデザイナーはこういったことを知っているが、ほかの人たちも同じように知っている（もしくは気にする）と期待するべきではない。実際のところ、図表をどこにレイアウトするのかを決定する時に、デザイナーではない人たちにその決定権をあげるのは避けるべきだ。それはデザイナーの仕事なのだ。図表をレイアウトするためにいくつのカラムが必要なのか、そんなことでデザイナーではない人たちを悩ませる必要性は全くない。もしあなたがそんなことをすれば、この3つのうちの1つは起こるだろう。

その人ははあなたの説明に従い、適切な判断をする。
その人は間違ったclass属性を与える。
その人は画像分類を完全に無視する。

しかし、3つのうちの1つでも、あなたのデザインに何かしらの結果をもたらすだろう。私はギャンブラーではない。だから私はこんな賭けが好きではない。ありがたいことに、カラムに関係する画像の幅を計算するタスクは、JavaScriptにとっては平凡なタスクの1つだ。だから、ほかの人たちが画像のサイズを合わせ、デザインをちゃんと維持できるようにするのに四苦八苦するのを、script（FigureHandler）を使うことによって、私たちは解放することができるのだ。

柔軟な図表

FigureHandlerはあなたのサイトにおける図表のレイアウトを非常に簡単にするものだ。それはあなたの仕事で使えば、役立つデフォルトスタイルのセットだ。しかし、それはまた簡単に細かいカスタマイズも行うことができる。

表1: FigureHandlerのデフォルトクラス
カラムのパーセント	適用されるクラス
カラムのパーセント	適用されるクラス
0-25	quarter-col
25-34	third-col
34-50	half-col
50-67	two-thirds-col
67-75	three-quarters-col
75-100	full-col

もしあなたがデフォルトのまま動かしたいのであれば、FigureHandler.jsを読み込ませ（Prototypeも必要とする。FigureHandlerがベースにしているので）、そしてこのように、新しいFigureHandlerを作る。

if( typeof( Prototype ) != 'undefined' &&
    typeof( FigureHandler ) != 'undefined' ){
  Event.observe( window, 'load', function(){
    new FigureHandler; } );
}

FigureHandlerはこのときに、

div要素に「figure」と名付けられたものを探すために、ページをパースする
そのfigureの中の図表の幅と全体のカラムの幅（図表の親ノードと仮定）を比較する
画像の幅に応じたカラムのパーセンテージに一致する図表にclass属性を適用する。

おまけもあって、FigureHandlerはその画像の幅に合う図表と段落の幅も調節することができる。だから、テキストと画像をちゃんと整列させないと、なんてことを考える必要はない。

図表のスクリーンショットの例。FigureHandlerが動作したあとに、キャプションが描かれる。
それぞれに分類された図表に独自のカスタマイズしたスタイルを作ることもできる。私がやってみたものはこれだ。もしもっと精度の高い制御をしたいのであれば、FigureHandlerをもっと自分好みにカスタマイズすればよい。id指定された要素にidを付加するようなサンプルはこんなものだ。

if( typeof( Prototype ) != 'undefined' &&
    typeof( FigureHandler ) != 'undefined' ){
  Event.observe( window, 'load', function(){
    new FigureHandler( 'main' ); } );
}

また、 FigureHandlerにJSONオブジェクトを与えることによって、自分でカスタマイズしたclass属性に適用することもできる。（これがそのサンプル）

if( typeof( Prototype ) != 'undefined' &&
    typeof( FigureHandler ) != 'undefined' ){
  Event.observe( window, 'load', function(){
    new FigureHandler( 'main', { '0-27':   'small',
                                 '27-100': 'large' } );
    new FigureHandler( 'extras', { '0-50':   'potato',
                                   '50-100': 'tomato' } );
  });

Go figure

FigureHandlerはデザイナーに多くの可能性を開いたと同時に、図表をレイアウトする頭痛の種から解放し、きっちりとしたデザインを作れるようになるだろう。これはまた段階的な進化をしているし、公式のmicroformatになるものを構築できることになるかもしれない。手短に言えば、FigureHandlerは今からだということだ。あなた自身でいろいろとやってみて、画像があなたのデザインをふみにじる心配は二度となくなることだろう。

訳者より一言

JavaScript系のライブラリの紹介記事です。普段、このブログではあまりライブラリの紹介などは行わないようにしているのですが、このCSSとJSの使い分け方が参考になるなと思い、訳させていただきました。
すぐにお気付きになるかもしれませんが、まずきっちりと(X)HTML+CSS(+microfomats)でコンテンツを書いて、もちろんアクセシビリティもちゃんとしておく。その上で、コンテンツ更新の担当者なども使いやすくするために（＝ユーザビリティも高くするために）、JavaScriptを併用する。JavaScriptが使えなくてもコンテンツは読めるので、あくまでもう一歩上のWebデザインを行うために、JavaScriptを活用するというのが素敵だなと思います。
なんでもかんでも無理やりCSSでやるのではなく、言語間の使い分けをするのは当たり前ながら大事なことだと思い直しました。その上で、FigureHandlerの発想も面白いので、今後の発展が期待できます。