隙間時間でクリエイターになる
隙間時間でクリエイターになる
2012.09.28

必読!5分でわかるレスポンシブWebデザインまとめ 制作編

野田

制作してみました

上記で書かせていただいた内容、過去の記事も含め、とても簡単にテンプレートを制作させていただきました。
本当に基本的な機能やcss、スクリプトを取り入れてるので、良かったら使ってください。
ちなみに、なにかミスがありましたら、精神的にとても弱いので優しく指摘してください。

————————————————————————————
Demo
Download(zip)
————————————————————————————

おすすめお役立ちツール

Responsinator

Responsinator

http://www.responsinator.com/

様々なデバイスを一括で表示してくれるツールです。
URLでのリンクを入力すると確認できるので、一度サーバーにアップしてから使いましょう。

Media Queries

Media Queries

http://mediaqueri.es/

この記事を読んでる人なら一度は見かけたことがあるでしょう。
レスポンシブWEBデザインの参考サイトリンク集です。
超いいです。
いつもボーっと口を開けながら、ウインドウサイズを大きくしたり小さくしたり・・・。

25 jQuery Plugins to help with Responsive Layouts

25 jQuery Plugins to help with Responsive Layouts

http://speckyboy.com/2011/10/24/25-jquery-plugins-to-help-with-responsive-layouts/

レスポンシブWEBデザインに対応しているブラグインを集めたサイトです。
レイアウトは、しっかりと動きを考えながら構成を練る方が良いので、参考にしてください。

20 Useful jQuery Plugins for Responsive Web Design

20 Useful jQuery Plugins for Responsive Web Design

http://designmodo.com/jquery-plugins-responsive-web-design/

上記同様レスポンシブWEBデザインに対応しているブラグインを集めたサイトです。
こちらも、レイアウトはしっかりと動きを考えながら構成を練る方が良いので、参考にしてください。

Firesizer

Firesizer

https://addons.mozilla.org/ja/firefox/addon/firesizer/

簡単にウィンドウサイズを変更できる、FireFoxのプラグインになります。
コーディング中に簡単な判断を行いたい時などにとても使えます。

最後に

現在までの【必読!5分でわかるレスポンシブWebデザインまとめ】のシリーズについて、FacebookのコメントやTwitterにて、ご感想をいただければとても嬉しいです。
皆様のご感想を参考にさせていただければと思います。
よろしくお願い致します。

次回の私のブログは、完全にWeb制作から離れて、私の趣味について語らせていただきたいと思います。
あまり参考にならないと思いますが、インスピレーションとしてまたご覧下さい。