Archive for 2007 年 12 月 19 日

CSSのフレームワーク「blueprintcss」というものがあるそうです。

Blueprint CSS（GoogleCode）
blueprintcss – Google Code

国内では殆ど取り上げられてないのが現状なんですかね・・・？

国内で取り上げているサイト

ブラウザ対応が完璧じゃないとは言っていますが、主要ブラウザのIE（6.xと7系）、Firefox、Safariに対応していれば問題ないかと。

このオープンソースはなんぞやと申しますと、CSSをもっと構造化して一定のルールに従って使えばブラウザ依存等々考える事無くページの作成できる
というものです。
私も今から使ってみないとなんともいえないので、ドキュメントを読もう。

とりあえずGoogleCodeに書いてあるチュートリアルの日本語訳を作ってみましょう。
（注：私は英語が出来ません。フィーリング訳です・・・誰か英語出来る方、修正コメントあればお願いします；；）

Tutorial
Here’s a quick tutorial on how you start using Blueprint.

In addition to the tutorial below, this tutorial by Blueflavor gives you a good intro to Blueprint.

まぁここは特に訳さなくても。簡単なBlueprintを使うためのチュートリアルってことで。
で、このチュートリアルに加えてBlueflaverのチュートリアルはもっと良いでしょう。

Installation

Blueprint should be put in your site’s CSS directory. After you’ve done that, add these two lines to the of your pages. Remember to make sure the href path is correct:

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

BP is now ready for consumption.

インストール。
BlueprintをCSSディレクトリに入れてください。それで終わり。あとは2行のコードをタグの間に書いてください。
Blueprintはこれで消費の準備が整いました？？

ま、2行書けば良いって事ですね。うん。

Blueprintファイル構成

typography
typography.cssはカスタマイズの必要が無い。投げ込むだけで良いテキストスタイルを提供できる。
typography.cssは行の高さ（base-line)が18pxに設定してあります。これは全て18の倍数でイメージサイズや高さを設定しているという意味です。
これは使いにくいように思えますが、見た目の結果は素晴らしいです。基本の(baseline）に関してはA List Apartを見てください。

Grid
基本は幅950px、24のカラムが30pxごとに並んでいて、カラム間は10pxのマージンを設けてあります。

っていうことは、24*30px + 23*10px =950px。おぉなるほど。

もっと行が必要な場合は別途計算をしろということで。
でも計算しなくてもこのBlueprint Grid CSS Generatorを使えば簡単に作れそうですね！

使い方

まず最初はDivタグでContainerを作る。

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

で、ColumnをDivのクラスタグにつけると動作が見えますよと・・・。

<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」をつけること。他のカラムがこれを見ているそうで。

で、Blueprintのこのカラム構造は入れ子状態でも反応をするらしいです。
ためしに入れ子をしたのがこれ。

<div class="container">
        <div class="column span-24">
                Header
        </div>
        <div class="column span-4">
                Left sidebar
        </div>

        <div class="column span-16">
                <div class="column span-8">
                        Box1
                </div>
                <div class="column span-4">
                        Box2
                </div>
                <div class="column span-4 last">
                        Box3
                </div>
                <div class="column span-16 first last">
                        Main content
                </div>
        </div>

        <div class="column span-4 last">
                Right sidebar
        </div>
        <div class="column span-24">
                Footer
        </div>
</div>

あとはたくましく生きろという事ですか・・・。grid.cssでも見てみるなりどうぞ。って書いてある。

もう雑記状態ですね・・・すんません。

あとで詳しく図を入れて書いてみたいし、テストも作ってみたいと思います。

SEの生活が分かるすごろく登場 – ITmedia エンタープライズ

こんなの出たらしいですよー。

WEBベンチャー系のシステムエンジニアの双六とかもっと面白そうだな・・・ｗ

「SEって言われて入社したら、PGとNE兼務だった　精神：-100」
「入社式終わった10秒後にはプログラムを作成していた　現場技術：+10」

「労働契約書通りの時間に終わらせてもらえない　体力：-30　精神：+10」

「裁量労働制といわれたが、死ぬまで働けという意味だった　体力：-100」

「買ってくれないので、自分の家からパーツを持ってくる　　アイテムカード没収」

考えたらきりが無いｗ

全部マイナスイベントなのはご愛嬌。

[tags]すごろく,SE,おもちゃ[/tags]