レスポンシブサイトを作るときに気をつけていること

メディアクエリを記述

viewport(ビューポート)タグ

HTMLのhead内に以下を記述します

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

これは定型分みたいなかんじなので、コピペで大丈夫だと思います。
あとは制作するサイトによって拡大できるようにするか、とかを変えればOKです。

cssの読込を画面サイズによって変える

まずは、ブレイクポイントを決めます。
私はいつもタブレットサイズからスマホ表示切り替えるようにしています。

こんなかんじで表示をわけてます。
cssで記述するときは、スマホ用のcssから読み込むように書いていくと
モバイルファーストなのかな？

@media only screen and ( max-width : 768px ) {
  //ここにタブレット・スマホ用のcssを記述
}

@media only screen and ( max-width : 480px ) {
  //ここにスマホ用のcssを記述
}

@media print, screen and ( min-width : 769px ) {
  //ここにPC用のcssを記述
}

こんなかんじです。
印刷したときに表示するのはPC用のcssになるようにしています。
タブレット・スマホ用のcssはスクリーンでの表示だけです。
ここ、なにも指定せず書いてしまうと印刷したときに大惨事になります…………（経験済み）

フレームワーク

私がずっと使っているおすすめフレームワーク
「Responsive Grid System」

これは超シンプルで余計なものはなにもなく使いやすいです。
レスポンシブ系のフレームワークはたっくさんありますが、
使用しない記述が多すぎたり機能が入りすぎていたりして
私にとっては難解に思えてしまうものばかりでした。
これは考え方もとってもシンプルでおすすめです。

http://responsive.gs/

とっても使いやすいですが、配布されているままでは少し落とし穴が…。
先ほど書いた印刷のときの設定が書かれていないのです。
なので、使うときは印刷用なのかそうじゃないのか振り分けてくださいね。

あとは、自分用にカスタマイズしていくとどんどん使いやすくなっていくと思います。
私は、以下をレスポンシブ用cssに追記しています。
PC表示のときに非表示、タブレット・スマホ表示のときに非表示にするクラスを振っています。
これは入れておくと便利です。

@media print, screen and ( min-width : 769px ) { {
.sp {
    display: none !important;
  }
}
@media only screen and ( max-width : 768px ) {
  .sp_none {
    display: none;
  }
}

Responsive Grid Systemの詳しい使い方を紹介しているサイトもあります。

必要なファイルは、cssの中の

• responsive.gs.12col.css
• responsive.gs.16col.css
• responsive.gs.24col.css

いずれかひとつあれば十分ですが、お好みで。

scriptファイルは
IE8以下でもレスポンシブデザインを実現できるようにするものです。
使用するのは必須ではないし、サポートも終了しているのでいらないかもですが
一応つかっています。

<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<script src="./js/html5shiv.js"></script>
<script src="./script/respond.min.js"></script>
<![endif]-->

こんなかんじでつかっています。
上に書いてあるIE9.jsについて詳しくは以下サイトからどうぞ。

html5shiv.jsについては以下サイトからどうぞ。

cssで入れとくといいもの

img {
    max-width: 100%;
    height: auto;
    width /***/:auto;　/*IE8のみ適用*/
}

これですね。
あとはPC用のインナーブロック要素とスマホ用のインナーブロック要素を分けるのも
私的には便利かなと思っています。

@media only screen and ( max-width : 768px ) {
    .box_inner {
        padding: 0 20px;
    }
    .box {
        margin-bottom: 20px;
    }
}

@media print, screen and ( min-width : 769px ) {
    .inner{
        width:980px;
        margin:0 auto;
        text-align: center;
    }
    .box {
        margin-bottom: 40px;
    }
}

こんなかんじ。
最近ではpx指定も古いようですが、まだまだ勉強中です。。

アイコンをWebフォントで。

アイコンはWebフォントで表示するようにしています。

Font-Awesomeがおすすめ。

アイコンとはいってもテキストなので、画像が荒れることもありませんし画像を作る手間もないし、
色などもcssで簡単に変更できます。

使い方を説明しているサイトは以下です。

そして、Font Awesomeのアイコン一覧やコード一覧など
検索しやすく、コピーしやすいような機能をつくってくれた方がいますのでそちらのサイトもご紹介。

最後に

最後といってもまだまだあるのですが、基本的にレスポンシブにするときに
自分用につくったものはこんなかんじです。
まだまだこの先どんどん進化していくと思いますがそれはまたそのときに書こうと思います。
きっともっとシンプルだったり、簡単だったり、効率的な書き方があるんだろうなぁ。
ほんと日々勉強ですね！