ウェブデザイナー、
子育てとフリーランス

このブログ「Webデザイナーとして働くワーキングマザーの日記」をデザインはそのままに、レスポンシブに修正してみました。
ちょっと時間ができたので、勉強ついでに。
単純なレイアウトなので特に苦労もありませんでしたが、その作業の覚書です。

ブレークポイント

ブレークポイントは、480pxと768pxの2段階で設定。
スマートフォン：480pxまで
タブレット：768pxまで
PC：768px以上

手順

1.HTML4からHTML5へ修正

以前のエントリー「HTML5へのリニューアル　覚書」を参考に、HTMLのマークアップを修正。

2.viewport

HTMLのheader内にviewportを追記。

[html]
<meta name="viewport" content="width=device-width, initial-scale=1">
[/html]

width=device-width：横幅はデバイスのサイズ
initial-scale=1：倍率は1

3.メディアクエリ

CSS側でメディアクエリを設定。
まずスマートフォン用のCSSを記述（モバイルファースト）。
その次にタブレット、最後にPC用という順に記述することで、モバイルではPC用などの余分なCSSを読み込まなくてもよくなる。

[html]
@media only screen and (min-width: 481px){
}
[/html]

4.IE8以下への対応

Respond.jsを読み込む。
参照：https://github.com/scottjehl/Respond

検証

Firefoxの新機能「レスポンシブデザインビュー」が便利。
ツールバーより、ツール＞Web開発＞レスポンシブデザインビューを選択。
プラグイン無しで、各大きさに自動的にリサイズしてくれる。

参考

Web Designing (ウェブデザイニング) 2012年 10月号 [雑誌]

最後に

以前、下記の記事を拝見して、レスポンシブのコーディングはちゃんと勉強してからお請けしないといけないなと思いました。
参照：ゆめいろデザインさん「1年間、レスポンシブWEBデザインのウェブサイト案件を制作してみて思ったこと」
今回は自分のブログで、スマートフォン用にと言っても単にメニューをカラム落ちさせただけなので、なーんのトラブルもなくできましたが、 やっぱりクライアントワークとなると違うだろうなと。
デザインもCSS3で表現するとか、色んなJsと組み合わせてみるとか、実際に自分でやってつまずいてようやく気付くこともあるのかなあと。

単純な疑問なんですが、レスポンシブのデザインをする場合って、最初のデザインカンプはPC用で作って、スマフォやタブレット用はコーディングベースで確認するんですかね？
全てのサイズのデザインをjpgでFIXしてからコーディング、ってのもなかなか難しかったりするんじゃないかなあと思ったりしています。