より優れた Web ページを組み立てるために

優れた設計の CSS フレームワークが時間を節約し、作業を軽減します

CSS (Cascading Style Sheets) フレームワークは、Web ページの設計、開発を効率化するとともに、単純化します。さらに CSS フレームワークで作成した Web ページは、すべてのブラウザーでより統一された結果をもたらします。この記事では、それぞれに独特な理念を持つ 2 つの CSS フレームワークを取り上げて検討します。

Martin Streicher, Freelance software developer, Pixel, Byte, and Comma

Photo of Martin StreicherMartin Streicher はフリーランスの Ruby on Rails 開発者であり、以前は Linux Magazine の編集責任者でした。彼は Purdue University でコンピューター・サイエンスの修士号を取得しており、1986年以来 UNIX ライクなシステムのプログラミングをしてきました。彼は美術品やおもちゃを収集しています。


developerWorks 貢献著者レベル

2009年 6月 23日

建築家の Frank Lloyd Wright (フランク・ロイド・ライト) は 1950年頃、原型的な L 字型のユーソニアン (Usonian) 住宅を多数建築した後に Usonian Automatic を発表しました。これは、プレハブ部品と単純な手法によって、専門家でない人でも新しい家の構造の大半を組み立てることを可能にする革新的なシステムです。ライトにとって、Usonian Automatic 住宅はこれまでの住宅供給のあり方を変える、価格も手頃な目的志向の魅力的な住宅でした。

ライトのシステムの中核となっていたのは、標準化された 4x12x24 インチのコンクリート製またはガラス製のブロックであり、このブロックには 4 インチ幅の天面、底面、および両側面の 4 面に窪みがあります。このシステムで、例えば壁を作るには、3 つのステップを踏むことになります。まず、ガイドやモルタルを使わずにブロックを積み重ねます。次に、横軸と縦軸となる鉄筋をブロックの間の窪みに挿入して骨組を作ります。最後に、窪みによってブロックの間にできた隙間にモルタルをポンプで注入するか流し込むことで、鉄筋が埋め込まれるようにし、ブロックを接合し、構造を固めます。このように、土台作りに限らず作業の大半は自分で家を建てようと決心した誰もが行うことができました。

ライトにとっては非常に残念なことに、Usonian Automatic システムは賢いシステムではあるものの、実際には実現困難で費用がかかることが明らかになりました。そのためライトの目標とは裏腹に、多くの住宅所有者は専門の下請け業者に建築を頼む結果となります。それでもなお、ライトのシステムは住宅を建築するための基礎 (材料、手法、そして理念) を丸ごと提供することによって、快適な住宅を所有する際の経済的な側面を変革するという価値のある試みであったことは確かです。Usonian Automatic はまさに、文字通りのフレームワークでした。

ソフトウェア開発フレームワーク

ソフトウェア開発でもまた、フレームワークからメリットを得ることができます。Usonian Automatic と同じく、ソフトウェア・フレームワークはコードの作成を単純化してくれることから、開発者はアセンブリーよりもソフトウェアの目的そのものに作業の重点を置くことができます。

その一例が、企業のアプリケーション開発の手法を具現化するためのツール、クラス・ライブラリー、技術、そして理念を提供する Apple® の有名な Cocoa フレームワークです。Cocoa を採用することによって、Mac 開発者はクリックホイールに関するコードを一から作成する代わりに、独特で、価値があり、売り物になる機能に時間を費やすことができます。

Cocoa の他にも、多数のソフトウェア・フレームワークが普及しています。例えば Zend はその名前を冠した PHP 開発用フレームワーク、Zend Framework を用意しています。Django、Rails、Catalyst はそれぞれ Python、Ruby、Perl アプリケーションを対象としたモデル・ビュー・コントローラー (MVC) ベースのフレームワークです。また、Nokia の Qt は、Mac OS® X、Linux®、Microsoft® Windows® をはじめとするプラットフォーム間共通のフレームワークで、グラフィカル・アプリケーションの開発に使用することができます。

