[CSS]スマフォから大きいサイズのデスクトップまで考慮したレイアウト -Rubber Layouts
Post on:2011年9月5日
sponsors
小さいサイズのスマートフォンから大きいサイズのデスクトップまで考慮した、StaticとFluidのいいとこ取りをしたスタイルシートのレイアウトを紹介します。
Rubber Layouts – Combining Static and Fluid Layouts
[ad#ad-2]
Rubber Layoutsのデモ
デモはメインコンテンツとサイドバーのシンプルな2カラムのレイアウトで、ブラウザのサイズを変更することで、StaticとFluidの固定と可変をどのように取り入れているか確認できます。
デモページ：幅1600pxでの表示
コンテナの幅は1000px（固定）。
デモページ：幅800pxでの表示
コンテナの幅は720px（固定）。
デモページ：幅600pxでの表示
コンテナの幅は100%（可変）。
デモページ：幅480pxでの表示
ヘッダ・コンテンツ・サイドバーすべてを同じ幅に変更。
Rubber Layoutsの特徴
多くのウェブページで可変であるFluid Layoutが使用されています。このテクニックは非常に有用ですが、マイナスの面もあります。
スマートフォンで可変のレイアウトを表示するのを想像してみてください。サイドバーはたぶん50pxくらいで、コンテンツは250pxで表示されてしまうでしょう。また、大きなスクリーンで表示した場合は広がりすぎてしまい、恐ろしいほどのリーダビリティを提供してしまうことでしょう。
そこで、この可変レイアウトのプラスの面を使用しつつ、マイナス面を固定レイアウトでカバーする「Rubber Layout」を紹介します。
このレイアウトには4つのステージが用意されています。
4つのステージ
- 1000pxの幅をもったコンテナを配置します。
- Media Queriesを使用して、幅が999pxより小さい時はコンテナの幅を720pxに変更します（固定レイアウト）。
- 幅が719pxより小さい時はコンテナの幅を100%にし、ブラウザにフィットさせます（可変レイアウト）。
- 最後は幅が479pxより小さい時は、コンテナの中のすべてに同じ幅を持たせます。
[ad#ad-2]
Rubber Layoutsの実装
HTML
コンテンツとサイドバー、2つのdiv要素をdiv要素で内包します。
<div id="container"> <h1 id="header">Rubber</h1> <div id="main">メインコンテンツ</div> <div id="sidebar">サイドバー</div> </div>
CSS
CSSはステージに分けて、説明します。
まずは、デフォルトの幅の設定です。
#container {
width: 1000px;
margin: 0 auto;
background: #52a0ff;
}
#header {
font-size: 50px;
margin-top: 50px;
float: left;
width: 98%;
margin-left: 1%;
margin-right: 1%;
}
#main{
background: #eeeeee;
float: left;
width: 68%;
margin-left: 1%;
margin-right: 1%;
height: 1000px;
}
#sidebar{
background: #dddddd;
float: left;
width: 28%;
margin-left: 1%;
margin-right: 1%;
height: 1000px;
}
2番目の幅999pxより小さい用のスタイルシートです。
コンテナの幅を720px固定にします。
@media screen and (max-width: 999px) {
#container {
width: 720px;
}
}
3番目の幅719pxより小さい用のスタイルシートです。
コンテナの幅を100%可変にします。
@media screen and (max-width: 719px) {
#container {
width: 100%;
}
}
最後の4番目は主にスマートフォンなどを対象にした479pxより小さい用のスタイルシートです。
ヘッダ、メインコンテンツ、サイドバー、すべてを98%で指定します。
@media screen and (max-width: 479px) {
#header {
width: 98%;
}
#main {
width: 98%;
}
#sidebar {
width: 98%;
}
}
sponsors
