レスポンシブデザインの簡単な作り方

開発者２人が欲しいと思うアプリを作った「着物クローゼット」
ですが！私ことイラスト担当ちどりはまだダウンロードできてません。
なぜなら、私はiphoneユーザーだからです！！

…Macのパソコン買って、App Store年間登録料９９ドル払えば使えるようになるけど。高いなあ。
広告収入がうまくいくといいなあ…道のりは遠いです。
androidスマホに買い替えるほうが早いかもしれないですね…

愚痴っぽくなってすみません。

さて、今日は１つのサイトをスマホでもパソコンでもうまく表示するには、という話です。

スマホとパソコンでは全然画面サイズが違うので、普通に作るとどちらかで見にくくなってしまいます。
スマホ用サイトとパソコン用サイトそれぞれを用意するという手もあるけど、それは大変そう。
そこで、レスポンシブデザイン。
レスポンシブデザインとは、スマホ・パソコンどちらからでも見やすいように表示が切り替わるデザインのことです。

それでは以下、レスポンシブwebデザインの簡単な作り方です。

目標

パソコンで見ると
コンテンツ１　コンテンツ２　コンテンツ３
みたいにコンテツが横並びに表示されてて

スマホで見ると
コンテンツ１
コンテンツ２
コンテンツ３
みたいにコンテンツが縦並びに表示されるデザインにしたい。

方法

floatという方法とflexboxという方法でそういうデザインが作れそうです。
どっちの方法で作るか少し悩みました。
floatの方がややこしそうだけど、対応してるブラウザが多い。
flexboxの方が簡単そうだけど、古いブラウザ（IE１０以前とか。）に対応してない。

悩みましたが、サイトを作る腕に自信がないのでflexboxにすることにしました。

下地づくり

パソコンかスマホかで表示が切り替わって欲しい部分を＜div＞＜/div＞とかで囲います。
そのdivにclass="container"とか名前をつけます。
それでcssの方に
.container {display: flex;}
と書きます。
html側は
＜div class="container"＞コンテンツ１　コンテンツ２　コンテンツ３＜/div＞
みたいな状態です。
これでdivで囲った部分の中身が動く下地ができました。

折り返し指定

次にCSSにflex-flow: row wrap;という文字をたして
.container {display: flex; flex-flow: row wrap;}
とします。
これでコンテンツを左から順に置いていって、入りきらなくなったら今度は下に表示されるようになります。
ようするに画面幅が小さくなったら、それに応じて横並びのコンテンツが縦並びになってくれます。

最小サイズ指定

とはいえ、コンテンツの中身が文字だけだと、幅が狭くなっても
コン　コン　コン
テン　テン　テン
ツ１　ツ２　ツ３
コン　コン　コン
テン　テン　テン
ツ１　ツ２　ツ３
コン　コン　コン
テン　テン　テン
ツ１　ツ２　ツ３
みたいに縦にのびるばっかりで縦並びになってくれません。
そこで、各コンテンツに「これ以上は縮まないでね」という幅を設定します。
まず各コンテンツを＜div＞＜/div＞とかで囲います。
そのdivにclass="column"とか名前をつけます。
それでcssの方に
.column {min-width: 215px;}
と書きます。（215の部分は任意で変えてください）
html側は
＜div class="container"＞
＜div class="column"＞コンテンツ１＜/div＞
＜div class="column"＞コンテンツ２＜/div＞
＜div class="column"＞コンテンツ３＜/div＞
＜/div＞
みたいな状態です。
これで、画面幅が小さくなっても、各コンテンツの幅は215pxより小さくなりません。

スマホでは表示方法を変えたい部分を指定する

例えば見出しをパソコンではドーンと大きく表示したいけど、スマホでそんなに大きかったら邪魔だよね、という場合。
Media Queriesを使います。
CSSに
@media screen and (max-width: 480px){　}
と記載して、{　}内にスマホではこんな風に表示してほしい、という内容をかいておけば、画面サイズが480px以下のときはそのルールが適応されます。
例えば
@media screen and (max-width: 480px){ h1{font-size: 20px;} }
みたいな感じです

スマホでは表示しなくていいものを指定する

スマホは画面が小さいのであんまりたくさんの物をつめこむと見にくくなってしまいます。
なので「これはスマホでは表示しなくていいや」という物があれば、先ほどのMedia Queries内に
.none {display:none;}
と記載します。
つまり
@media screen and (max-width: 480px){ .none {display:none;} }
という状態です。
それでhtmlの方で、表示しなくていいものにclass="none"と書けば、画面サイズが480px以下のときはそれは表示されません。
例えばicon.pngって画像を表示しなくていいなら
＜div class="none"＞＜img src="icon.png"＞＜/div＞
とすれば、画面サイズが480px以下のときはicon.pngは表示されません。

ただし、このMedia Queries、ＩＥ８以下では使えません。
対応策はあるようなのですが、flexboxにした時点でＩＥ１０以下での表示を諦めてるので対策しませんでした。

文字のサイズ指定

基準となるフォントサイズに応じて、文字の大きさが相対的に変わるremという単位が便利です。

画像の対応

iphoneとかだと、画面の解像度が高いです。
対応方法はいくつかあるのですが、簡単なのは表示したい領域の２倍のサイズで画像を作って、widthとheightで実際に表示したい領域のサイズを指定して表示する方法です。（大きく作って小さく表示）
例えばicon.pngを幅150px高さ150pxで表示したい場合、まずicon.pngを幅300px高さ300pxで作ります。
そして
 ＜img src="icon.png" width="150" height="150"＞
と指定すれば、画面の解像度が高い機種で見てもきれいに見えます。

いかがでしたでしょうか。
初心者のざっくりした理解なのでおかしな部分があるかもしれませんが、私と同様初心者で、いきなり詳しいページみても全然わかんないよ、まずは大まかな構成が知りたいよ、という方には役にたつのではないかと思います。たぶん。

もっと詳しいことが知りたい場合は以下のサイト様たちを見てみてください。

http://qiita.com/junya/items/25c65fe12c18a9ab9286
http://www.webcreatorbox.com/tech/flexbox/
http://ja.learnlayout.com/flexbox.html
http://www.flapism.jp/html/278/
http://www.mdesign-works.com/blog/web/responsive-design-css/
http://scene-live.com/page.php?page=61