実際、ソフトウェア開発のほとんどすべての側面で、少なくとも 1 つのフレームワークを利用できるようになっています。このことはどのプログラミング技術にも言えることですが、特にその第 2 世代以降に当てはまります。その技術の初期に試行錯誤することで改善されたプラクティスや、試行錯誤の結果に基づき考案された内容が、次世代のフレームワークに取り込まれていくからです。

Django と Rails から明らかなように、サーバー・サイドの Web 開発は、試行錯誤のなかで確実に成長を遂げました。これは、ブラウザー中心のアプリケーション開発にしても同じことです。ブラウザー・ベースのアプリケーションを対象にしたリッチな JavaScript フレームワークには、SproutCore があります。また、Flex と Silverlight はそれぞれに完全なアプリケーション・スタックを提供します。

けれども奇妙なことに、オンラインを対象にした作業には欠かせない基本的なタスク、Web ページの作成については対応が遅れています。あるいは、対応が遅れていた、と過去形で言ったほうがよいかもしれません。この 2 年ほどの間に出現した数多くの Web ページ・フレームワークによって、HTML (Hypertext Markup Language) および CSS の作成が、より簡単で、より効率的になり、さらには気まぐれなことで悪名高いブラウザーで表示される内容も、より予測可能なもの (さらには標準化されたもの) になっています。

この記事では、Web ページの作成を対象とする 2 つのフレームワーク、Blueprint と YUI (Yahoo!® User Interface) Grids を取り上げます。どちらのフレームワークも、それぞれ進歩的な MIT (Massachusetts Institute of Technology) ライセンス、Berkeley Software Distribution (BSD) ライセンスの条件に従って、無料で使用および変更することができます。この記事ではそれぞれのフレームワークの新規性と機能を探り、一連のサンプルでひと通りの作業を行います。この記事を読んで、ご自分に最適なフレームワークを選んでください。


Blueprint の紹介

HTML は標準であり、スタイルではなく構造を記述することから、Blueprint フレームワークは完全に CSS として認識されています。Blueprint を使用するには、Blueprint を念頭に置いて Web サイトを設計し、それから Blueprint の CSS スタイルを HTML 要素に付加して HTML を通常通りに作成または生成します。事実、Blueprint はパッケージで CSS を提供するため、Photoshop などのグラフィック・デザイン・プログラムを使用して最終的なページをエミュレートしなくても、HTML で Web ページを設計することができます。プロトタイプが最終的な本番サイトと同じコードを使用することから、ある意味、Blueprint は見た通りのものが結果となる、真の WYSIWYG (What You See Is What You Get) による Web ページの作成手段となります。

さらに、Blueprint は出力ページの外観をそのまま反映するように設計されているため、Blueprint との対話による設計作業は、まるで QuarkXPress や Adobe InDesign を操作しているような感覚です。Blueprint のスタイルは、ピクセル数と 18 ピクセルのベースライン・グリッドに基づきます。Blueprint でプロ級の外観のページを作成する上で、大量に作業をする必要はなく、またデザインの才能も必要ありません。

Blueprint に揃った約 250 の CSS スタイルは、表 1 に説明する 3 つの機能グループに分類されます。

表 1. Blueprint の CSS スタイル・カテゴリー
カテゴリー説明
リセットパディング、マージン、文字スタイルなどの特性に対するブラウザーの設定をすべてクリアします。リセットとは白紙の状態だと考えてください。つまり、目にするスタイルと効果は、Blueprint またはユーザーが明示的に定義したスタイルと効果だけとなります。
リスト 1 は、Blueprint のリセット用 CSS コードです。
グリッド最上位のコンテナー、各種の固定列幅、そしてその他多くの修飾子 (個々の列の左右への移動、境界線の追加、魅力的なフォームの作成などを行うための修飾子) を定義します。グリッド・スタイルのうちの 1 つでは、設計とデバッグを容易するために基礎となる列に色まで付いています。ほとんどの Blueprint のスタイルは CSS クラスとして実装されるため、1 つ以上のクラスを HTML 要素に割り当てることで、効果を上手く組み合わせることができます。
タイポグラフィーページ上のフォントの外観を制御します。HTML のフォントの要素は ems で定義されるため、フォントのサイズが変更されたとしても、ページの外観が統一感やまとまりを失うことはありません。また、タイポグラフィー・スタイルの CSS はすべての要素の縦揃えを baseline に設定するため (リスト 1 に記載する CSS コードの最後の行)、ネストの深さに関わらず、すべてのボックス内のフォントが一直線に揃います。
リスト 1. Blueprint のリセット用 CSS コード
margin: 0;
padding: 0;
border: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;

