[CSS]わずか12個のclass名で多彩なグリッドを組み立てるCSSのフレームワーク -StackLayout

サイト構築 -CSS

Post on:2011年3月28日

StackLayoutの主な特徴

わずか12個のclass名で、コンポーネントを管理
class名は、簡単にセマンティックなものに変更可能
ネストの制限は無し
floatのクリア無しで、エレメントを横列に簡単に並べることが可能
デフォルトは可変レイアウト用で、固定レイアウトにも対応
各カラムの溝の設定は簡単で、px, %の両方に対応

StackLayoutの対応ブラウザ・デバイス

IE7以下には、別途スタイルシートを使用します。

Win

IE6
IE7
IE8
Firefox3.6
Opera11

Mac

Safari5
Chrome9
Firefox3.6
Opera11

デバイス

iPhone
iPad
Nokia E-Series
Sony Ericsson w890i

StackLayoutで使用する12個のclass名

12個のclass名だけで、次に紹介する多彩なグリッドを作成できます。

.stack
.stack1of2
.stack1of3
.stack2of3
.stack1of4
.stack3of4
.stack1of5
.stack2of5
.stack3of5
.stack4of5
.stackAuto
.stackContent

[ad#ad-2]

StackLayoutのデモ

デモでは、実用的なさまざまなレイアウトが12個のclass名だけで、実装されています。

デモページ：Basic Mockup
ベースとなるモックアップ

デモページ：Test Page
さまざまなレイアウトパターン

デモページ：Template Variations
テンプレートのバリエーション

デモページ：Wrappers and Nesting
内包・ネストの例

StackLayoutの使い方

「デモページ：Basic Mockup」を例に、簡単に紹介します。

エリアの定義

ヘッダ・コンテンツ・フッタの作成は、「.stack」のみで定義できます。

<div id="page">
    <div class="stack">
        <div id="header">
        </div>
        <div id="content">
        </div>
        <div id="footer">
        </div>
    </div>
</div>

「.stack」は、全てのコンポーネントを内包する親となるコンポーネントです。

コンテンツエリア

コンテンツエリアを横に分割します。

<div id="content">
	<div id="column1" class="stack3of4"> <!-- large column, width:75% -->
	</div>
	<div id="column2" class="stack1of4"> <!-- small column, width:25% -->
	</div>
</div>

StackLayoutで用意されている分割数は、2, 3, 4, 5です。上記は4分割し、左の広い方が75%、右が25%で定義されています。

見出しのパネル

見出しの箇所は、コンポーネントを内包して定義されています。コンポーネントを内包するには、「.stackContent」を使用します。

<div id="column1" class="stack3of4">
	<div class="stackContent">
		<h2>My Awesome Heading</h2>
		<p>This is sample content</p>
	</div>
</div>

コンポーネントを増やす

見出しの下に、コンポーネントを増やすのも簡単です。
3分割の幅のコンポーネントを3つ「.stack1of3」を使用して、配置します。それぞれにコンポーネントを内包する際は、「.stackContent」を上記と同様に使用します。

<div id="column1" class="stack3of4">
	<div class="stackContent">
		<h2>My Awesome Heading</h2>
		<p>This is sample content</p>
	</div>
	<div class="stack1of3">
	</div>
	<div class="stack1of3">
	</div>
	<div class="stack1of3">
	/div>
</div>

ヘッダエリア

大見出し、ナビゲーションには、コンポーネントを内包する「.stackContent」を使用します。

<div id="header" class="stack">
	<h1 id="title" class="stackContent">Basic Mockup</h1>
	<div id="banner" class="stackContent">
		<img width="1100" src="my-banner.png" alt="My Banner" />
	</div>
	<ul id="nav" class="stackContent">
		<li><a href="mockup1.html">Basic Mockup</a></li>
		<li><a href="mockup2.html">Wrappers and Nesting</a></li>
		<li><a href="mockup3.html">Template Variations</a></li>
		<li><a href="mockup4.html">Semantic Class Names</a></li>
	</ul>
</div>

フッタエリア

フッタでは可変の幅を持ったコンポーネント用の「.stackAuto」を使用しています。

<div id="footer" class="stack">
	<div class="stackAuto">
		<p class="stackContent">&copy; 2011 Your Name here</p>
	</div>
	<div class="stackAuto">
		<a class="stackContent" href="#">License</a>
	</div>
	<div class="stackAuto">
		<a id="twitter" class="stackContent" href="#">Follow me on Twitter</a>
	</div>
</div>