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

IE6をはじめ、iPhone, iPadにも対応した、可変レイアウトも固定レイアウトにも利用できる実用的で多彩なグリッドを組み立てるCSSのフレームワークを紹介します。

デモのキャプチャ

StackLayout
デモページ:Basic Mockup

[ad#ad-2]

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>

sponsors

top of page

©2024 coliss