図 1 は、Blueprint で作成できるページの一例です。このページには、オンラインでアクセスすることができます (「参考文献」を参照)。

図 1. Blueprint でスタイル設定した HTML ページの例
Blueprint でスタイル設定した HTML ページの例

図 2 は、フォントのサイズがかなり大きくなっていますが上記と同じページです。寸法はピクセル単位で指定されるため、グリッドはまったく変わっていません。

図 2. 図 1 と同じ HTML ページをブラウザーの設定でフォント・サイズを大きくした場合
図 1 と同じ HTML ページをブラウザーの設定でフォント・サイズを大きくした場合

Blueprint のデフォルト・グリッドは 950 ピクセルの幅で、10 ピクセルのガターによって 30 ピクセルの列、24 列に区分されています。つまり、(24 列×30 ピクセル/列) + (23 ガター×10 ピクセル/ガター) = 950 ピクセルという計算です。これよりも広い幅または狭い幅のグリッド、あるいは別の列幅にしたい場合、あるいはそうする必要がある場合には、Blueprint に用意された Ruby ツールで、ユーザーの仕様に従った Blueprint を再生成することができます。この Ruby ツールは、例えば Photoshop で参照するために使用できるグリッドの画像も作成します。また、最終的な CSS はファイル・サイズを最小限にするために「縮小」(圧縮) されるので、転送時間と帯域幅を節約することができます。

Blueprint で Web ページを作成する

Blueprint の感触をつかんでもらうため、この記事では図 1 に示したサンプル・ページの一部を再現します。

最初のステップは、Blueprint の CSS ファイルを HTML ページに組み込むことです (リスト 2 を参照)。この HTML のスニペットでは、Blueprint ファイルが Web ルートのサブディレクトリー css/blueprint に置かれていることを前提としています。

リスト 2. Blueprint の CSS ファイルを HTML ページに組み込む
<head>
<!--[if IE]>
<link media="screen" rel="stylesheet" type="text/css"
   href="css/blueprint/ie.css" />
<![endif]-->
<link media="screen" rel="stylesheet" type="text/css"
   href="css/blueprint/screen.css" />
<link  media="print" rel="stylesheet" type="text/css"
   href="css/blueprint/print.css" />
<link rel="stylesheet" type="text/css"
   href="css/custom.css" />
   ...
</head>

標準的な Blueprint ファイルは 3 つあります。これらのファイルについて、表 2 に説明します。

表 2. 標準的な Blueprint CSS ファイル
ファイル説明
ie.cssInternet Explorer をリセットするように特殊化されたコード
screen.css画面表示用のスタイルを保持するファイル
print.css印刷に適切な一連のデフォルト・スタイルを宣言するファイル

通常、上記の Blueprint CSS ファイルを編集することはありません。代わりに、別のファイルに独自のスタイルを定義し、必要に応じてそのファイルに Blueprint コードを上書きします。そのためのファイルが、上記のリスト 2 の最後にある css/custom.css です。このファイルを作成して、独自のコードの一部として維持管理します。

まず、すべての Blueprint ページは、まさに class="container" という名前のタグが付いた div に含まれていなければなりません。ページの基礎となるグリッドを表示する必要がある場合は、showgrid クラスを追加します (リスト 3 を参照)。

リスト 3. showgrid クラスを追加する
<body>
  <div class="container showgrid" style="height:500px;">
  </div><
/body>

図 3 に、デフォルトの Blueprint グリッドを示します。

図 3. デフォルトの Blueprint グリッド
デフォルトの Blueprint グリッド

