Blueflavor: BlueprintCSS 101 和訳
Blueprintcss Tutorial の和訳 に続いて、こちらも日本語に翻訳してみることにしました。
BlueprintCSS 初級講座
HTML と CSS を使って数多くのデザインをつくり出していると、毎度処理する問題の中にいつも決まった問題がいくつかあることに気がつくだろう。例えば、ブラウザーをリセットして白紙状態にする作業。それからデザインを配置していくためのレイアウトやベースライングリッドを設定する作業。まともな文字サイズと位置合わせ、間隔を決める作業も。ほかにもまだある。こういった事柄を前もって処理し、デザイナーたちが好きな本当に楽しい作業に取りかかれるとしたら便利じゃないだろうか？
Blue Flavor に入る前、私はカンザス州ローレンスに本拠地を持つニュースメディア企業、ワールド社で働いていた。その当時、私とデザイナーの Nathan Borror および Christian Metts は、CSS のためのフレームワークを考案した。それは、私たちがサイトを作る度に毎回繰り返すことになる作業を抽象化して、私たちの時間と創造的なエネルギーを各サイトに固有の面白い側面へと集中することができるようにしようというアイディアだった。私はそのアイディアについて記事を書いたが、私たちはそれをリリースすることはなかった。しかし、そのアイディアは Olav Bjorkoy によって、同じゴールを目指すオープンな CSS フレームワークである BlueprintCSS に取り込まれた。それがリリースされて以来、Olav やそのほかの協力者たちは Blueprint を進歩させ拡張し、私たちは Blue Flavor でそれを使って来た。そこで、私たちがどのようにそれを使い、それによってワークフローがどのように変わったか、また私たちがそれをどれほど気に入っているかについて、少し話してみることにした。
Blueprint は何をしてくれるのか？
Blueprint の主な機能は次の通りである：
1. ブラウザーのデフォルトスタイルを消し去る。
2. 気の利いたタイポグラフィをデフォルトとしてセットする（フォントファミリー、ヘッダーサイズ、段落スタイル、ベースライングリッド、ほかを含む）。すべて相対サイズで指定されるため、どのブラウザーでも文字の拡大縮小がきちんと機能する。
3. カスタマイズ可能なレイアウトグリッドを使用するための方法論を与える。どんなコラム数やページ幅のレイアウトであっても思うままに実現できる。
4. 気の利いた印刷用スタイルシートをデフォルトとしてセットする。
5. これら全てが、Internet Explorer 6 および 7 を含め、ビジターが使っているであろうほぼ全てのブラウザーでエレガントに機能する。
重要なことは、すべての要素が上書き可能だということだ。Blueprint は単独のスタイルシートとして設計されているのではなく、ベースとなるスタイルのセットとして設計されており、あなた方デザイナーがその上に自分自身のスタイルシートをかぶせたり、完全に書き換えてしまうこともできる。
こんな風に考えてみてほしい。CSS を使ってデザインをつくることがバケツ一杯の溶けたプラスチックを使ってつくることだとしたら、Blueprint をベースとして使うというのは LEGO ブロックのセットを使ってつくるようなものであり、しかも必要に応じて溶けたプラスチックを使うこともできるのだ。
グリッド
Blueprint の王冠を飾る宝石が、グリッド作成ツールだ。Blueprint の grids.css ファイルは、デフォルトでは全幅が 950pxで、30px 幅のコラムが 24 列、10px の間隔で配置されている。このグリッドはほとんどの場合に対応できる柔軟性を持っていると思われる。
しかし、グリッドは完全にカスタマイズが可能だ。コラムの数やトータルの幅を変えたい場合、Blueprint Grid CSS Generator を使うと便利だろう。このツールは置き換え用の grids.css ファイルを生成してくれるのみならず、開発中に背景画像として使うための grid.png 画像も生成してくれるので、すべての要素がきちんと整列されていることを確認するのにとても便利だ。これはサードパーティのツールではあるが、このフレームワークにとって重要なパーツである。これがなかったら、デザイナーに単一のレイアウトグリッドを使うことを強いることになり、Blueprint はデザイナーを縛り支配するものになってしまうが、これのおかげでデザイナーは無限の自由を与えられている。
BlueprintCSS をワークフローに組み込む
もしデザインの作成に Blueprint を使うつもりなら、Photoshop（やそのほかのデザインツール）を使って作業を始める前に決めた方がいい。Blueprint の HTML と CSS に後からデザインを合わせることも可能だが、最初からそのように計画した方がずっと簡単だ。
デザイナーは、自分の使いたいコラム数やコラム間隔、全幅にぴったり合わせるために前述のグリッドジェネレーターを使うだろう。そうして生成された grid.css ファイルを保存してから、フォトショップファイルにこのコラムの構造と同じガイドラインを設定すればいい。
Blue Flavor では、デザイナーと HTML/CSS の作成者が同じ人の場合もあればそうでない場合もある。デザイナーが完成したデザイン原稿を HTML/CSS の作成者にわたす際、grid.css も一緒にわたし、ガイドラインについても伝えるようにする。
ちょっとしたコツやノウハウ
Blueprint を使う場合、作業を始めて深い所に進んでしまう前に、CSS ファイルの全てに目を通し、それが何をやっていてどのように機能するのかを事前に把握しておくことがとても重要だ。それをしないと、 .border、.colborder、.box、.hide といった重要なクラスを見過ごすことになる。
また、全てのコラムに DIV 要素を使うようにという grid ドキュメンテーションの言葉に惑わされないように。.column クラスはどの要素にも適用できる。例えば、デフォルトのグリッドを使っているとして、ページの最上部にバーを描きたいとしよう。そのページには左側にロゴがあり、右側にはナビゲーションがあるとする。その場合、不必要な DIV 要素をつくらなくても、h1 と ul に class="column span-12" を適用できる。
行（"rows"）レイアウトをつくるためには複数のコンテナー DIV をつくる。ヘッダーにひとつ、コンテンツにひとつ、フッターにさらにもうひとつといった具合に。もっとつくってもいい。コンテナーはひとつしかつくれないと思い込まないように。
Blueprint CSS のすべてのファイルを使う必要はないことも覚えておいてほしい。例えば、グリッドベースのレイアウトを使わないのであれば、grid.css は必要ない。それでも reset.css や typography.css は有用かも知れない。
そして最後に、Blueprint のファイルは絶対に編集しないように！自分自身のスタイルシートをインクルードして Blueprint を上書きする方がはるかにうまいやり方だ。Blueprint の CSS ファイルに変更を加えてしまうと、フレームワークを最新版にアップデートすることが非常に難しくなる。自分の作業はフレームワークから切り離しておくように。
最後に
Blue Flavor では、Blueprint を使うことによって、デザイナーのデザイン原稿から HTML と CSS のテンプレートをつくる際の作業効率が高められることが証明された。ブラウザーによって表示に差が生じる問題のほとんどを解決してくれたおかげで、古いブラウザーや標準に準拠していないブラウザーでのデバッグ作業が減った。このフレームワークを習得し、よく理解するためには数時間を要するが、いったん習得してしまえばそれを利用することによる効率アップは目覚ましい。
HTML/CSS 開発の初期段階でのスピードアップ以外にも、開発者ごとの作業のやり方を統一することにも役立った。全員が同じフレームワークを用いているおかげで、ほかの人のコードをいじる必要があるときでも、内容をすぐに理解することができる。これも時間の節約になる。
結局のところ、HTML/CSS のコーディングに費やす時間が減れば減るほど、私たちはクライアントに対してよりよいサービスを提供できることになる。最終的に、クライアントが HTML や CSS のコーディングのために支払うお金は非常に小さな割合に過ぎなくなる。私たちがデザイン上の問題の解決やクライアントのブランディング、よりよいユーザー体験を提供するための戦略により多くの時間を使うことができれば、それは私たちにとってもクライアントにとってもよりよいことなのだから。
訳者による追記：
ちょっとしたコツやノウハウのところに、
全てのコラムに DIV 要素を使うようにという grid ドキュメンテーションの言葉に惑わされないように。.column クラスはどの要素にも適用できる。
とありますが、確かにその通りではあるものの、実際にはすべてのコラムに DIV 要素を使わないと、ブラウザー間の互換性が保たれない場合があります。例えば H1 要素や P 要素に .column クラスを適用してレイアウトをした場合、表示がおかしくなってしまうケースがありました。
そもそもこうしたことを避けたいがためにフレームワークを導入しているのですから、ドキュメント通りに全てのコラムを DIV で定義する方がよいと思われます。(^_^
