[CSS]スマートフォンからデスクトップまで、Responsive Web Design用のCSSのフレームワーク -MQFramework

サイト構築 -CSS

Post on:2011年11月9日

MQFrameworkのデモ

MQFrameworkは固定レイアウト、可変レイアウトの両方が用意されています。

固定レイアウトのデモ

Demo: Fixed: 1200pxで表示

Demo: Fixed: 768pxで表示

可変レイアウトのデモ

Demo: Fluid: 1200pxで表示

Demo: Fluid: 768pxで表示

[ad#ad-2]

MQFrameworkの特徴

スクリーンサイズ: 5つの異なるスクリーンサイズに対応。; 320px, 480px, 768px, 960px, 1140px
グリッド: グリッドは12カラムをベースにし、さまざまなレイアウトに対応。
タイポグラフィ: @font-faceを使ったタイポグラフィ。
使い方が簡単: スマートフォンからデスクトップまで対応したResponsive Web Designのサイトを簡単に構築。
カスタマイズ: カスタマイズも容易。
カスタマイズ用のスタイルシートファイルもあります。

MQFrameworkの使い方

必要なファイルを一式ダウンロードし、使用するページに外部ファイルとしてスタイルシートを指定します。

<link rel="stylesheet" href="css/master.css" type="text/css" media="screen" title="no title" charset="utf-8">

※必要なファイルはすべて「master.css」に@importで指定されています。

カスタマイズ

スクリーンサイズごとにスタイルを適用する場合は、「custom.css」を利用します。

img{width:100%;}
@media only screen and (min-width: 960px) and (max-width: 1139px) {

}
@media only screen and (min-width: 768px) and (max-width: 959px) {

}
@media only screen and (min-width: 480px) and (max-width: 767px) {

}
@media only screen and (min-width: 320px) and (max-width: 479px) {

}
@media print{}