Blueprint を使用して設計するときには、以下の単純な 2 つのルールに従ってください。

  1. グリッドに留意すること。
    Blueprint では、列の倍数に応じた多数のスタイルを事前定義しています。例えば .span-4 スタイルには、列間のガターを含め、4 列分の幅 (150 ピクセル) があります。このスタイルは、あらゆる類の HTML 要素 (例えば textarea など) を 4 列の幅にするために適用できます。当然、div には .span-4 を適用できますが、div.span-n (n は 1 から 24) は左寄せされており、ガターの幅 1 つ分の右のマージンがあることに注意してください。
  2. ベースラインに留意すること。
    Blueprint は、ページ全体で行の高さを 18 ピクセルに設定します。そのため画像、そしてテキストの類いはいずれも 18 ピクセルの倍数にする必要があります。

サンプルでの作業に話を戻すと (もう一度、図 1 を参照してください)、このページの最初のパラグラフと 2 番目のパラグラフは、alt クラスを使うことで簡単に実現することができます (リスト 4 を参照)。alt クラスは、custom.css に定義されたカスタム・スタイルです。

リスト 4. alt クラス
<h1>A simple sample page<
/h1>

<hr><h2 class="alt">This sample page demonstrates 
a tiny fraction of what you get with Blueprint.</h2>
<hr>

ページの次の部分には、3 つのテキスト・ボックスが並んでいます。この部分についても、Blueprint で事前定義されているスパンのいくつかがあれば難なく実現することができます。この様子をリスト 5 に示します。

リスト 5. Blueprint で事前定義されているスパン
<div class="span-7 colborder">
  <h6>Here's a box</h6>
  <p>Lorem ...</p>
</div>

<div class="span-8 colborder">
  <h6>And another box</h6>
  <p>Lorem ...</p>
</div>

<div class="span-7 last">
  <h6>This box is aligned with the sidebar</h6>
  <p>Lorem ...</p>
</div>
<hr>
<hr class="space">

前述のとおり、span-n というタグが付いた divn 個の列にまたがって左寄せされており、ガターの幅 1 つ分のマージンが右にあります。複数の列が連続している場合は、必ず最後の列に合わせて last スタイルを修正してください。意外なことに、last はそれに続く要素を強制クリアによって再配置することはしません。このスタイルは右のマージンを 0 に設定することで、span-n で 10 ピクセルにデフォルト設定されている右のマージンを上書きしているだけです。代わりに hr 要素が強制クリアを行い、後続の要素が重ならないようにします。hr class="space" は空白行を描画します。実質的には、ルールを見えないようにレンダリングする一方で、標準的な縦方向の空白スペースを描画します。

colborder スタイルは、左のボックスと中央のボックスの間に、さらに中央のボックスと右のボックスの間に、それぞれグレーの縦線を引きます。この線を引くために、この colborder スタイルでは右のパディングを 24 ピクセルに増やし、1 ピクセルの線を (列の中央に) 描画して、右のマージンを 25 ピクセルに広げます。Blueprint はピクセル数を基準とするため、グリッドに対して位置を揃えた状態を維持することが重要です。

コンテンツの次の行は前の行と似てはいますが、prepend-1 修飾子が設定されているため、最初の列がわずかにグリッドから離れています (リスト 6 を参照)。

リスト 6. prepend-1 修飾子
<div class="span-15 prepend-1 colborder">
  <p>
    <img src="test.jpg" class="top left" alt="test">Lorem ...
  </p>

  <blockquote>
    <p>Integer cursus ornare mauris. ...</p>
  </blockquote>
  ...

  <hr>
  <div class="span-7 colborder">
    <h6>This is a nested column</h6>
    <p>Lorem ipsum ...
  </p>
  </div>
  <div class="span-7 last">
    <h6>This is another nested column</h6>
    <p>Lorem ipsum ...</p>
  </div>
</div>

prepend-v スタイル (v は 1 から 23) は padding-left を使用して、v 個の列と v-1 個のガターに相当するピクセル数を先頭に追加します。

犬の画像の高さは 180 ピクセルです。この高さは 18 の倍数なので、画像の右側に表示されるテキストと画像の下に表示されるテキストは、指定されたベースラインに対して同じ距離が保たれます。

