新しいものを制作できる予感！垂直・水平のリズムを大切にしたレイアウトを組み立てるフレームワーク -xy.css
Post on:2013年1月18日
sponsorsr
垂直のリズムに弱い今までのグリッドとは異なり、垂直・水平のリズムを自由に設計できるマトリックス状のレイアウトが実装できるCSSの1ファイルの軽量フレームワークを紹介します。
トップページのx軸・y軸を使ったレイアウトからワクワクしますね。
xy.cssの特徴
xy.cssはHTML5用に設計された強力なスタイルシートのテンプレートで、以下の特徴を備えています。
- あらゆるデバイス用のレスポンシブ対応のリキッドレイアウト。
- 垂直・水平のリズムをマトリックス状に自由に設計。
- ファイルは軽量のスタイルシート一つ。
- クリーンでセマンティックなHTML5。
- classの付与なしで動作。
- CSS3による美しいレイアウト。
- Media Queriesはアニメーションのエフェクト。
- 印刷時用のグリッドスタイル。
- iPhone, iPadをはじめ、さまざまなデバイス・ブラウザに対応。
- 商用でも無料利用可のオープンソース。
詳しい特徴は下記ページをご覧ください。
各ページの右上のボタンをクリックすると、そのページのマトリックスとグリッドが表示されます。
Liquid Matrix：マトリックス表示
Liquid Matrix：グリッド表示
xy.cssのデモ
xy.cssのデモはたくさんあるので、その中からいくつかピックアップして紹介します。
まずは、マトリックスのレイアウトのベースとなるグリッドから。
もちろんレスポンシブ対応なので、表示サイズを変更してみてください。
よくある2カラムレイアウト。
3カラムや1カラムもあります。
各エレメントの一覧。
テキストや見出しを配置し、複数のカラムを使ったページレイアウト。
デモは他にもたくさんあります。
xy.cssの使い方
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 & 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つのサークルの先にも多くの事例があります。
sponsors
