概要説明

レスポンシブは、メディアクエリという画面環境によって適用するCSSを切り替える機能を使って行います。

このメディアクエリは特に指定サイズはなく、好きな画面サイズで指定できます。
新しいiPhoneが発売されたりすると、画面サイズが変わったりするので逐一チェックするといいでしょう。

今回は以下サイズでレスポンシブ化してきたいと思います。
タブレット：@media screen and (max-width: 1024px)
スマホ：@media screen and (max-width: 660px)

フォルダ階層
styles.cssと同じ階層にresponsive.cssを作成します。

完成物

タブレット

スマホ

ブラウザでの確認の仕方

単に画面を拡大、縮小させて確認してももちろん問題ないですが、ブラウザには各端末のサイズで確認できる便利な機能があります。

Chrome
右クリックで検証を選択します。

検証画面の左上のアイコンをクリックすると、iPhoneやiPad、Androidの端末サイズでの表示を確認できます。

Safari
Safariでは、メニューバーの開発からレスポンシブ・デザインモードを選択すると同じく各端末サイズでの表示を確認できます。

※Android端末サイズがないため、レスポンシブを確認したい場合はChromeで確認すると良いでしょう。

下準備

responsive.cssを作ったら、メディアクエリを指定する文言を書いておきます。
そして、styles.css同様head内にCSSを読み込みさせる記述をします。

inedx.html

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">

            <title>SQUARE, inc.</title>

            <link rel="icon" href="favicon.ico">

            <!-- css -->
            <link rel="stylesheet" href="styles.css">
+           <link rel="stylesheet" href="responsive.css">
        </head>

page.html

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">

            <title>記事タイトル | SQUARE, inc.</title>

            <link rel="icon" href="favicon.ico">

            <!-- css -->
            <link rel="stylesheet" href="styles.css">
+           <link rel="stylesheet" href="responsive.css">
        </head>

responsive.css

/* タブレット用 */
@media screen and (max-width: 1024px) {
/*ここにタブレットの時のCSS*/
}

/* スマホ用 */
@media screen and (max-width: 660px) {
/*ここにスマホの時のCSS*/
}

タブレットサイズのCSS

styles.cssの時に幅サイズは%で指定しているので、そこまでレイアウト崩れはないですが、wrapperの幅が窮屈に感じるので、ここだけもう少し広くします。

responsive.css

/* タブレット用 */
@media screen and (max-width: 1024px) {
/* 共通CSS */
    .wrapper {
        width: 80%;
    }
}

スマホサイズのCSS

スマホサイズで見てみるとメニューリストが入りきっていなかったり、wrapperもかなり窮屈になってしまっています。

また、スマホサイトでよく見るヘッダー部分のアイコンをタップするとメニューが出てくる（ハンバーガーメニュー）を作りたいと思います。

共通CSS

文字サイズや幅を変更していきます。

responsive.css

/* スマホ用 */
@media screen and (max-width: 660px) {
    /* 共通CSS */
    h2 {
        font-size: 30px;
    }

    h3 {
        font-size: 25px;
    }

    h4 {
        font-size: 14px;
    }

    a, p, th, td {
        font-size: 13px;
    }

    .wrapper {
        width: 90%;
    }
}

ヘッダー

ここでハンバーガーメニューを作っていきます。
動的なハンバーガーメニューはjQueryを使います。

jQueryの読み込みは、GoogleのCDNを使って読み込みます。
最新バージョンなどライブラリの情報はgoogle Developersで確認できます。

やること

ハンバーガーメニューのボタンを作る
タップしたらメニューが開くようにする

仕組み
PC/タブレットサイズのメニュー(pc-menu)とスマホ用のメニュー(sp-menu)をそれぞれ作り、メディアクエリに応じて、それぞれを表示、非表示させるというやり方で作ります。

inedx.html

        <body>
            <header>
               <div class="container">
                    <div class="header-logo">
                        <h1><a href="index.html"><img src="img/square_logo.png" id="logo"></a></h1>
                    </div>

+                   <!-- ハンバーガーメニューボタン -->
+                   <div class="toggle">
+                       <div>
+                           <span></span>
+                           <span></span>
+                           <span></span>
+                       </div>
+                   </div>

+                   <nav class="sp-menu menu">
+                       <ul>
+                           <li><a href="index.html#service">サービス</a></li>
+                           <li><a href="index.html#news">お知らせ</a></li>
+                           <li><a href="index.html#about">会社概要</a></li>
+                       </ul>
+                   </nav>

+                   <nav class="pc-menu menu-left menu">
                        <ul>
                            <li><a href="index.html#service">サービス</a></li>
                            <li><a href="index.html#news">お知らせ</a></li>
                            <li><a href="index.html#about">会社概要</a></li>
                        </ul>
                    </nav>
                </div>
            </header> 

            〜〜省略〜〜 
    　　
            </footer>

