• かちびと.net

    レスポンシブWebデザインに対応できる軽量なグリッドレイアウト用CSSを生成するシンプルなジェネレーター・NegativeGridのご紹介。なかなかよかったのでメモ。シンプルでいい感じです。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

レスポンシブWebデザインに対応できる軽量なグリッドレイアウト用CSSを生成するシンプルなジェネレーター・NegativeGrid

スポンサーリンク

シンプルでいいなーと思ったのでシェアがてら
ご紹介。レスポンシブWebデザインに対応できる
グリッドレイアウト構築用のCSSを吐き出して
くれるジェネレーターです。必要最低限のコード
だけ出してくれるのは嬉しいかも。頻繁に
使うものではないけど覚えておきたいですね。

ネタ元はUnformedbuildingさんのまとめ記事からです。今回は他にも気になる情報が沢山ありました。ぜひチェックしてみてください。

個人的にはこのWebサービスが一番気になったのでテストしてみましたよ。

NegativeGrid


至ってシンプルなサービスです。希望の値を入力していくだけで軽量なCSSを吐き出すのでそれを元に設計していく、みたいな感じ。

デモがあったのでマネして作ってみました。

Sample ※幅のテストはresponsivepxが便利です。

スクリーンショット


↑ 幅の広いデバイス


↑ 狭いデバイスでもグリッドを保ちます。

設定方法


こんな感じでダイアログが何度か表示されますので数値を入力していけばOKです。

  1. カラム数
  2. 最大レイアウト(単位はpx)
  3. 最小レイアウト(単位はpx)
  4. カラム間の幅(単位は%)
  5. カラム幅(単位は%)
  6. 外枠をどいれくらい開けるか(単位は%)
  7. カラム内のpaddingの値(%)
  8. 最後はcssのみかHTMLも出すか。「キャンセル」を選択するとHTMLも吐き出します。


↑ こうやって生成されるので後はコピペコピペ。Media Queris等とうまく併用してみてください。

これはこれで使いこなせると重宝しそうかな、とは思いました。が、贅沢言えばローカル環境に置きたいですねw以下よりご利用頂けます。

NegativeGrid

URL :
TRB :

Comments & Trackbacks (1)

  1. suguru.hirahara

    こんにちは。いつも参考にさせていただいています。
    直接内容と関係ないのですが、関連記事のタイトルが途中で切れていて、すこし見づらく感じました。ホバーしたときにタイトルが全部確認できるようになると、読みやすいかなと思います。
    よろしくお願いします!

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services