先週のコラムでは、Yahoo! ユーザー インターフェイス (YUI) ライブラリで利用できる JavaScript 機能 (最も重要なカレンダー) に焦点を当てて、Yahoo! 開発者ネットワークについて説明しました。 CSS ツールを提供する YUI ライブラリの別の領域をカバーするためにもう少し時間を費やしたいと思いました。これらのツールを使用すると、CSS ベースのデザインを Web アプリケーションと簡単に組み合わせることができます。
ブラウザのサポート
CSS ツールの主な機能の 1 つは、クラス A ブラウザーを完全にサポートするようにグレード付けされていることです。ブラウザのサポートの評価は純粋に Yahoo! の評価であり、Web サイトで完全な説明を参照できます。基本的には、今日市場に出ているブラウザで CSS がどのように適切に動作するかを説明しています。
このオンライン表では、ブラウザーはブラウザー サポートの 3 つのレベル (A、C、および X) に分類されています。レベル A は最高レベルのサポートです。最新の Web 標準の力を活用することで、YUI ライブラリは、高度な機能と視覚的な忠実性を提供するクラス A エクスペリエンスを発見します。サポート カテゴリと関連ファイルを見ると、CSS がサポートされている場所がわかりますが、CSS はすべてのブラウザで利用できるはずです (ダウングレードの可能性もあります)。
再利用可能なCSS
YUI ライブラリには、書式設定、フォントの導入、グリッドベース (列と行) レイアウトをカバーする 3 つの CSS 領域または機能が含まれています。これらの用語は、Web サイトで次の 3 つの要素を説明するために使用されます。
ページグリッド:使用しているテンプレートの容量内に 1 ～ 4 列のグリッドを埋め込むことができます。
フォント:ブラウザー間のタイポグラフィーの標準化と制御を提供します。一般に、一貫したフォントと行の高さを提供しながら、(ブラウザー内で) ユーザーによるフォントの調整を完全にサポートします。
リセット: HTML 要素へのデフォルトの割り当てをブラウザー間で標準化します。また、強調された要素に太字を使用するなど、ブラウザーで一般的なデフォルトの表現も削除され、すべてのフォント定義が意図的であり、要素が常に慣例的な視覚的表現ではなく意味的な意味で使用されるようになります。
インストール後、YUI ライブラリ ダウンロードの各要素は、Web サーバー上の次のディレクトリ/ファイルで利用可能になります。
ページグリッド: buildgridsgrids.css
フォント: buildfontsfonts.css
リセット: eset eset.css をビルドします。
これらのベース ディレクトリは、独自の Web サーバーにインストールすることも、サイト内に配置して、必要に応じて参照できるようにすることもできます。 CSS の重要な特徴は (無料であることに加えて)、リリース前に徹底的にテストおよびデバッグされることです。実際に CSS ツールが動作している様子を詳しく見てみましょう。
グリッドページレイアウト
グリッドベースのレイアウトは、ほぼすべてのサイトのデザインやページ レイアウトの原動力となります。以前は、これは HTML テーブルを通じて行われることが多かったですが、CSS はページ レイアウトに大きな力と柔軟性を提供します。 Page Grid は、要件に応じて列と行を含むページを構築するコードを提供します。
ページ グリッドの最も基本的なレベルでは、7 つの Web ページ テンプレートが提供され、そのうち 6 つは詳細なメイン コンテンツ/ツールバー レイアウトを定義し、7 番目のテンプレートはツールバーのないレイアウトを定義し、メイン コンテンツがページ幅全体を占めます。これらのテンプレートの名前は次のとおりです。
yui-t1:左側に幅 160 ピクセルのツールバーと幅 570 ピクセルのメイン領域が含まれます。
yui-t2:左側に幅 180 ピクセルのツールバーと幅 550 ピクセルのメイン領域が含まれます。
yui-t3:左側に幅 300 ピクセルのツールバーと幅 430 ピクセルのメイン領域が含まれます。
yui-t4:右側に幅 180 ピクセルのツールバーと幅 550 ピクセルのメイン領域が含まれます。
yui-t5:右側に幅 240 ピクセルのツールバーと幅 490 ピクセルのメイン領域が含まれます。
yui-t6:右側に幅 300 ピクセルのツールバーと幅 430 ピクセルのメイン領域が含まれます。
yui-t7:幅 750 ピクセルのメイン領域が含まれており、ツールバーはありません。
目的に合わせてこれらのテンプレートを組み合わせる (大胆な場合は編集する) ことができます。リスト A では、最初のレイアウトを使用してページをレイアウトします (注: CSS ツールは Web サーバーのデフォルト ディレクトリにインストールされています)。
リストA
<html><ヘッド>
<title>Yahoo CSS ツールの例 1</title>
<link rel="stylesheet" type="text/css" href="build/grids/grids.css">
</head>
<本文>
<div id="doc" class="yui-t2">
<div id="hd">ページヘッダー</div>
<div id="bd">
<div id="yui-main">
<div class="yui-b">メインエリア</div>
</div><div class="yui-b">左列</div>
</div>
<div id="ft">ページフッター</div>
</div></body></html>
HTML ページに関するいくつかの注意事項:
レイアウトはページ全体に与えられます。メインの div タグには yui-t2 クラスが割り当てられます。これは、2 番目のテンプレートが使用されていることを示しています。
ページはヘッダー、本文、フッター領域に分かれています。ヘッダーには hd という識別子が与えられ、ボディには bd、フッターには ft が付けられます。
ページの本文は、左側の領域 (テンプレートがサポートしている場合) とメイン領域に分かれています。どちらにも yui-b クラスが割り当てられますが、メイン領域には div タグに yui-main 識別子属性が追加されます。