こんにちは。
北海道では三月末に雪が降ったりもしましたが、今ではもうすっかり春です。
空気の匂いがなんだか春だし、雪は解けたしるんるんです。
本日は、レスポンシブサイトを制作するときに気をつけていることをまとめてみました。
最近ではスマホからサイトを閲覧するユーザーも多く、もうレンポンシブサイトは当たり前になってきていますよね。
となると制作依頼もレスポンシブサイト前提になってきます。
レスポンシブサイトを初めてつくったのは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の読込を画面サイズによって変える
まずは、ブレイクポイントを決めます。
私はいつもタブレットサイズからスマホ表示切り替えるようにしています。
・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」
これは超シンプルで余計なものはなにもなく使いやすいです。
レスポンシブ系のフレームワークはたっくさんありますが、
使用しない記述が多すぎたり機能が入りすぎていたりして
私にとっては難解に思えてしまうものばかりでした。
これは考え方もとってもシンプルでおすすめです。
とっても使いやすいですが、配布されているままでは少し落とし穴が…。
先ほど書いた印刷のときの設定が書かれていないのです。
なので、使うときは印刷用なのかそうじゃないのか振り分けてくださいね。
あとは、自分用にカスタマイズしていくとどんどん使いやすくなっていくと思います。
私は、以下をレスポンシブ用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の詳しい使い方を紹介しているサイトもあります。
http://www.html5-memo.com/webtips/responsive-grid-system01/
http://www.html5-memo.com/webtips/responsive-grid-system02/
必要なファイルは、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について詳しくは以下サイトからどうぞ。
https://torounit.com/blog/2011/06/07/793/
html5shiv.jsについては以下サイトからどうぞ。
http://webkaru.net/html5/ie-html5shiv/
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で簡単に変更できます。
使い方を説明しているサイトは以下です。
http://www.bokuichi.net/itweb/html/font-awasome.php
そして、Font Awesomeのアイコン一覧やコード一覧など
検索しやすく、コピーしやすいような機能をつくってくれた方がいますのでそちらのサイトもご紹介。
最後に
最後といってもまだまだあるのですが、基本的にレスポンシブにするときに
自分用につくったものはこんなかんじです。
まだまだこの先どんどん進化していくと思いますがそれはまたそのときに書こうと思います。
きっともっとシンプルだったり、簡単だったり、効率的な書き方があるんだろうなぁ。
ほんと日々勉強ですね！
