POINT3

Blueprint CSSを利用する

Blueprint CSSは、固定幅のレイアウトに適したCSSフレームワークだ。親要素の幅に対して1/2、1/3といった割合でカラムが生成されるYUI Grids CSSに比べて、「カラム何個分」といった形で指定を行うため、より精密なレイアウトを実現できる。また、フォームや印刷向けのCSSも提供されており、利用範囲が広い点も魅力だ。

導入にあたり配布元からソースをダウンロードし【1】、XHTMLの＜head＞にリンクの記述を行う【2】。＜body＞直下にはコンテナタグ（div.container）を用意し、その中に「.span-」で始まるclass属性を加えた＜div＞を定義する。ここで指定する数値がカラム数にあたる。デフォルトでは全体の幅950pxに対し、ひとつのカラムが幅30pxとなるため、行当たりのカラムの合計数が「24」になるように調整しよう。それぞれのカラムには共通で10pxの右マージンが定義されていることから、いちばん右側にあたる＜div＞のみ「.last」が必須となる【3】。


【1】配布元（blueprintcss.org/）にあるアイコンをクリックするとダウンロードできる


【2】ソースに含まれる印刷用（print.css）とIE用（ie.css）のファイルもリンクさせておこう


【3】ネストする場合は、合計値が親要素のカラム数と同じになるように調整すればよい


このとき、「.border」または「.colborder」を加えることで、カラムの右側にボーダーを表示できる【4】。「.colborder」の場合は要素の右側に1カラム分の余白が生じるため、行当たりのカラムの合計数が「親要素のカラム数-1」となる点に注意しよう【5】。さらに、「.prepend-n」と「.pull-n」または「.append-n」と「.push-n」（class名末尾のnは、いずれもカラム数を表す任意の整数値）を組み合わせることで、指定された要素の左右いずれかに余白を設け、画像などが突き出したような表現が可能だ【6】。


【4】任意の要素にclass名を追加するだけで、区切り線の表現が可能だ


【5】.colborderでは1カラム分のスペースが生じるため、カラム数の調整が必要だ


【6】div.append-1とimg.push-1で左右対称にすることもできる


細かい指定には多少慣れが必要となるが、Blueprint CSS向けのチートシートを参考にカスタマイズしていこう【7】。また、＜hr＞タグで1pxのボーダーが表示される。スタイル定義に「clear: both」が含まれるため、新しい行に切り替える際にも有効だ。なお、hr.spaceとすることで1行分の空白を挿入することもできる。親要素の背景色を白以外にする場合は、このスタイルに微調整を加えよう【8】。


【7】定義済みのスタイル一覧はチートシート（digitart.net/blueprintcss/bluebrintcss.pdf）で確認しよう


【8】ソース内のhr要素に関する定義内容。backgroundとcolorプロパティを上書きすることで、任意の色に変更できる


デフォルトで定義されたコンテナタグやカラムのサイズは、Blueprint Grid CSS Generatorを利用することで任意の大きさに変更できる【9】。ページ内のフォームで新しい設定を行い、生成された「Compressed.css」タブの内容を保存して「/blueprint/screen.css」の代わりに利用しよう。Grid.pngタブをクリックすると、「.showgrid」向けの背景画像を入手することも可能だ【10】。


【9】「Blueprint Grid CSS Generator」（kematzy.com/blueprint-generator/）の設定例。Total Page Widthに赤字が表示される場合は、その値をDesired Page Widthに入力しよう


【10】この内容でブラウザに表示したものをキャプチャすれば、Photoshop向けのテンプレートを簡単に用意できる


なお、ここで生成されるコードの中でdiv.colborderの右マージンと右余白のプロパティ値だけが正しく計算されないようだ。そのため、「（Column Width＋Margin Width×2）／2」で求められるpx値を指定しておこう【11】。


【11】右ボーダーがあるため、マージンまたは余白いずれかの数値を「－1px」とする



INDEX
POINT1　CSSフレームワークとは
POINT2　YUI Grids CSSを利用する
POINT4　オンラインサービスによるカスタマイズ