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

   2017年5月11日

こんにちは。

北海道では三月末に雪が降ったりもしましたが、今ではもうすっかり春です。
空気の匂いがなんだか春だし、雪は解けたしるんるんです。

本日は、レスポンシブサイトを制作するときに気をつけていることをまとめてみました。
最近ではスマホからサイトを閲覧するユーザーも多く、もうレンポンシブサイトは当たり前になってきていますよね。
となると制作依頼もレスポンシブサイト前提になってきます。

レスポンシブサイトを初めてつくったのは2014年ごろで、ちょうど入社1年目のひよっこでした。
そのころ、務めている会社では制作するサイトも今思えばちょっと古くてレスポンシブサイト制作の知識が会社全体で遅れていたような気がします。
プロとして仕事を依頼されているのになんだかんだいい加減なんだな~ってちょっぴりショックを受けた記憶があります。(笑)
それを(?)バネに、どこに出しても恥ずかしくないレスポンシブサイトをつくってやろう!と意気込み、試行錯誤して今に至ります。(笑)
(とはいえ、今回私がご紹介する内容よりも良い方法があると思いますのでそこはご了承ください)

前置きが長くなりましたが、さっそくいってみましょう!

メディアクエリを記述

viewport(ビューポート)タグ

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


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

解説

width=device-width :端末の横幅に合わせる
initial-scale=1 : ユーザによる拡大・縮小の可否(minimum-scaleからmaximum-scaleで指定した範囲)
maximum-scale=1 : 拡大した時の最大値。
user-scalable=no : 拡大・縮小できるようにするかどうか

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

iPhoneでフォームにフォーカスしたときに気をつけること

iphoneではフォームにフォーカスしたときに拡大表示するという機能があります。
一見親切なようで、ちょっと迷惑…。
これをなおしたい場合は
initial-scale=1
に設定していると拡大しません。
user-scalable=no : 拡大・縮小できるようにするかどうか

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

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

・769px以上 → PC
・768px以下 → タブレット・スマホ
・480px以下 → スマホのみ

こんなかんじで表示をわけてます。
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

私がずっと使っているおすすめフレームワーク
「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の詳しい使い方を紹介しているサイトもあります。

超シンプルで簡単なフレームワーク「Responsive Grid System」でレスポンシブWEBサ...
超シンプルなフレームワーク「Responsive Grid System」を使用して簡単にレスポンシブ対応サイトをつくるためのサンプルの解説と注意点をまとめました。
超シンプルフレームワーク「Responsive Grid System」に画像対応などしてレスポン...
前回紹介した超シンプルで簡単にレスポンシブWebサイトが作れるフレームワーク「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について詳しくは以下サイトからどうぞ。

ie9.jsを使うと出来ること、出来なくなること。
最近ie9.jsを活用することが少々あるので、 いまさらながらまとめです。 配布場所 ie7-js デモは 使…

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

HTML5入門 - IE対応「html5shiv.js」の使い方 - Webkaru
HTML5 で作製したサイトを Internet Explorer 8(IE8)以前のバージョンで閲覧すると……レイアウトががっつりくずれます。 これは HTML5 から新たに導入されたタグ aside article header nav section ……などを解釈してくれないからです。 ここでは、これ

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フォントで。

Font Awesome, the iconic font and CSS toolkit

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

Font-Awesomeがおすすめ。

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

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

【完全版】Font Awesomeの使い方 | アイコンをWebフォントで表示
「Font Awesome」の使い方を徹底解説。500種類以上のアイコンWebフォントをCSSだけで簡単に利用できます。「Font Awesome」の使い方では、アイコン表示・サイズ・色・回転アニメーション・角度・反転・複数アイコンを重ねて表示なども詳しく解説しています。

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

Font Awesomeのアイコン一覧と文字コードを簡単に検索できるWebサービスを作った。...
Font AwesomeはさまざまなWebサービスで使われているアイコンフォントで、アイコン一覧も公式サイトで提供..

最後に

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

web tipsの記事