年明けちゃいましたけど、年末に引き続き大掃除ネタです。
特に目新しいものはないですし、今年も便利なフレームワークやツールなど沢山出てくるだろうとは思いますが、レスポンシブWebデザインに関する情報が結構溜まっていたので、ざっくりとですが自分用の整理兼ねてまとめました。
フレームワーク
普段からフレームワーク自体ほとんど使うことがないのですが、便利なのは十分知っているし、いざ使うとき選択肢が少しでも多くあったほうが良いのでメモしてたものです。
ここで紹介しているもの以外にも沢山出回っていますが、個人的に使いやすいなとか覚えておきたいなと思うものだけに絞っています。
CSSHórus
Kube CSS-framework
Bootstrap
Skeleton
IVORY Framework
Wirefy
Responsive Grid System
その他で気になったものや覚えておきたいものは以下。
Tipsやチュートリアル
基本とかど忘れしたときに見る用の参考サイトなど。
- This Is Responsive
わざわざこのエントリーを書かないでも、ここ見れば良いじゃんという気もしなくはないですが...。
レスポンシブなWebデザインに関する情報やツールなどをまとめているリソース集でかなりの量があります。 - Responsive Design in 3 Steps | Web Designer Wall
viewport、IE用JS、Media Queriesなど、レスポンシブWebデザインを実装する際の基本的な3ステップ。 - CSS3 Media Queries を使って、Webサイトをスマートフォンに対応させるときの注意書き | Webデザインレシピ
Media Queriesの使い方や注意書きをまとめたエントリー。
わかりやすくまとまっているので、これからレスポンシブに挑戦するという方は特に一読してみるといいと思います。 - レスポンシブ・ウェブデザインでの CSS コードの書き方 | ヨモツネット
同じくMedia Queriesついてのエントリー。 - 5 Useful CSS Tricks for Responsive Design | Web Designer Wall
レスポンシブで役立つCSSのテクニック。 - Responsive Column Layouts | Web Designer Wall
擬似クラスの:nth-of-type()を用いて、レスポンシブなカラムレイアウトを実装する方法。 - 10 Responsive Navigation Solutions and Tutorials | Speckyboy
レスポンシブなナビゲーションを実装する際に参考になるチュートリアル。 - Responsive Data Tables | CSS-Tricks
レスポンシブなテーブルを実装するチュートリアル。 - レスポンシブWebデザインでテーブルを使う時の小技 | Design Spice
同じくレスポンシブなテーブルを実装するチュートリアル。 - レスポンシブWebデザインの画像問題の解決法5種 | Design Spice
JavaScript、サーバーサイド、APIなど5つの方法がまとめられています。 - Responsive Img
ウィンドウサイズ毎に読み込む画像（src属性）を切り替えてくれるjQueryプラグイン。 - 文系デザイナーでも大丈夫！レスポンシブWEBサイトをWordPressで作ってみよう
基本はWordPressのことですが、他にもいろいろとレスポンシブについてまとめられています。 - Responsive Email Templates
レスポンシブに対応したHTMLメールのテンプレート集です。 - Media Query Snippets
Media Queriesのコードを一覧化したもので、コピペで使えるのでチートシート的に使えます。
通常のものだけでなく各デバイス向けのものにあって便利です。
jQuey - グリッドレイアウト
レスポンシブなグリッドレイアウトを実装する際に役立つjQueryプラグイン。
jQuey - スライダー・カルーセル
レスポンシブに対応してるスライダーやカルーセルのjQueryプラグイン。
- FlexSlider
- Modern Slide In
RefineSlide
iView™- Elastislide
Circular
上記以外を探している場合は、以下のエントリーで沢山まとめられています。
- 25 A Must-Use Free Responsive jQuery Image Sliders | Web Design Habits
- 30 Responsive jQuery Slider Plugins for 2013 | Flash User
ブレークポイントについて
基本は480pxと768pxみたいなのをよく見かけるんですが、Androidタブレットの普及だったり、デザインとか対応機種によってもブレークポイントは変わってくるので、その際に参考になるエントリー。
レスポンシブデザインのウインドウサイズの切替えについてまとめてみました | アシアルブログ
2012年7月時点の情報で各デバイスの画面サイズと切替えサイズがまとめられており、また各キャリアの機種のサイズも100機種分まとめられています。
わかりやすくビジュアル化されていたりして見やすい :)
レスポンシブWebデザインのブレークポイント調査 | Design Spice
100サイト分のブレークポイントを調査し、まとめたエントリー。
上記エントリーでも言われていますが、今まで多いのは基本をiPhoneで考えた480pxと基本をiPadで考えた768pxでしたが、Androidタブレットは800pxとかなので今後はタブレットに関しては800pxが無難かなと思います。
便利ツール
レスポンシブWebデザインは様々なデバイスに対応させるし確認も何かと面倒なので、こういう便利なものをどんどん使って少しでも作業時間を短く・楽にしたいですね。
他にも沢山ありますけどよく使うものだけに絞りました。
Responsivator
かなりの頻度で使っている表示確認ツールで、個人的にかなりオススメです。
URLを入れればそのサイトの表示にできるし、幅や高さのカスタマイズも簡単にできます。
また、OSSなので自分なりに使いやすくカスタマイズしたりもできます。
Screenfly by QuirkTools
同じく表示確認ツールで、見たいURLを指定すれば「Desktop」「Tablet」「Mobile」「Television」の4タイプでのデバイスの見栄えを簡単に確認できます。
Viewport Resizer
ブックマークレットタイプの確認ツールで、見たいサイトでブックマークレットを使用すれば上にツールバーが表示され、それぞれのデバイス表示を確認できます。
また、横向きの状態で見たい場合は、そのデバイスを再度選択すれば横向き表示になります。
resizeMyBrowser
ブラウザサイズを簡単に確認できるツールで、それぞれのサイズが書かれているボタンをクリックするだけで、そのサイズにブラウザがリサイズされます。
数値部分にはiPhone、iPad、Google Nexus one、MacBook Proなどのようなデバイス名も入っているのでわかりやすいです。
また、ページ下部の「Inner」でブラウザの内側が指定した大きさになり、「Outer」でブラウザの外枠を含んだ大きさになるように調整することもできます。
デザイン参考サイト
デザイン参考としてますが、組み方だったりコンテンツの見せ方だったり、デザイン以外の部分でも何かと参考になります。
- Media Queries
Media Queriesを使用したサイトのギャラリー。 - Responsive Web Design JP
日本国内の秀逸なレスポンシブWebデザインを集めたギャラリーサイト。
国内だけのギャラリーというのも良いですが、デザインギャラリーだけでなくレスポンシブWebデザインに関しての情報もまとめています。 - 40+ Great Responsive HTML Website Templates | tripwire magazine
こちらはギャラリーではないですがレスポンシブなテンプレートのまとめエントリーで、デザインの参考だけでなく良いと思ったものがあればダウンロードして制作の手間を省いたりできますね。