+           <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+           <script>
+               $(function(){
+  　　　　    // ハンバーガーメニューの動作
+                   $('.toggle').click(function(){
+                       $("header").toggleClass('open');
+                       $(".sp-menu").slideToggle(500);
+                   });    
+               });        
+           </script>

        </body>
    </html>

記事ページも同様

page.html

        <body>
           <header>
               <div class="container">
                    <div class="header-logo">
                        <h1><a href="index.html"><img src="img/square_logo.png" id="logo"></a></h1>
                    </div>

+                   <!-- ハンバーガーメニューボタン -->
+                   <div class="toggle">
+                       <div>
+                           <span></span>
+                           <span></span>
+                           <span></span>
+                       </div>
+                   </div>

+                   <nav class="sp-menu menu">
+                       <ul>
+                           <li><a href="index.html#service">サービス</a></li>
+                           <li><a href="index.html#news">お知らせ</a></li>
+                           <li><a href="index.html#about">会社概要</a></li>
+                       </ul>
+                   </nav>

+                   <nav class="pc-menu menu-left menu">
                        <ul>
                            <li><a href="index.html#service">サービス</a></li>
                            <li><a href="index.html#news">お知らせ</a></li>
                            <li><a href="index.html#about">会社概要</a></li>
                        </ul>
                    </nav>
                </div>
            </header> 

            〜〜省略〜〜 
    　　
            </footer>

+           <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+           <script>
+               $(function(){
+  　　　　    // ハンバーガーメニューの動作
+                   $('.toggle').click(function(){
+                               $("header").toggleClass('open');
+                       $(".sp-menu").slideToggle(500);
+                   });    
+               });        
+           </script>

        </body>
    </html>

styles.css

/* header */
header {
    height: 60px;
    background-color: #4c586f;
    position: fixed;
    z-index: 1; 
    width: 100%;
}

+    /* スマホ用メニューを非表示 */
+    .sp-menu {
+        display: none;
+    }

responsive.css

    /* 共通CSS */

    ~~

    /* header */
    /* PC用メニューを非表示 */
    .pc-menu {
        display: none;
    }

    /* スマホ用メニュー表示 */
    .sp-menu {
        margin: 0 auto;
        width: 90%;
        position: absolute;
        top: 60px;
        width: 100%;
        background: rgba(76, 88, 111, .8);
        left: 0;
    }

    .sp-menu ul li{
        margin: 0 auto;
        text-align: center;
    }

    /* メニューボタン */
    .toggle {
        display: block;
        width: 35px;
        height: 30px;
        position: relative;
        top: 18px;
        z-index: 2;
        float: right;
    }

    .toggle:hover {
        cursor: pointer;
    }

    .toggle span{
        display: block;
        height: 3px;
        background: #fff;
        position:absolute;
        width: 100%;
        left: 0;
        -webkit-transition: 0.5s ease-in-out;
        -moz-transition: 0.5s ease-in-out;
        transition: 0.5s ease-in-out;   
    }
    .toggle span:nth-child(1){
        top:0px;
    }
    .toggle span:nth-child(2){
        top:12px;
    }
    .toggle span:nth-child(3){
        top:24px;
    }

ブラウザで確認

画面を小さくしていくと、メニューバーにアイコンが表示され、タップするとメニューが開くようになるかと思います。

TOP画像

トップ画像はスマホサイズになると、画像が大きすぎるので少し縦幅を変えたいと思います。

responsive.css

    /* メニューボタン */
    ~~

    /* top-img */
    .top-img {
        height: 350px;
    }

    .top-text {
        transform: translate(-50%, -40%);
    }

お知らせ

お知らせ記事もスマホの時は画面いっぱいでもいいかと思うので、横幅を変更します。

responsive.css

    /* top-img */
    ~~

    /* news */
    .news-list{
        width: 100%;
    }

会社概要

テーブルが窮屈になり、見にくいので見出しとテキストを交互に配置するように変更します。

responsive.css

    /* news */
    ~~

    /* about */   
    .about-table th, td {
        width: 100%;
        display: block;
    }

完成

これで、完成です。
最後に全体をブラウザで確認してみましょう。
完成物のようなデザインになっているかと思います。

次回はお問合せフォームを設置します。

コード

https://github.com/bluecode-io/web-basic/tree/basic1-2

1-2 : レスポンシブ対応

概要説明

完成物

ブラウザでの確認の仕方

下準備

タブレットサイズのCSS

スマホサイズのCSS

共通CSS

ヘッダー

ブラウザで確認

TOP画像

お知らせ

会社概要

完成

コード

カテゴリー

キーワードリンク

関連リンク

目次