Blueprintcss Tutorial 和訳

CSS BlueprintCSS WEB制作

まだ日本語のドキュメントがないみたいなので、Tutorial - Blueprintcss - Google Code を日本語に翻訳してみます。

チュートリアル

さあ Blueprint の使い方を解説しましょう。
このチュートリアル以外に、Blueflavor によるチュートリアル（BlueprintCSS 101）もいいですよ。

インストール

Blueprint は、あなたのサイトの CSS ディレクトリに置く必要があります。それを済ませた後、以下の２行をあなたのページのヘッダー内に書き加えてください。href に正しいパスが指定されていることを確認してください。

<link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print">    
<!--[if IE]><link rel="stylesheet" href="css/blueprint/lib/ie.css" type="text/css" media="screen, projection"><![endif]-->

さあ、これで BP（Blueprint） が使えるようになりました。

Blueprint のファイル構成

このフレームワークには内容をよく見ておいた方がいいファイルがいくつか含まれています。大部分のファイルはかなり詳細な注釈付きなので、内容をつかむのは難しくないでしょう。

  • screen.css　このフレームワークのメインファイル。lib ディレクトリに入っているほかの CSS ファイルをインポートしているので、全てのページで読み込む必要があります。
  • print.css　通常の印刷画面より見栄えがよくなるように、いくつかデフォルトの印刷規則をセットします。
  • lib/grid.css　grid をセットアップするファイルです。グリッドベースのレイアウトをする際に使う様々なクラスを定義しています。
  • lib/typography.css　いくつかのデフォルトタイポグラフィをセットします。面白いものもいくつか入っているのでぜひチェックしてみてください。
  • lib/reset.css　ブラウザのデフォルト CSS をリセットするためのものです。
  • lib/button.css　素敵な CSS/HTML ボタン用にバンドルされたパッケージです。
  • lib/compressed.css　lib 内の全ての CSS ファイルをまとめて圧縮したバージョンで、実際にサイトを公開する際にはこれを使います。詳しくは screen.css を見てください。

このほかに、グリッドやベースラインを見たい場合に背景として使うことができるイメージもいくつかあります。詳細は screen.css を見てください。

Blueprint を使う

BP の最良の使い方を知るには、ダウンロードファイルにバンドルされている CSS ファイルの中のコメントや example ページのソースコードを見てもらうのが一番ですが、いくつかの基本事項をここで解説します：

タイポグラフィー

typography.css はいじらなくていいです。放り込むだけでデフォルトでカッコいいテキストスタイルになります。

typography.css はまた、18px のベースライン（行の高さ）を設定します。これは行の高さから画像の大きさまで、全ての高さを 18px の倍数にしなくてはならないことを意味します。これは面倒臭いように感じるかも知れませんが、結果は素晴らしい見栄えになります。ベースラインの使用に関して、詳しくは A List Apart のこの記事を見てください。

Print.css にはあなたのサイトのドメイン名を指定できるオプション項目があって、これを使うと印刷のテキストリンクの後に相対リンクが括弧で表示されるようになります。ドメイン名を記入しないままでは、リモート URL だけがきちんと動作します。

グリッド

デフォルトでは、幅 30px、間隔 10px の 24 コラム（列）で、全幅 950px という設定になっています。
コラムの数を増やしたり減らしたりしたい場合は、以下の計算式を使って幅を計算してください：

全幅 = (コラム数 * 40) - 10

まず初めにしなければならないのは、グリッドを囲むコンテナーをつくることです：

<div class="container">
        <p>Here's my site!</p>
</div>

それから、div タグに "column" などのクラスを割り当てて見え方を指定してやります。以下にいくつか例を載せておきます：

<div class="container">
        <div class="column span-24">
                Header
        </div>
        <div class="column span-4">
                Left sidebar
        </div>
        <div class="column span-16">
                Main content
        </div>
        <div class="column span-4 last">
                Right sidebar
        </div>  
</div>

ここで "last" というクラスに注目してください。コンテナーや上位のコラムに含まれるコラムのうち、最後のコラムには必ずこの "last" クラスを指定しなければなりません。

繰り返しになりますが、いったんわかってしまえばとても簡単です。とりあえず "last" クラスだけ覚えておけば大丈夫でしょう。

しかし、Grid.css はこれよりもっといろんなことができます。先頭や最後に空のコラムを付加することもできますし、コラムを横断して画像を押し出したり引っ込めたりすることもできます。また、コラムの間に境界線を加えたり、複数のコンテナーを使ってほとんどどんなレイアウトでもつくり出すことができます。詳細は grid.css や example ページの中のコメントをチェックしてください。



訳者による追記：

デフォルトのグリッド設定を変更したい場合にとても便利なのが、Blueprint Grid CSS Generator です。これについては、チュートリアルのはじめのところでも触れられている Blueflavor によるチュートリアル（BlueprintCSS 101）でも紹介されています。

ということで、この Blueflavor によるチュートリアルもついでに翻訳しておきます。
Blueflavor: BlueprintCSS 101 和訳