レスポンシブWebデザインに関しての備忘録

  • Posted on
  • Category : Tips
レスポンシブWebデザインに関しての備忘録

年明けちゃいましたけど、年末に引き続き大掃除ネタです。特に目新しいものはないですし、今年も便利なフレームワークやツールなど沢山出てくるだろうとは思いますが、レスポンシブWebデザインに関する情報が結構溜まっているので、ざっくりとですが整理兼ねてまとめました。

2013年4月3日 追記
2. Tipsやチュートリアル」に追記しました。

レスポンシブWebデザインに関しての備忘録 目次

  1. フレームワーク
  2. Tipsやチュートリアル
  3. jQuey – グリッドレイアウト
  4. jQuey – スライダー・カルーセル
  5. ブレークポイントについて
  6. 便利ツール
  7. デザイン参考サイト

1. フレームワーク

正直、普段からフレームワーク自体ほとんど使うことがないのですが、便利なのは十分知っているし、いざ使うとき選択肢が少しでも多くあったほうが良いのでメモしてたものです。
ここで紹介しているもの以外にも沢山出回っていますが、個人的に使いやすいなとか覚えておきたいなと思うものだけに絞っています。

CSSHórus

CSSHórus

Kube CSS-framework

Kube CSS-framework

Bootstrap

Bootstrap

Skeleton

Skeleton

IVORY Framework

IVORY Framework

Wirefy

Wirefy

Responsive Grid System

Responsive Grid System

その他気になったものや覚えておきたいものは以下。

目次へ

2. Tipsやチュートリアル

基本とかど忘れした時に見る用の参考サイトなど。

This Is Responsive

This Is Responsive

レスポンシブなWebデザインに関する情報やツールなどをまとめているリソース集で、かなりの量があります。
わざわざこのエントリーを書かないでも、ここ見れば良いじゃんという気もしなくはない…。

目次へ

3. jQuey – グリッドレイアウト

レスポンシブなグリッドレイアウトを実装する際に役立つプラグイン。

jQuery Masonry

jQuery Masonry

Freetile.js

Freetile.js

Grid—A—Licious

Grid—A—Licious

Isotope

Isotope

The Heads-Up Grid

The Heads-Up Grid

Wookmark jQuery plugin

Wookmark jQuery plugin

目次へ

4. jQuey – スライダー・カルーセル

レスポンシブに対応してるスライダーやカルーセルのプラグイン。

FlexSlider

FlexSlider

Modern Slide In

Modern Slide In

RefineSlide

RefineSlide

iView™

iView™

Elastislide

Elastislide

Circular

Circular

上記以外を探している場合は、以下のエントリーで沢山まとめられています。

目次へ

5. ブレークポイントについて

基本は480pxと768pxみたいなのをよく見かけるんですが、Androidタブレットの普及だったり、デザインとか対応機種によってもブレークポイントは変わってくるので、その時に参考になるエントリー。

レスポンシブデザインのウインドウサイズの切替えについてまとめてみました | アシアルブログ

レスポンシブデザインのウインドウサイズの切替えについてまとめてみました | アシアルブログ

2012年7月時点の情報で各デバイスの画面サイズと切替えサイズがまとめられており、また各キャリアの機種のサイズも100機種分まとめられています。
わかりやすくビジュアル化されていたりして見やすい :)

レスポンシブWebデザインのブレークポイント調査 | Design Spice

レスポンシブWebデザインのブレークポイント調査 | Design Spice

100サイト分のブレークポイントを調査し、まとめたエントリー。
上記エントリーでも言われていますが、今まで多いのは基本をiPhoneで考えた480pxと基本をiPadで考えた768pxでしたが、Androidタブレットは800pxとかなので今後はタブレットに関しては800pxが無難かなと思います。

目次へ

6. 便利ツール

レスポンシブWebデザインは様々なデバイスに対応させるし確認も何かと面倒なので、こういう便利なものをどんどん使って少しでも作業時間を短く・楽にしたいですね。
他にも沢山ありますけどよく使うものだけに絞りました。

Responsivator

Responsivator

かなりの頻度で使っている表示確認ツールで、個人的にかなりオススメです。
URLを入れればそのサイトの表示にできるし、幅や高さのカスタマイズも簡単にできます。
また、OSSなので自分なりに使いやすくカスタマイズしたりもできます。

Screenfly by QuirkTools

Screenfly by QuirkTools

同じく表示確認ツール。
見たいURLを指定すれば、「Desktop」「Tablet」「Mobile」「Television」の4タイプでのデバイスの見栄えを簡単に確認できます。

Viewport Resizer

Viewport Resizer

ブックマークレットタイプの確認ツール。
見たいサイトでブックマークレットを使用すれば上にツールバーが表示され、それぞれのデバイス表示を確認できます。
また、横向きの状態で見たい場合は、そのデバイスを再度選択すれば横向き表示になります。

※上のキャプチャでいうと、再度Tabletを選択すれば現在縦表示だが、横表示に切り替わる。

resizeMyBrowser

resizeMyBrowser

ブラウザサイズを簡単に確認できるツールで、それぞれのサイズが書かれているボタンをクリックするだけで、そのサイズにブラウザがリサイズされます。
数値部分にはiPhone、iPad、Google Nexus one、MacBook Proなどのようなデバイス名も入っているのでわかりやすいです。
また、ページ下部の「Inner」でブラウザの内側が指定した大きさになり、「Outer」でブラウザの外枠を含んだ大きさになるように調整することもできます。

目次へ

7. デザイン参考サイト

デザイン参考としてますが、組み方だったりコンテンツの見せ方だったり、デザイン以外の部分でも何かと参考になります。

Media Queries

Media Queries

Media Queriesを使用したサイトのギャラリー。

Responsive Web Design JP

Responsive Web Design JP

日本国内の秀逸なレスポンシブWebデザインを集めたギャラリーサイト。
国内だけのギャラリーというのも良いですが、デザインギャラリーだけでなくレスポンシブWebデザインに関しての情報もまとめています。

40+ Great Responsive HTML Website Templates | tripwire magazine

40+ Great Responsive HTML Website Templates | tripwire magazine

上とは違いこちらはギャラリーではないですが、レスポンシブなテンプレートのまとめエントリー。
良いと思ったものがあればダウンロードして制作の手間を省いたりできますね。

目次へ

Back to Top

レスポンシブWebデザインに関しての備忘録

レスポンシブWebデザインに関しての備忘録

/ Tips

Tagged with:

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。