レスポンシブサイトを簡単に作れる便利なツール
レスポンシブ対応のjqueryスライダー
http://responsiveslides.com/
レスポンシブ対応の定番メニューがダウンロードできる
レスポンシブで定番のメニューです。
無料でダウンロードできるので試してみよう！http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/a-simple-responsive-mobile-first-navigation/
CSSジェネレーター
http://html.adobe.com/jp/edge/reflow/
【画面チェック】端末ごとにビューポートチェックができるサービス
ブックマークバーにドラッグすればワンタッチでチェックできますよ。
http://lab.maltewassermann.com/viewport-resizer/
（要インストール）http://html.adobe.com/jp/edge/inspect/
右上にURLをいれれば確認できます！http://responsive.is/
320 × 480 Phone (portrait)
480 × 320 Phone (landscape)
480 × 800 Small Tablet (portrait)
800 × 480 Small Tablet (landscape)
768 × 1024 Large Tablet (portrait)
1024 × 768 Large Tablet (landscape)
1280 × 800 Desktophttp://dfcb.github.com/Responsivator/
レスポンシブWEBデザインの参考サイト
http://responsive-jp.com/
【CSSコピペ用】画面サイズ別に指定するMedia Queries
単一のCSSソース内で分岐させるとき用
@media screen and (max-width: 920px) {
/* ここにスタイルが入ります */
}
@media screen and (max-width: 760px) {
/* ここにスタイルが入ります */
}
@media screen and (max-width: 320px) {
/* ここにスタイルが入ります */
}
画面別にまとめてみた
■スマートフォン（縦長・横長）の場合
@media only screen and (min-device-width : 320px)
and (max-device-width : 480px) {
/* ここにスタイルが入ります */
}
■スマートフォン（横長）の場合
@media only screen and (min-width : 321px) {
/* ここにスタイルが入ります */
}
■スマートフォン（縦長）の場合
@media only screen and (max-width : 320px) {
/* ここにスタイルが入ります */
}
■iPad（縦長・横長）の場合
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* ここにスタイルが入ります */
}
■iPad（縦長）の場合
@media only screen and (min-device-width : 768px) and
(max-device-width : 1024px) and
(orientation : portrait) {
/* ここにスタイルが入ります */
}
■デスクトップのブラウザ用（横長）の場合
@media only screen and (min-width : 1224px) {
/* ここにスタイルが入ります */
}
■大きいモニター用の場合
@media only screen and (min-width : 1824px) {
/* ここにスタイルが入ります */
}
■iPhone4などの高解像度用の場合
@media only screen and (-webkit-min-device-pixel-ratio : 1.5),only screen and (min-device-pixel-ratio : 1.5) {
/* ここにスタイルが入ります */
}
HTMLテンプレート
CSSフレームワーク
http://www.muellergridsystem.com/
ワードプレス用テンプレート
jqueryプラグイン
http://blog.kiskolabs.com/post/5602656614/responsive-jquery-slideshow
https://github.com/davatron5000/Lettering.js
勉強用に「ゼロから始めるレスポンシブWebデザイン入門」
レスポンシブWebデザインとは
http://ascii.jp/elem/000/000/697/697463/
レスポンシブWebデザインのワークフローと画面設計
http://ascii.jp/elem/000/000/699/699812/
HTMLの用意とリセットCSSの作成
http://ascii.jp/elem/000/000/699/699842/
フルードイメージの導入とタイポグラフィの設定
http://ascii.jp/elem/000/000/699/699876/
CSSでスマートフォンでも見やすくスタイリング
http://ascii.jp/elem/000/000/700/700095/
メディアクエリーの設定とグリッドデザインの導入
http://ascii.jp/elem/000/000/700/700139/
フルードグリッドとレスポンシブWebデザインの完成
http://ascii.jp/elem/000/000/700/700502/
参考になった記事
http://webdesignrecipes.com/web-design-for-mobile-with-css3-media-queries/
