レスポンシブデザインことはじめ: I Found It!

2016/10/05

レスポンシブデザインことはじめ

スマホ版とPC版を統合する手順を数回に分けて紹介しています。
（これまでの記事）
スマホ版とPC版を統合するメリット・デメリット

今回はまずレスポンシブデザインを簡単に実現できるフレームワーク、Bootstrapを適用します。これによりレスポンシブ化に便利なクラスが色々使えるようになるので、これを使ってブログの記事ひとつひとつを修正して、最終的にはPCで画面をスマホ並みに小さくしても横スクロールが表示されないところまで変更します。画面が小さくなるとサイドバーを非表示にする変更も一緒に行います。

Bootstrapの適用

まず公式ページのBasic Template を参考に参照を追加します。
Bootstrap公式

「デザイン > html」からhtmlを編集します。htmlを初めて追加する場合は適当な名前で新しくhtmlを追加して、そちらを編集してください。
まず、headのcharset指定の次の行に

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

を追加してください。これはIEのレンダリングモードの指定で、前回表示時に互換表示を選択されていてもちゃんと最新のIEで表示してね、みたいな指定です。Basic Templateではviewportの指定もしていますが、現時点ではこれはあえて指定しないでおきます。（これを指定するとスマホ版からPC表示された時に縮小表示されなくなって大変なことになります。ある程度レスポンシブ化を進めてから変えます。）
次にBootstrapのcssへの参照を追加します。これもheadに追加しますが、cssでカスタマイズできるように、カスタマイズ用のcssより前に追加します。

    <!-- 追加ここから -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <!-- 追加ここまで -->
    <link rel="stylesheet" href="<% site_info.blog_url %>/_common/css/layout.css" type="text/css">
    <link rel="stylesheet" href="<% site_info.blog_url %>/_common/css/user-common.css" type="text/css">

Bootstrapの参照と一緒にIE8以下に対応するためのスクリプトを必要に応じて読み込むような指定になっています。最後にBootstrapのjavascriptを読み込みます。これは今回のステップでは必要ないのですが、次回設置するグローバルメニューなどで必要になります。Bootstrapの適用ということで、ここでやってしまいましょう。一緒にBootstrapが使用しているjQueryというライブラリも読み込みます。headで読み込むこともできますが、できるだけ後ろの方で読み込んだ方が表示速度が速いので、bodyタグを閉じる直前に追加します。（既に他の用途でjQueryの参照を追加している場合は追加は不要ですが、Bootstrapの読み込みが後ろになるようにしてください。）

    <!-- 追加ここから -->
    <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <!-- 追加ここまで -->
</body>

これで無事、Bootstrapの適用が終わりました。

コンテンツサイズとタイトルの調整

まず自分のブログをPCで表示して、ウィンドウの幅を小さくしてみてください。containerのサイズを変更していない方はある幅(1000px)以下になると下に横スクロールバーが表示されると思います。これを幅が小さくなるにつれて、記事の部分が狭くなるように変更していきます。まずは以下の記事で紹介している方法を参考に、ウィンドウサイズ変更に合わせて記事が狭くなるように変更してください。
左右の余白をなくす
ウィンドウサイズを小さくすることで、ヘッダー（タイトルやブログ説明の部分）の表示が崩れることがあると思います。これは上記の記事でも紹介したメディアクエリを使って修正します。メディアクエリで指定する画面サイズ（幅）をブレークポイントと言いますが、筆者はBootstrapを使用する場合、このブレークポイントをBootstrapに合わせるようにしています。
Bootstrapでは現在のバージョンでは次のように画面サイズを分類しています。

xs （~767px）
sm （768~991px）
md （992~1199px）
lg（1200px~）

これを基準に、表示非表示を切り替えたり、レイアウトを変更するクラスが色々用意されているわけです。例えば「hidden-xs」というクラスを指定すれば、xsサイズでは表示されなくなります。ブレイクポイントが多いとウィンドウサイズを変更した時にバタバタとレイアウトが変わることになります。
このブログの場合はタイトルのフォントサイズが大きすぎて画面を小さくすると折り返しが発生してレイアウトが崩れてしまっていたので、xs,smサイズではフォントを小さくするメディアクエリを使っています。筆者の場合は同じブレイクポイントで右サイドバーを非表示にしています。この時同時に「余白をなくす」の記事にあるように、サイドバー表示のために大きくした余白を元に戻す必要があります。
この場合

@media screen and (max-width: 991px) {
    #header>h1 a { 
        font-size: 60px; 
    }
    #sideBoxRight {
	    display:none;
    }
    #content{
        margin-right:20px;/*右サイドバーの幅を差し引い値*/
    }
}

と書くことができます。（PC表示ベースで変更してるのでデスクトップファースト方式にしてます。）メディアクエリは

@media (min-width: 768px) and (max-width: 991px) {
    /*smサイズの時のスタイル*/
}

のように、サイズ範囲を指定することもできます。
Updated at 2016/10/28 現在はBootstrapのグリッドシステムをメインレイアウトに採用したためこれらの方法は使用していません。手順や調整の複雑さを考えるとグリッドシステムを使った方が簡単かもしれません。グリッドシステムの適用方法は下記の記事で紹介しています。
メインレイアウトにグリッドシステムを採用する方法

こうしたメディアクエリ等を使ってウィンドウサイズを小さくしてもヘッダーが崩れないように調整してください。さきほど紹介した「hidden-xs」や「hidden-sm」を使って、小さくなったらブログ説明は非表示にしてしまう、というのも手です。

記事の調整

記事の数が多い方はこれが一番大変かも知れません。一つ一つの記事を表示して、スマホ程度の幅にした時に横スクロールバーが出ないように調整していきます。文字ばかりの記事では問題ないと思いますが、画像の表示がおさまりきれずにスクロールバーが出るのではないでしょうか。このような場合に備えてBootstrapでは画像幅が表示エリアを超えそうになると縮小表示される「img-responsive」というクラスが用意されてますが、変更量が膨大と思うので…すべての画像がそうなるよう、cssの記述を追加します。（この画面で表示幅を狭くして実際に見ていただくとわかりやすいと思います。）大きくして見てもらう必要がある画像はリンクにしましょう。

img{
  max-width: 100%;
  height: auto;
}

大きいサイズでサイズ指定していない限りはだいたいこれで対応できると思います。
画像以外にスクロールバーが表示されるとしたら…テーブルなどでしょうか？ブログでテーブルを表示させている方はなかなかいないとは思いますが…。ひとまず

<div style="overflow-x:scroll"></div>

で囲むなどしておきましょう。テーブルの場合はBootstrapではレスポンシブなテーブルにするための「table-responsive」というのが用意されているのでPC版に完全移行できたらそちらを使ってみてもいいと思います。

今日のステップはここまでです。ここまでくれば後はグローバルメニューを追加して常にPC版が表示されるように設定するだけです。ということで、次回はBootstrapを使って簡単にレスポンシブなメニューを追加する方法を紹介したいと思います。