Blueprint が持つすべての芸当を調べるのに最善の方法は、screen.css ファイルを隅々まで読むことです。以下に、その主な内容とヒントを抜粋して紹介します。

  • hide スタイル・クラスは、display: none; を使用して要素を非表示にします。
  • added および removed スタイル・クラスは、Ajax (Asynchronous JavaScript + XML) アプリケーションにおいて、ページに追加された要素またはページから省かれた要素を強調表示するのにそれぞれ役立ちます。さらに、任意の要素の背景を黄色にする highlight というクラスもあります。
  • push-ipull-j を使用して、列を i 個の列分、右に移動したり、j 個の列分、左に移動したりすることができます。

この場合もやはり Blueprint の手法は独特です。この手法では一般に印刷デザインで見られるような厳格に管理されたグリッドが強制されますが、それは必ずしも欠点ではありません。この正確さによって、任意のブラウザーでサイトがどのように表示されるかを詳細に制御できるからです。

YUI Grids の紹介

Blueprint とは対照的に、YUI Grids は幅が固定されたページと流動的な幅のページ両方を対象とした CSS を提供するとともに、任意の深さでの列のネストを可能にします。さらに、列を自由に配置および移動できるため、ページ上のコンテンツの順序を CSS で素早く簡単に変更することができます。例えば CSS の変更 1 つで、ナビゲーションを左から右に移動することが可能です。その上、YUI Grids に Yahoo 独自の JavaScript ライブラリーを追加することで、対話性をもたせることもできます。YUI JavaScript ライブラリー自体についての詳細は別途参照してもらうことにして、この記事では JavaScript ライブラリーとは独立して機能する Grids のスタイルシートに焦点を絞ります。

YUI Grids は、多くの点で Blueprint に似ています。

  • 一連の予測可能なベースライン・スタイルで、ブラウザーの設定を白紙の状態に戻します。
  • タイポグラフィーのスタイルを定義します。
  • 大抵の Web アプリケーションに適した多数の定義済みページ・レイアウトを用意しています。

YUI Grids は、縦欄式のグリッド一式も定義しています。これらのグリッドをネストすることで、どんなに複雑なページでも作成することができます。

およそ 100 を数える YUI Grids の CSS スタイルは、表 3 に記述する 3 つのカテゴリーに分けられます。

表 3. YUI Grids の CSS スタイルのカテゴリー
カテゴリー説明
文書ページの幅を定義します。
テンプレートよく使われる多種多様な 2 列のページ・フォーマットを記述します。通常、一方の列の幅はもう一方の列よりも広くなっていて、主要なコンテンツ・エリアとナビゲーションの「レール」を提供します。テンプレート・スタイルには、2 列の順序を逆にしたバージョンもあります。
グリッド複数の div 要素を一行に並べる方法を制御します。ネスティング・グリッドが、組み込み div それぞれの幅を設定し、左右に寄せた配置を可能にし、行の始まりと終わりを制御します。
Blueprint とは異なり、ネスティング・グリッド・スタイルはコンポーネントの幅をパーセンテージで記述します。そのため、ページの幅が広くなるにつれ、グリッド全体とグリッドに含まれる個々の要素の幅も広くなります。ただし、グリッドのコンポーネントは常に相対サイズを維持します (例えば、66% と33% など)。

図 4 に、ネスティングによって構成された 4 列のレイアウトを示します。一番上にはヘッダーがあり、一番下にはフッターがあります。コンテンツ・エリア自体は 2 列で構成されるグリッドで、列のそれぞれがさらに 2 列のグリッドに分割されています。

図 4. 2 列で構成されるグリッドをネストした YUI Grids のレイアウト
2 列で構成されるグリッドをネストした YUI Grids のレイアウト

YUI Grids で Web ページを作成する

Yahoo は YUI Grids を使用する上で、複数のレンダリング・モードを使用可能な Web ブラウザーでは strict モードの動作を推奨しています。strict モードは、HTML ファイルの先頭行で要求できます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">

次に、YUI Grids CSS を組み込む必要があります。Yahoo では、ユーザーの便宜を図って最小限のスタイルシートを提供しています。

