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

Media Queriesを使って、スマートフォンからデスクトップまでさまざまなスクリーンサイズに対応した12カラムのグリッドベースのフレームワークを紹介します。

サイトのキャプチャ

MQFramework

MQFrameworkのデモ

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

固定レイアウトのデモ

デモのキャプチャ

Demo: Fixed: 1200pxで表示

デモのキャプチャ

Demo: Fixed: 768pxで表示

可変レイアウトのデモ

デモのキャプチャ

Demo: Fluid: 1200pxで表示

デモのキャプチャ

Demo: Fluid: 768pxで表示

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{}

top of page

©2017 coliss