昨日リリースしたTumblr用ツール「feedpost」で採用している技術を紹介するシリーズ。3回目はサイトデザインを支えるCSS「Responsive Grid System」。その名の通り「Grid System」でありながら「Responsive」であるという特徴を持った……なんだろう、「CSSテンプレート」とでも呼べば良いのかな？
その特徴や導入の仕方などについては、以下のサイトを読んでもらえれば大体わかるので気になる方は読んでみてください。
Responsive Grid Systemの仕様が変更となり、僕のレスポンシブデザインの作り方もちょっと変わりそうなので共有 | バンクーバーのうぇぶ屋
先日、WEB Designingさんに執筆させてもらったResponsive Grid Systemですが、なんと原稿が出来て入稿し、発売間近くらいのタイミングで仕様変更され、めちゃめちゃ焦ったセナです。皆さんこんにちわ。
さて、というわけで、今日は僕が日頃お世話になっているResponsive Grid Systemの仕様変更に伴い、ちょっとResponsive Grid Systemの使い方をもう一度見なおしてみる目的と、Web Designingさんに執筆させて頂いた内容に現在のバージョンと相違が見られるので、その簡単なご説明をさせて頂ければと思います！
執筆記事の方を楽しみに見て頂いている皆さん「あれ？なんか違うくない？」と混乱させてしまいましたら本気で失礼しました！この記事から最新バージョンの仕様がちょっとでも説明できれば幸いです！
追記では、思い出話しがてら簡単な説明などを。
思い出話
最近の流行をあまりキャッチアップ出来てないので今現在どうかは解りませんが、僕が「1日1ニコ」と言うサイトのリニューアルのために「Grid System」を探していた2012年末当時においては、「960 Grid System」というのが流行していました。960 Grid System
「Grid System」とは
「Grid System」というのはHTMLをグリッド（格子）状に捉えてオブジェクトを配置しやすくしようという考え方で、これを導入することで従来の「floatの仕様に悩まされながらオブジェクトの大きさを指定していく」という煩雑な作業から解放されるのが特徴です。「960 Grid System」ではサイトの幅を「960px」と決め例えばそれを12分割し、クラス毎に幅を決めていくという手法を使っていました。縦に同幅で3列表示するなら3つのオブジェクトにそれぞれ「grid_4」というクラスを指定します。そうすると各列が幅300pxで確保され、配置されるわけです。
流行していたとおりとても便利なシステムなのですが、僕としては2つの点が不満でした。
- 僕の考えるサイトでは960pxでは少し狭い
- 「Grid System」を導入するのと同時にスマートフォン対応もしたい。
特に2番目。「960 Grid System」ではpx単位で枠の幅を決めているので、スマートフォン対応するためにはCSSを別に用意するか、テンプレートを分ける必要があります。でも世の中には「Responsive」という概念がありまして、出来ればそれを採用したかったのです。
「Responsive」とは
ASCII.jp：レスポンシブWebデザインとは (1/5)｜ゼロから始めるレスポンシブWebデザイン入門
レスポンシブWebデザイン（Responsive Web Design）は、PC、タブレット、スマートフォンなど、あらゆるデバイスに最適化したWebサイトを、単一のHTMLで実現する制作手法です。ブラウザーのスクリーンサイズを基準にCSSでレイアウトを調整することで、デバイスごとに専用サイトを用意することなく、マルチスクリーンに対応したWebサイトを制作できます。
特に少ない条件分けで行けるのがあればmore素敵です。
「Responsive Grid System」の最新版であれば、
- 枠のサイズが%指定なので、ウィンドウ幅の変動に柔軟に対応出来る
- モバイルファースト。次いてPC用の設定を書くことで、PC/スマートフォン対応が少ない行数で実現出来る
ということでとても便利です。今だったら使わない手はないですね。
注意点
「Grid System」にはリセットCSSが付属しているのが一般的ですが、ものによって特徴があり思わぬ作用をもたらすことがあるので注意が必要です。「Responsive Grid System」の場合、次の2つでちょっと嵌まりかけました。- -moz-box-sizing: border-box
- white-space: normal
ひとつめは幅や高さの計算方法に関する指定。通常、paddingやmarginは幅や高さに含まれませんが、「border-box」を指定するとそれが含まれるようになります。デザインが結構乱れるので要調整。
ふたつめは空白や改行やタブに対する振る舞いの設定。「normal」に設定すると連続する半角スペース・タブ・改行を、1つの半角スペースとして表示します。特に「pre」タグの中で改行されなかったり、ないようのない要素の幅がゼロになったりと影響があります。
どちらも崩れにくいGridのために必要な設定なのですが、ブラウザのデフォルトとは違っているので注意が必要です。
そんな感じ。