<link rel="stylesheet" type="text/css"
   href="http://yui.yahooapis.com/2.6.0/build/reset-fonts-grids/reset-fonts-grids.css">

(このファイルをダウンロードして独自の Web ルートに保管することも、あるいはこのファイルの機能の一部だけを使用する場合には、ファイルの構成部分をそれぞれ単独でダウンロードすることもできます。このファイルは、リセットを実装する部分、タイポグラフィーを記述する部分、そしてグリッド要素を定義する部分で構成されています。)

Blueprint と同じく、YUI Grids で作成するページには、標準コンポーネントが必要です (リスト 7 を参照)。

リスト 7. YUI Grids の標準ページ・コンポーネント
<div id="doc">
  <div id="hd"><!-- header --></div>
  <div id="bd"><!-- body --></div>
  <div id="ft"><!-- footer --></div>
</div>

一番外側にある div の ID が、ページの幅を決定します。スタイルには doc1 から doc4 までの 4 つがあります。幅の狭い 750 ピクセルのページには id="doc1" を指定してください。950 ピクセルのページには id="doc2" を、そして一般的に使われるようになっている 974 ピクセルの幅広のページには id="doc4" を指定します。id="doc3" は、幅 100% で可変です。いずれのページ幅スタイルでも、コンテンツはセンタリングされます。

サイトのコンテンツは、ID が bd に設定された div 内に配置してください。

コンテンツはさらに 2 つの「ブロック」に分割されます。リスト 8 に示すように、1 つはメインのブロック、もう 1 つは補助的なブロックです (図 4 に示されているとおり、ブロックは必要に応じてさらに分割することができます)。

リスト 8. メイン・ブロックと補助ブロック
<div id="bd">
   <div id="yui-main">
     <div class="yui-b">
     </div>
   </div>

   <div class="yui-b">
   </div>
 </div>

yui-b は「ブロック」を表します。YUI Grids ページには必ず 2 つのブロックが必要です。慣例では、yui-main が左側に表示されます。ただし、一番外側の div にクラス・スタイルを追加して、2 つの列の順序を変更することも可能です。例えば、<div id="doc" class="yui-t2"> とすると、180 ピクセルの (通常は右端にある) レールが代わって左側に配置されます。

ブロックを指定したら、それぞれのブロックにグリッドを組み込みます。各グリッドには 1 つ以上のサブグリッド、または 1 つ以上の「ユニット」が含まれます。リスト 9 は、図 4 に示した 4 列のレイアウトを作成するための HTML および関連する CSS です。

リスト 9. 図 4 の 4 列のレイアウトを作成するための HTML および関連する CSS
<div id="outermost" class="yui-g">
  <div id="firstgrid" class="yui-g first">
    <div class="yui-u first">
    </div>
    <div class="yui-u">
    </div>
  </div>

  <div id="secondgrid" class="yui-g">
    <div class="yui-u first">
    </div>
    <div class="yui-u">
    </div>
  </div>
</div>

yui-g は「グリッド」を表し、yui-u は「ユニット」を表します。ここでは、outermost グリッド (グリッドを区別できるように、単純な名前にしてあります) には 2 つの別のグリッド、firstgridsecondgrid が含まれます。first スタイルが指定するのは、新しい「行」、つまりグリッドあるいはユニットいずれかのシーケンスの始まりです。実際のコンテンツは、それぞれのユニット内に表示されます。

デフォルトでは、グリッド (つまり、yui-g) は 2 つのユニットに均等に割り振られます。このデフォルト設定を変更するには、yui-g に取って代わる特殊なクラスを使用します。例えば、前のリストに記載した 2 つのグリッドのそれぞれをさらに 2 つのユニットに分割し、一方のユニットの幅を他方のユニットの 2 倍にしたい場合には、リスト 10 に記載するコードを作成します。

リスト 10. 一方のユニットの幅が他方の 2 倍となるように、グリッドをさらに 2 つのユニットに分割する
<div id="outermost" class="yui-g">
  <div id="firstgrid" class="yui-gc first">
    <div class="yui-u first">
    </div>
    <div class="yui-u">
    </div>
  </div>
    <div id="secondgrid" class="yui-gc">
    <div class="yui-u first">
    </div>
    <div class="yui-u">
    </div>
  </div>
