「ResponsiveGridSystem」が便利だったからちょっと改良してみた

2014/10/25 Webデザイン

ResponsiveGridSystem

友人なんかに依頼されたりとかでホームページを作る機会が年に何度かありまして、Dreamweaverを手に入れてからはずっとDreamweaverの可変グリッド機能を使って作成をしてたのですが、こいつはそれ用のライブラリをインポートするんじゃなくてwidthとmargin-leftを計算して自動入力するってだけの力技なゆえ扱いが面倒。

しかもWordpressのテーマにしようとパーツごとにphpに分解したらもうGUIでのグリッド作成は使えない。自動入力も効かない。なんじゃこりゃ。

当然そんなんやってられないわけで、レスポンシブデザインとグリッドシステムを手っ取り早く実装できるライブラリを探してたところResponsiveGridSystemってのを見つけました。名前がそのまんま！

 

12436288584_94d6bc46d2_b.jpg
Responsive Grid System
CSS framework for fast, intuitive development of responsive websites. Available in 12, 16 and 24 columns with media queries for all standard devices, clearfix, and optional reset.

icon-link http://responsive.gs/

 

スポンサードリンク

使い方

なんてもんはネット上に掃いて捨てるほど転がっておりまして。数字の違いを除けば定義されているクラスが4つほどしか無いのでさして苦労することもないでしょう。一応自分が参考にした記事を貼っておきます。

今までの常識を覆す!?レスポンシブかつ超軽量なCSSフレームワーク

ちょっと改造してみた

自分が以前使っていた960.gsなんかでは「左に指定したグリッドぶん余白をあけて配置する」ことが出来たのですが、どうやらこのResponsiveGridSystemにはなさ気。なので、ちょちょっと実装してみた。

以下のソースコードをコピーして該当するファイルの@media ( min-width : 768px )内に貼り付けてね！

左に余白を入れたい箇所のクラスにpush_xx(1~最大グリッド数)を指定することで、そのぶんだけ左に余白グリッドを入れることが出来ます。

responsive.gs.12col.css

/* @media ( min-width : 768px )内に記述 */
.push_1 { margin-left: 8.33333333333%; }
.push_2 { margin-left: 16.6666666667%; }
.push_3 { margin-left: 25%; }
.push_4 { margin-left: 33.3333333333%; }
.push_5 { margin-left: 41.6666666667%; }
.push_6 { margin-left: 50%; }
.push_7 { margin-left: 58.3333333333%; }
.push_8 { margin-left: 66.6666666667%; }
.push_9 { margin-left: 75%; }
.push_10 { margin-left: 83.3333333333%; }
.push_11 { margin-left: 91.6666666667%; }
.span_12 { margin-left: 100%; }

.gutters .push_1 { margin-left: 10.5%; }
.gutters .push_2 { margin-left: 19.0%; }
.gutters .push_3 { margin-left: 27.5%; }
.gutters .push_4 { margin-left: 36.0%; }
.gutters .push_5 { margin-left: 44.5%; }
.gutters .push_6 { margin-left: 53.0%; }
.gutters .push_7 { margin-left: 61.5%; }
.gutters .push_8 { margin-left: 70.0%; }
.gutters .push_9 { margin-left: 78.5%; }
.gutters .push_10 { margin-left: 87.0%; }
.gutters .push_11 { margin-left: 95.5%; }

.gutters .push_1:first-child { margin-left: 8.5%; }
.gutters .push_2:first-child { margin-left: 17.0%; }
.gutters .push_3:first-child { margin-left: 25.5%; }
.gutters .push_4:first-child { margin-left: 34.0%; }
.gutters .push_5:first-child { margin-left: 42.5%; }
.gutters .push_6:first-child { margin-left: 51.0%; }
.gutters .push_7:first-child { margin-left: 59.5%; }
.gutters .push_8:first-child { margin-left: 68.0%; }
.gutters .push_9:first-child { margin-left: 76.5%; }
.gutters .push_10:first-child { margin-left: 85.0%; }
.gutters .push_11:first-child { margin-left: 93.5%; }

responsive.gs.16col.css

/* @media ( min-width : 768px )内に記述 */

.push_1 { margin-left: 6.25%; }
.push_2 { margin-left: 12.5%; }
.push_3 { margin-left: 18.75%; }
.push_4 { margin-left: 25%; }
.push_5 { margin-left: 31.25%; }
.push_6 { margin-left: 37.5%; }
.push_7 { margin-left: 43.75%; }
.push_8 { margin-left: 50%; }
.push_9 { margin-left: 56.25%; }
.push_10 { margin-left: 62.5%; }
.push_11 { margin-left: 68.75%; }
.push_12 { margin-left: 75%; }
.push_13 { margin-left: 81.25%; }
.push_14 { margin-left: 87.5%; }
.push_15 { margin-left: 93.75%; }

.gutters .push_1 { margin-left: 8.375%; }
.gutters .push_2 { margin-left: 14.75%; }
.gutters .push_3 { margin-left: 21.125%; }
.gutters .push_4 { margin-left: 27.5%; }
.gutters .push_5 { margin-left: 33.875%; }
.gutters .push_6 { margin-left: 40.25%; }
.gutters .push_7 { margin-left: 46.625%; }
.gutters .push_8 { margin-left: 53.0%; };
.gutters .push_9 { margin-left: 59.375%; }
.gutters .push_10 { margin-left: 65.75%; }
.gutters .push_11 { margin-left: 72.125%; }
.gutters .push_12 { margin-left: 78.5%; }
.gutters .push_13 { margin-left: 84.875%; }
.gutters .push_14 { margin-left: 91.25%; }
.gutters .push_15 { margin-left: 97.625%; }

