Bootstrapを使ったレスポンシブデザイン

最近フロント寄りのプロジェクトを行うことが多くなり画面サイズ最適化、
いわゆるレスポンジブデザインについて調べることが多くなったので、どんな方法があってどう使えば良いのか整理したくなったのでまとめたいと思います。ほぼほぼメモ。

レスポンシブデザインに対応するには主に、
・HTMLのviewport
・CSSのmedia query
・Bootstrap
・JavaScript ほぼjQuery

その他にも色んな方法があるかと思うのですが、代表的なものはこんな感じだと思います。
上から簡単な例とともに見ていきたいと思います。

・HTMLのviewport
viewportというhtmlの機能を使ってスマホに対応させる方法。

hoge.css




コンテンツ



こんな感じでmetaタグに記述させるだけで、簡単に導入することができます。
width=device-widthこの記述でスクリーンサイズに合わせてねってことになり、
例えば、width=width=500とすると画面幅500px用の表示になります。

initial-scale=1.0は初期表示する際の拡大率。

他にもオプションがあり、
user-scalable=no でピンチ操作を不可能にするオプションがあります。

・CSSのmedia query
cssで対応する方法。お手軽に使えて結構使う機会が多い。

hoge.html 少し紛らわしいところですが、
max-width 画面幅が500px以下はsp.cssを読み込み、
min-width 画面幅が1000px以上はpc.cssが読み込まれるという感じ。
これは余り使ったことがなくて、よく使うのは下記ような方法