</div>

yui-gc は一方のユニットを使用可能な幅の 66% に設定し、もう一方のユニットを 33% に設定します。その結果は、図 5 のとおりです。YUI Grinds のドキュメントには、この他のバリエーションも記載されているので参照してください。1 つの興味深い例外として、yui-gb というグリッド・スタイルがあります。このスタイルは 3 つの組み込みユニットで均等にスペースを分割します。

図 5. YUI Grids の CSS グリッド内でユニットのレイアウトを変更できます
YUI Grids の CSS グリッド内でユニットのレイアウトを変更できます

YUI Grids はやや冗長ですが、すべてのブラウザーで有効に機能するだけでなく、モバイル機器でも十分に機能します。Yahoo では、その独自のサイトで YUI Grids を幅広く使用していると言っています。そうであれば十分に検査済みで、人気の高いすべてのブラウザーに対応することは間違いないはずです。

時間を節約して、外観を改善してください

Web を探してみると、Blueprint と YUI Grids の他にも Web ページの設計と開発を迅速化する 10 から 12 のフレームワークが見つかるはずです。なかには、プロジェクトやその他の規約の編成を記述しなければならない「重い」フレームワークもありますが、他のフレームワークは「軽量」です。実際、その 1 つは CSS スニペットを説明と併せて集めたものにすぎません。入手可能なフレームワークの選択肢を調べるには、検索エンジンで CSS framework と入力してください。そして検索結果を詳細に調べて、自分のプロジェクトがそのなかの 1 つ、または複数のフレームワークからメリットを得ることができるかどうかを判断してください。

どのフレームワークを選んだとしても (もちろん、まだ選んでない場合は、フレームワークを選択しなければなりません)、時間と作業を節約できることは確かです。

ライトの Usonian Automatic は成功しなかったかもしれませんが、その精神は今でも生き続けています。

参考文献

学ぶために

  • Frank Lloyd Wright Archive と About.com にはブロック・システムの画像と有名な Usonian Automatic 住宅の画像を何度かリクエストしましたが、無視されました。それでも、ブロックの説明と特殊な施工方法については、Concrete Construction で調べることができます。また、About.com: Architecture に Toufic Khalil Usonian Automatic 住宅のスナップショットが掲載されています。
  • この記事の図 1 と 図 2 に示した Blueprint サンプル・ページを見てください。
  • Web 2.0 開発のツールと情報が満載の developerWorks Web development ゾーンにアクセスしてください。
  • Technology bookstore で、この記事で取り上げた技術やその他の技術に関する本を探してください。
  • developerWorks のエクスペリエンスを My developerWorks でカスタマイズしてください。

製品や技術を入手するために

コメント

developerWorks: サイン・イン

必須フィールドは(*)で示されます。


IBM ID が必要ですか?
IBM IDをお忘れですか?


パスワードをお忘れですか?
パスワードの変更

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


お客様が developerWorks に初めてサインインすると、お客様のプロフィールが作成されます。会社名を非表示とする選択を行わない限り、プロフィール内の情報(名前、国/地域や会社名)は公開され、投稿するコンテンツと一緒に表示されますが、いつでもこれらの情報を更新できます。

送信されたすべての情報は安全です。

ディスプレイ・ネームを選択してください



developerWorks に初めてサインインするとプロフィールが作成されますので、その際にディスプレイ・ネームを選択する必要があります。ディスプレイ・ネームは、お客様が developerWorks に投稿するコンテンツと一緒に表示されます。

ディスプレイ・ネームは、3文字から31文字の範囲で指定し、かつ developerWorks コミュニティーでユニークである必要があります。また、プライバシー上の理由でお客様の電子メール・アドレスは使用しないでください。

必須フィールドは(*)で示されます。

3文字から31文字の範囲で指定し

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


送信されたすべての情報は安全です。


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Web development, Open source
ArticleID=415464
ArticleTitle=より優れた Web ページを組み立てるために
publish-date=06232009