先日、WEB Designingさんに執筆させてもらったResponsive Grid Systemですが、なんと原稿が出来て入稿し、発売間近くらいのタイミングで仕様変更され、めちゃめちゃ焦ったセナです。皆さんこんにちわ。

さて、というわけで、今日は僕が日頃お世話になっているResponsive Grid Systemの仕様変更に伴い、ちょっとResponsive Grid Systemの使い方をもう一度見なおしてみる目的と、Web Designingさんに執筆させて頂いた内容に現在のバージョンと相違が見られるので、その簡単なご説明をさせて頂ければと思います！

執筆記事の方を楽しみに見て頂いている皆さん「あれ？なんか違うくない？」と混乱させてしまいましたら本気で失礼しました！この記事から最新バージョンの仕様がちょっとでも説明できれば幸いです！

しかし、今回のResponsive Grid Systemの改修はこれまで僕が当たり前としていたスマフォ、iPad、PC等、各画面毎にmedia-queriesを設定するという固定概念をちょっと変える事になったので、これも皆さんと共有させて頂ければ幸いです！

• Responsive Grid System

それでは行ってみましょう！

 

旧ダウンロードファイル

以前のResponsive Grid Systemだとmedia-queries専用のファイルが存在したのですが、新しい仕様のResponsive Grid System内にはmedia-queries用のファイルが存在していません。

これまでですと。

• responsive-gs-12col.css – 幅可変のグリッドシステムを設定
• media-queries.css – スマフォ、タブレット毎にグリッドを調整しレスポンシブ対応

 

新ダウンロードファイル

まず、スマフォやタブレット毎の画面幅を指定するためのmedia-queries.cssが廃止され、responsive-gs-12col.cssに統一されることになりました。

ファイルの中身を見てみると一目瞭然なんですが、これまでスマフォ、タブレット毎に設定していたmedia-queriesの設定が一本化され。

画面幅のスタイルを適応させる設定値が

[sourcecode language=”css”]@media ( min-width : 768px )[/sourcecode]

だけとなっています。

つまり、旧ファイルだと少なくとも

• スマートフォンサイズ

[sourcecode language=”css”]
@media
only screen and (min-device-width: 320px) and (max-device-width: 480px),
only screen and (min-width: 320px) and (max-width: 480px) {
/* CSSを記述 */
}
[/sourcecode]

• スマートフォンサイズ（縦用）

[sourcecode language=”css”]
@media
only screen and (min-width: 321px) {
/* CSSを記述 */
}
[/sourcecode]

• スマートフォンサイズ（横用）

[sourcecode language=”css”]
@media
only screen and (max-width: 320px) {
/* CSSを記述 */
}
[/sourcecode]

• iPadサイズ

[sourcecode language=”css”]
@media
only screen and (min-device-width: 768px) and (max-device-width: 1024px),
only screen and (min-width: 768px) and (max-width: 1024px) {
/* CSSを記述 */
}
[/sourcecode]

• iPadサイズ（縦用）

[sourcecode language=”css”]
@media
only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
/* CSSを記述 */
}
[/sourcecode]

• iPadサイズ（横用）

[sourcecode language=”css”]
@media
only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
/* CSSを記述 */
}
[/sourcecode]

• PC1024px以上

[sourcecode language=”css”]
@media
only screen and (min-width: 1024px) {
/* CSSを記述 */
}
[/sourcecode]

• PC1224px以上

[sourcecode language=”css”]
@media
only screen and (min-width: 1224px) {
/* CSSを記述 */
}
[/sourcecode]

• PC1824px以上

[sourcecode language=”css”]
@media
only screen and (min-width : 1824px) {
/* CSSを記述 */
}
[/sourcecode]

という画面毎の設定に分かれていたmedia-queriesの設定を

改定後は

• 768px以上

[sourcecode language=”css”]
@media ( min-width : 768px ) {
/* CSSを記述 */
}
[/sourcecode]

• 768px以下

[sourcecode language=”css”]
普通に書こう！
[/sourcecode]

みたいな仕様になったようですね。

そのため、今後Responsive Grid Systemを使う場合は考え方を逆にし、PC用のスタイルを作り、レスポンシブ化して各画面毎のサイズに合わせるという考え方から、最初に768px以下の画面を中心に作成し、それをPC用に合わせるといった考え方にシフトすると作りやすいかもしれません。

掻い摘んだ一例として、

[sourcecode language=”html”]
@media ( min-width : 768px ) {
.container{ width: 960px; margin: auto; }
.col { margin-left: 2%; }
}
[/sourcecode]

こういう設定の仕方ですね。media-queriesの設定は768px以上の設定のみ考えるという方法で、768px以上の場合は画面幅を960pxに固定しています。それ意外で画面幅を固定する指定をしていない結果として、全部768px以下の画面は自動的に100%表示となるかと思います。

つまりはmedia-queriesで設定するのはPC画面だけ！ということですね。極端な仕様変更だなと初見はちょっとビックリしましたが、必要であればその他のmedia-queriesを追加すれば良い話し。それ以上に今回なぜこういった仕様変更をしたのかが重要かなと。

確かにこれまでレスポンシブデザインのCSSが肥大化していた理由の一つは各画面毎のmedia-queriesを適応する必要があったため、結果としてスタイルの数が激増するという点は大きかったと思います。

そのため、今回の改修を鵜呑みにすれば、media-queriesの設定が必要なのはPC画面の場合だけとすることでCSSの肥大化を防ごうという事のようです。

執筆記事をご覧頂いた皆様には旧ファイルで完全にご紹介してしまいましたので、若干混乱された方も多いと思われ申し訳ない気持ちが大きいのですが、今回のResponsive Grid Systemの仕様変更は僕にとって目からウロコの物でしたので、今後も僕はこのグリッドシステムにはお世話になりそうです。

 

以上、いかがでしたでしょうか？

レスポンシブデザイン自体、まだ出来て間もない技術ですし、まだまだ問題点も多いです。レイアウト変更時のメモリ消費、従来デザインとの相違によるユーザーの困惑、作業工程とCSSの肥大化に加え、画像問題。

今後も大きく改修、改善の頻度は高いかと思われますが、media-queriesを使って各画面毎のスタイルを適応するのが当たり前だったのが、PC画面だけ適応すればそれでOKじゃね？という今回の改修をご紹介させて頂きましたが、きっとこれから先もっと多くの改修改善が見られると思います。

一つのフレームワークのこういった改修や改善を追って行くと、なぜこの形になったのかを知ることができ、歴史を見ているようでも面白いですね。

バンクーバーのうぇぶ屋では今後もレスポンシブデザインの動向は逐一チェックして行ければと思っていますので、今後ともよろしくお願いいたします。

ちなみに、旧バージョンのResponsive Grid Systemに関する使い方は今月号のWeb Designingさんの方に書かせて頂きましたので、これまでの一般的なレスポンシブデザインのフレームワークの考え方についてはこちらから見て頂く事が出来るかなと思われます。

それでは皆様、良きレスポンシブライフを！