hoge.css
@media screen and (min-width: 499px) {
/* 画面サイズ 499pxから適用 */
.content {color: #red;}
}
@media screen and (min-width: 500px) and (max-width: 999px) {
/* 画面サイズ 500pxから999pxまで適用 */
.content {color: #green;}
}
@media screen and (min-width:1000px) {
/* 画面サイズ 1000px以上から適用 */
.content {color: #blue;}
}
こんな感じで切り替えたい画面幅で、好きなようにスタイルを適応させれるのが便利ですね。

・Bootstrap
おなじみの便利フレームワーク。twitter社が生みの親のフレームワークでHTMLのclassに指定の記述をするだけで、レスポンシブ出来てしまう優れもの。

できることが結構あるのですが、代表的な機能はグリッドシステムで、

指定方法 適用画面サイズ
col-lg-num 1024以上
col-md-num 992px以上、1200px未満
col-sm-num 768px以上、992px未満
col-xs-num 768px以下
表のサイズ定義で横幅を12分割し、コンテンツ幅をコントロールできる。

hoge.html

分割のみならず、class=’hidden-xs’でスマホサイズで非表示に、
逆にclass=’visible-xs’で隠していたのを表示することができる。

これがなかなか便利でpcだと長い文言を表示できるけど、スマホだと見づらいなんてときに切り替えができる。

基本情報
観覧履歴

例えば、タブのテキストが長くスマホだと2行になって見栄えが悪くなるときも、
そこをhidden-xsで消してしまえる。

まとめ
上記以外の方法では、jsで動的にサイズを変更するなどですかね。
モーダルの表示位置を中央にしたいときとかに使えますね。

あとは、そもそもそのデバイス専用サイト作って振り分けるなどの方法があるのですが、
あまり今後も使う機会がなさそうなので、省きます。

レスポンシブ対応とは?

レスポンシブ対応されていますか?
2016年5月からモバイルフレンドリーが強化されます。詳細な日付はアナウンスされていませんが、徐々に更新されるとのことです。
これによって、よりスマホでのSEO対策にはレスポンシブ対応が必須となります。

この記事ではモバイルフレンドリーに対応するためのレスポンシブ対応の作り方をすべてご紹介したいと思います。

まず、レスポンシブ対応についてですが、モバイルでサイトを閲覧した場合、今まではPC用のページを表示していました。

しかし、これをひとつのファイルだけでアクセスしてきたデバイスの横幅によってそれぞれのページを表示させるというもので、最大のメリットとしては、ひとつのファイルで運用が可能な点です。

スマホに対応させるという点では、必ずしもレスポンシブ対応でなくてはならない訳ではありません。
スマホ用のページを用意してアクセスしてきたデバイスをjavascriptやhtaccessなどで振り分けて表示させる方法も考えられます。
しかし、この場合の更新にはPC用とスマホ用の作業が発生することになり、スマホ対応にはレスポンシブ対応が広く導入されています。

レスポンシブ対応は、ページの切り替えをCSSで行っており、導入するにはスマホ用のCSSと、必要でしたらタブレット用のCSSを用意する必要があります。

viewport(ビューポート)を設定する
レスポンシブ対応には必須の設定です。
ヘッダーにビューポートというメタタグを設定してページの横幅のサイズを指定してレンダリングします。主にアクセスしたデバイスの横幅に合わせるためにwidth=device-widthを指定します。



ビューポートではこの他に、user-scalable=yes(またはno)によってズームを許可する・しないなどの設定もできます。
ページのデザインや操作性などを考慮して指定しましょう。

cssでメディアクエリを指定する
メディアクエリとは、アクセスしてきたデバイスの横幅によって読み込むcssを変えるためのものです。これによってスマホでの表示を変えることができます。

また、モバイルフレンドリーはスマホに関するアップデートなので、タブレットまで必要無ければPCとスマホのみのブレイクポイントを指定します。
例:375px以下はスマホ用とする(この数字がブレイクポイントです)

ブレイクポイントは、主要なスマホサイズを横にした時などを考慮して決めて下さい。

iPhone 5s 320px x 568px
iPhone 6 375px x 667px
例えば以下の設定だと、横幅が375px以下はスマホ用、376pxから960pxまでがタブレット用、それ以上がPC用のcssを読み込む設定となります。

@media screen and (min-width:961px) {
/*pc用のcssを記述*/
}

@media only screen and (min-width:376px) and (max-width:960px) {
/*tablet用のcssを記述*/
}

@media screen and (max-width:375px) {
/*スマホ用のcssを記述*/
}
レスポンシブ対応の作り方はビューポートとメディアクエリの2点で準備が整います。
後は、実際に表示してみてはみ出してしまった画像などの横幅をスマホ用cssで調整していきます。

あなたの対策ページはどのクエリタイプ?「Do-Know-Go」アシスト窓口で無料診断中!
スマホ表示の画像サイズを可変にする
レスポンシブ対応ではデバイスによってcssを振り分けるだけなので、画像は主に流用することになります。
実際にスマホ表示してみると画像がデバイスの横幅より大きい場合は、はみ出して横スクロールが出てしまいます。これを調整するためには、スマホ用のcssにデバイスの横幅サイズで可変する指定をします。

img {max-width:100%; width /***/:auto; /*IE8用ハック*/} /*画像サイズが横幅に合わせて可変します*/
これによってスマホで閲覧した時に画像がデバイスサイズに可変され、見やすくなります。
この他にも、横幅を指定しているクラスなどはスマホ用cssの方でautoなどにして調整しましょう。
※IE8で横幅だけがデバイスサイズになるバグに対してハックを追加しています。

デバイスによって画像を切り替えたい場合
場合によってはスマホでは表示させたくないコンテンツやPCとは別の画像を出したい時があります。
こういった場合は、アクセスしてきたデバイスによって表示・非表示を指定して調整します。

<div class=”sp_contents”><img src=”/img/example_01.gif”></div>
<div class=”pc_contents”><img src=”/img/example_02.gif”></div>

@media screen and (min-width:376px) {
.sp_contents {display:none;} /*横幅376px以上では表示しない*/
}

@media screen and (max-width:375px) {
.pc_contents {display:none;} /*横幅375px以下では表示しない*/
}

ただし、このdisplay:none;は多用しないようにしましょう。
なぜならcssで画像やコンテンツを非表示にしているだけで、実際には読み込んでいるため表示速度が落ちる可能性があるからです。

もし画像の表示・非表示を多用するのであれば、デバイスの横幅によって読み込む画像が差し替わるjQueryが数多くありますので、そちらを使ってみると良いでしょう。

メニューの切り替え
PCとスマホではグローバルメニューが異なる場合が多いかと思います。
このような場合も、cssの表示・非表示でデバイスごとに切り替え、タップするとプルダウンでメニューが表示されるjQueryが多く公開されていますので、使いやすいものを探してみてください。

レスポンシブ対応の作り方まとめ
レスポンシブ対応の作り方は今回のような手順で行えば、それほど難しいものではありません。ぜひ、対応してみてください。
さらに、Googleは以下のような理由からレスポンシブ対応を推奨しています。

コンテンツの管理がしやすい
リダイレクトの必要がない
クローラーの巡回が1度で済む
スマホでの順位を落とさないために、ユーザーの使いやすさも考慮したレスポンシブ対応でモバイルフレンドリーに対応していきましょう。

最後に、一度アナリティクスで訪問しているデバイスを確認してみてください。
もしスマホからのトラフィックが多く、重要なページにスマホ対応ラベルが付いていないページがあれば早めの対応をおすすめします。
(すでにレスポンシブ対応でモバイルフレンドリーに対応しているサイトは今回のアップデートには影響ありません)

レスポンシブ対応はもはや、SEO対策に欠かせない対策のひとつとなっています。
導入の際は、必ずバックアップをとってスマホ対応に備えましょう。