.gutters .push_1:first-child { margin-left: 6.375%; }
.gutters .push_2:first-child { margin-left: 12.75%; }
.gutters .push_3:first-child { margin-left: 19.125%; }
.gutters .push_4:first-child { margin-left: 25.5%; }
.gutters .push_5:first-child { margin-left: 31.875%; }
.gutters .push_6:first-child { margin-left: 38.25%; }
.gutters .push_7:first-child { margin-left: 44.625%; }
.gutters .push_8:first-child { margin-left: 51.0%; };
.gutters .push_9:first-child { margin-left: 57.375%; }
.gutters .push_10:first-child { margin-left: 63.75%; }
.gutters .push_11:first-child { margin-left: 70.125%; }
.gutters .push_12:first-child { margin-left: 76.5%; }
.gutters .push_13:first-child { margin-left: 82.875%; }
.gutters .push_14:first-child { margin-left: 89.25%; }
.gutters .push_15:first-child { margin-left: 95.625%; }

 

responsive.gs.24col.css

/* @media ( min-width : 768px )内に記述 */
<pre>.gutters .span_1 { width: 2.25%; }
.gutters .span_2 { width: 6.5%; }
.gutters .span_3 { width: 10.75%; }
.gutters .span_4 { width: 15.0%; }
.gutters .span_5 { width: 19.25%; }
.gutters .span_6 { width: 23.5%; }
.gutters .span_7 { width: 27.75%; }
.gutters .span_8 { width: 32.0%; }
.gutters .span_9 { width: 36.25%; }
.gutters .span_10 { width: 40.5%; }
.gutters .span_11 { width: 44.75%; }
.gutters .span_12 { width: 49.0%; }
.gutters .span_13 { width: 53.25%; }
.gutters .span_14 { width: 57.5%; }
.gutters .span_15 { width: 61.75%; }
.gutters .span_16 { width: 66.0%; }
.gutters .span_17 { width: 70.25%; }
.gutters .span_18 { width: 74.5%; }
.gutters .span_19 { width: 78.75%; }
.gutters .span_20 { width: 83.0%; }
.gutters .span_21 { width: 87.25%; }
.gutters .span_22 { width: 91.5%; }
.gutters .span_23 { width: 95.75%; }
.gutters .span_24 { width: 100%; }

.gutters .push_1 { margin-left: 6.25%; }
.gutters .push_2 { margin-left: 10.5%; }
.gutters .push_3 { margin-left: 14.75%; }
.gutters .push_4 { margin-left: 19.0%; }
.gutters .push_5 { margin-left: 23.25%; }
.gutters .push_6 { margin-left: 27.5%; }
.gutters .push_7 { margin-left: 31.75%; }
.gutters .push_8 { margin-left: 36.0%; }
.gutters .push_9 { margin-left: 40.25%; }
.gutters .push_10 { margin-left: 44.5%; }
.gutters .push_11 { margin-left: 48.75%; }
.gutters .push_12 { margin-left: 53.0%; }
.gutters .push_13 { margin-left: 57.25%; }
.gutters .push_14 { margin-left: 61.5%; }
.gutters .push_15 { margin-left: 65.75%; }
.gutters .push_16 { margin-left: 70.0%; }
.gutters .push_17 { margin-left: 74.25%; }
.gutters .push_18 { margin-left: 78.5%; }
.gutters .push_19 { margin-left: 82.75%; }
.gutters .push_20 { margin-left: 87.0%; }
.gutters .push_21 { margin-left: 91.25%; }
.gutters .push_22 { margin-left: 95.5%; }
.gutters .push_23 { margin-left: 99.75%; }

.gutters .push_1:first-child { margin-left: 4.25%; }
.gutters .push_2:first-child { margin-left: 8.5%; }
.gutters .push_3:first-child { margin-left: 12.75%; }
.gutters .push_4:first-child { margin-left: 17.0%; }
.gutters .push_5:first-child { margin-left: 21.25%; }
.gutters .push_6:first-child { margin-left: 25.5%; }
.gutters .push_7:first-child { margin-left: 29.75%; }
.gutters .push_8:first-child { margin-left: 34.0%; }
.gutters .push_9:first-child { margin-left: 38.25%; }
.gutters .push_10:first-child { margin-left: 42.5%; }
.gutters .push_11:first-child { margin-left: 46.75%; }
.gutters .push_12:first-child { margin-left: 51.0%; }
.gutters .push_13:first-child { margin-left: 55.25%; }
.gutters .push_14:first-child { margin-left: 59.5%; }
.gutters .push_15:first-child { margin-left: 63.75%; }
.gutters .push_16:first-child { margin-left: 68.0%; }
.gutters .push_17:first-child { margin-left: 72.25%; }
.gutters .push_18:first-child { margin-left: 76.5%; }
.gutters .push_19:first-child { margin-left: 80.75%; }
.gutters .push_20:first-child { margin-left: 85.0%; }
.gutters .push_21:first-child { margin-left: 89.25%; }
.gutters .push_22:first-child { margin-left: 93.5%; }
.gutters .push_23:first-child { margin-left: 97.75%; }


スポンサードリンク