新しいものを制作できる予感!垂直・水平のリズムを大切にしたレイアウトを組み立てるフレームワーク -xy.css

垂直のリズムに弱い今までのグリッドとは異なり、垂直・水平のリズムを自由に設計できるマトリックス状のレイアウトが実装できるCSSの1ファイルの軽量フレームワークを紹介します。

トップページのx軸・y軸を使ったレイアウトからワクワクしますね。

サイトのキャプチャ

xy.css

xy.cssの特徴

xy.cssはHTML5用に設計された強力なスタイルシートのテンプレートで、以下の特徴を備えています。

  • あらゆるデバイス用のレスポンシブ対応のリキッドレイアウト。
  • 垂直・水平のリズムをマトリックス状に自由に設計。
  • ファイルは軽量のスタイルシート一つ。
  • クリーンでセマンティックなHTML5。
  • classの付与なしで動作。
  • CSS3による美しいレイアウト。
  • Media Queriesはアニメーションのエフェクト。
  • 印刷時用のグリッドスタイル。
  • iPhone, iPadをはじめ、さまざまなデバイス・ブラウザに対応。
  • 商用でも無料利用可のオープンソース。

詳しい特徴は下記ページをご覧ください。

サイトのキャプチャ

Liquid Matrix -xy.css

各ページの右上のボタンをクリックすると、そのページのマトリックスとグリッドが表示されます。

サイトのキャプチャ

Liquid Matrix:マトリックス表示

サイトのキャプチャ

Liquid Matrix:グリッド表示

xy.cssのデモ

xy.cssのデモはたくさんあるので、その中からいくつかピックアップして紹介します。

まずは、マトリックスのレイアウトのベースとなるグリッドから。
もちろんレスポンシブ対応なので、表示サイズを変更してみてください。

サイトのキャプチャ

Liquid Matrix

よくある2カラムレイアウト。
3カラム1カラムもあります。

サイトのキャプチャ

2 Columns

各エレメントの一覧。

サイトのキャプチャ

HTML Elements

テキストや見出しを配置し、複数のカラムを使ったページレイアウト。

サイトのキャプチャ

Mixed Columns

デモは他にもたくさんあります。

サイトのキャプチャ

デモ一覧 -xy.css

xy.cssの使い方

xy.cssの基本的な使い方を紹介します。

サイトのキャプチャ

Documentation -xy.css

Step 1: ダウンロード

xy.cssを下記ページからダウンロードします。

Step 2: 水平のグリッド設計

HTMLは非常にシンプルで、classなど余計なものは一切ありません。



	
		
	
	
		<header></header>
		<article></article>
		<aside></aside>
		<footer></footer>
	

天地にヘッダとフッタ、コンテンツとサイドバーを2カラム水平に配置します。

header, footer { width: 100%; }
article { width: 66.6667%; float: left; }
aside { width: 30.769231%; float: right; }

Step 3: 垂直のグリッド設計

articleとaside内に、見出しとパラグラフを配置します。

<header>Lorem ipsum dolor sit amet</header>
<article>
	<h1>Lorem ipsum dolor sit amet</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris blandit malesuada feugiat...</p>
</article>
<aside>
	<h2>Lorem ipsum</h2>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris blandit malesuada feugiat...</p>
</aside>
<footer>Lorem ipsum dolor sit amet</footer>

見出しとパラグラフは垂直のグリッドで設計します。

body {
	font-size: 0.750em; /* = 12px = 12 x (1em / 16px) */
	line-height: 1.50; /* = 18px = 18 / 12 (unitless) */
	}
/* 2. typography */
	h1 { font-size: 3.000em; line-height: 0.500; margin-bottom: 0.500em; /* 36px */ }
	h2 { font-size: 2.000em; line-height: 0.750; margin-bottom: 0.750em; /* 24px */ }
	p  { font-size: 1.000em; line-height: 1.500; margin-bottom: 1.500em; /* 12px */ }

Step 4: レスポンシブ

スマフォ、タブレット、デスクトップごとに文字サイズを最適化します。

/* medium screens (excludes iPad &amp; iPhone) */
@media only screen and (min-width: 481px) and (max-width: 767px) {

	h1 {	/* 30px */
		font-size: 2.500em; 
		line-height: 0.600; 
		margin-bottom: 0.600em;
		}
	h2 {	/* 18px */
		font-size: 1.500em; 
		line-height: 1.000; 
		margin-bottom: 1.000em; 
		}
	p  {	/* 12px */
		font-size: 1.000em; 
		line-height: 1.500; 
		margin-bottom: 1.500em;
		}

}
/* medium large screens */
@media only screen and (min-width: 1224px) and (max-width: 1824px) {

	h1 {	/* 42px */
		font-size: 3.500em; 
		line-height: <span class="white">0.858</span>;
		margin-bottom: 0.429em;
		}
	h2 {	/* 30px */
		font-size: 2.500em; 
		line-height: <span class="yellow">0.900</span>;
		margin-bottom: <span class="yellow">0.900em</span>;
		}
	p  {	/* 14px */
		font-size: 1.167em;
		line-height: <span class="yellow">1.929</span>;
		margin-bottom: 1.286em; 
		}

}
/* large screens */
@media only screen and (min-width: 1824px) {

	h1 {	/* 64px */
		font-size: 5.333em;
		line-height: <span class="white">0.5625</span>;
		margin-bottom: <span class="white">0.5625em</span>;
		}
	h2 {	/* 38px */
		font-size: 3.167em; 
		line-height: <span class="white">0.948</span>;
		margin-bottom: <span class="white">0.948em</span>;
		}
	p  {	/* 16px */
		font-size: 1.333em; 
		line-height: <span class="white">2.250</span>;
		margin-bottom: 1.125em;
		}

}

実装はDocumentaionの他にも、トップの9つのサークルの先にも多くの事例があります。

サイトのキャプチャ

xy.css

top of page

©2017 coliss