レスポンシブ Web
更新: 2022/9/14
　スマートフォンなどの普及で電子機器端末の画面サイズの多様化が進みました。それに伴って PC 画面を対象としていた Webサイトは、何れの端末でも見やすく作る必要性が生じています。
　その具体的な対応方法としては、
　　1. それぞれのサイズに合った複数のページを作って置き、表示する端末のサイズ情報により切り替えて表示する。
　　2. 一枚のページを、それぞれの端末サイズに合わせてその表示方法を自動的変えるように作る。
などの方法が考えられます。
　後者では更に、「JavaScript」などのプログラムによる方法と、「CSS3」による方法 (レスポンシブWebデザイン) が考えられます。
　ここでは、後者のレスポンシブ Webデザインについてみてみます。

■ レスポンシブ Webページ

　「レスポンシブWebデザイン」は、文章構造化された HTML 5 ページに、CSS 3 の メディアクエリ を使って行います。先ずは具体例で見てみます。
　以下の例は、PC用には行方向に並べた枠を、表示要素の幅が 400px以下の表示枠では列方向に並べるようにし、合わせて３番目の項目を先頭にするようにしています。

リスト

  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4.   <meta charset="utf-8" />
  5.   <meta name="viewport" content="width=device-width,initial-scale=1.0">
  6.   <title>レスポンシブ Webページ</title>
  7.   <style>
  8.       .samp-flex { 
  9.         width:98%; margin:0 auto; padding:2px;
  10.         background:#eee; text-align:center;
  11.         display:flex;
  12.         flex-flow:row wrap;
  13.       }
  14.       .samp-item { 
  15.         width:80px; margin:5px; padding:5px;
  16.         background:#9e9; border-radius:5px;
  17.       }
  18.       .samp-item:nth-child(3) { background:#99e; }
  19.       /* 以下でレスポンシブ適用 */
  20.       @media screen and (max-width:400px){ 
  21.         .samp-flex { width:150px; flex-direction: column; }
  22.         .samp-item:nth-child(3) { order: -1; }
  23.       }
  24.   </style>
  25. </head>
  26. <body>
  27.   <div class="samp-flex">
  28.     <div class="samp-item">1</div>
  29.     <div class="samp-item">2</div>
  30.     <div class="samp-item">3</div>
  31.     <div class="samp-item">4</div>
  32.     <div class="samp-item">5</div>
  33.     <div class="samp-item">6</div>
  34.     <div class="samp-item">7</div>
  35.   </div>
  36. </body>
  37. </html>

解説

　この例は、表示要素の幅が 400px以下とそれ以上の場合とで切り替えています
( 1行目)　このレスポンシブ Webページは、HTML5 上で展開します
( 8行目)　class=samp-flex のブロック内をフレックスコンテナとして使うこととします。参考
(11行目)　そのためこのブロックをフレックスコンテナとすることを、display:flex; と記述します
(12行目)　このフレックスアイテムは行方向に並べ、領域内で折り返しをすることを、flex-flow:row wrap; と記述します
(14行目)　.samp-item がこの場合のフレックスアイテムです
(18行目)　.samp-item の 3番目の背景色を #99eにしました
(20行目)　表示要素の幅が 400px以下の場合の CSS を指定します
(21行目)　表示幅が 400px以下の場合、コンテナの幅を 150px とし、フレックスアイテムは列方向に並べるよう指定しました
(22行目)　表示幅が 400px以下の場合、.samp-item の 3番目を最初に配置するようにしました

表示-幅広時

表示-幅狭時

■ レスポンシブ Webページの作成

　以上で見たように「レスポンシブ Webページ」は、文章構造化されたページに、CSS の メディアクエリ を使って条件に応じて表示を変えます。
　その基本的なステップの概要とその参考サイトを下記に示します。
  1. レスポンシブの設計 適用する条件や、対象要素のレイアウトを設計します
  2. ブレークポイントの決定 CSSファイルを切り替え条件(表示幅値など)を決めます
  3. 文章を構造化する(CSSを適用しやすいように、文章等を構造化します)
  4. メディアクエリでCSSを切替 (メディアタイプに応じて適したスタイルシートを適用する)
  5. viewportの設定 viewportとは 　Webデザイン 　viewport 設定 　ちゃんと理解する

■ レスポンシブ Web 関連リファレンス

■ レスポンシブ Webページの例

　以上の知識を基に、各条件を設定してサンプルを作ってみました
  1. 基本構想････････････････････ 画面サイズによりナビゲーション表示を切り替えることとします
  2. レスポンシブの設計･･････････ 適用する条件や、対象要素のレイアウトを設計します
  3. ブレークポイント･･･････････  切り替え条件(表示幅)を、768px とします
  4. viewportの設定･････････････ デバイス幅 に合わせ、初期ズーム倍率を１に指定
  5. 仕上げ･････････････････････  具体的条件や、要素に合わせてレイアウトを調整します

    リスト

    1. <!DOCTYPE html>
    2. <html lang="ja">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.   <title>Sample</title>
    7.   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    8.   
    9.   <style>
    10.     body,ul,li { margin: 0; padding: 0; background:#ffe; }
    11.     ol, ul{ list-style:none; }
    12.       header { color:#ccc; padding:6px; }
    13.       #title { color:#900; min-height:40px; font-family:Comic Sans MS;
    14.            font-size:36px; font-weight:bold; text-align:center; }
    15.     .gnav-wrap{ box-sizing:border-box; position:fixed; top:0; width:100%; height:100px; background:#ffe; margin: 0 auto; }
    16.     .gnav-btn { position:absolute; width:36px; height:30px; top:29px; left:3px; color:#333;
    17.             line-height:32px; border-radius:4px; text-align:center; cursor:pointer;
    18.             background:#4d8; font-size:28px; border:1px solid #fff; z-index:10; }
    19.     .gnav-btn:hover{background:#4b8;}
    20.     .highlight{color:#ffe;}
    21.     .gnav { width:300px; z-index: 99; margin:0; padding:0; }
    22.     .gnav ul{ padding-left:20px; }
    23.     .gnav li { width:300px; padding:0px; background:transparent; border-radius:8px; }
    24.     .gnav li a{ display:block; font-size:18px; color:#fff; text-decoration:none;
    25.           background:#4b8; height:28px;
    26.           margin:0px auto; padding:0px 3px 0; border-radius:8px; border:1px solid #fff; }
    27.     .gnav a img { margin:0 auto; width:100%; height:27px; }
    28.     .wrapper { box-sizing:border-box; padding:0 5px; margin:100px auto 0; }
    29.     .gridWrap{ display:flex; flex-flow:row wrap; }
    30.     .gridWrap article{ flex:1; padding:5px; width:100%; background:#fef; }
    31.     .gridWrap .box{ width:100%; background:#eff; text-align:center; }
    32.     .gridWrap img{ width:150px; height:100px; }
    33.     .gridWrap p{ text-align:left; }
    34.     /* --- menu  *** PC用 -------------------------------- */
    35.     @media only screen and (min-width:768px){
    36.       .wrapper { width:800px; }
    37.       .gnav-btn { display:none; }
    38.       .gnav { width:760px; display:flex; margin:0 auto; }
    39.       .gnav li{ flex:1; position:relative; }
    40.       .gnav li a{ font-size:16px; padding:3px 0 0 5px; height:26px; }
    41.       .gnav li a img { transform: translate(-2px,-2px); height:27px; }
    42.       .gnav li ul { position:absolute; top:100%; width:100%; margin:1px 0 0 0; padding:0px; }
    43.       .gnav li ul li { overflow:hidden; width:100%; height:0; color:#ffe; transition:0.4s; }
    44.       .gnav li:hover>ul>li{ overflow:visible; height:29px; z-index:2; }
    45.       .gnav li ul li ul { top:0; left:100%;}
    46.       .gnav li:hover > a { background:#30b9ba; }
    47.       .gnav li:hover li > a {  background:#30b9ba; }
    48.       .gnav li:hover li:hover > a { background:#80b9ba; }
    49.       .gnav>li:last-child>ul>li>ul {left: -100%; width: 100%;}
    50.       .gnav>li:nth-last-child(2) ul li ul {left: -100%; width: 100%;}
    51.       .gnav li ul li ul:before {
    52.              position:absolute; content: ""; top:6px; left:-12px; width: 0;
    53.              height: 0; border: 8px solid transparent; border-left-color: #eee; }
    54.       .gnav>li:last-child ul li ul:before, ul.gnav>li:nth-last-child(2) ul li ul:before {
    55.              position: absolute; content: ""; top:6px; left:198%; margin-left: -20px;
    56.              border: 8px solid transparent; border-right-color:#eee; }
    57.     }
    58.    /* パッド以下用 --------------------------------*/
    59.    @media only screen and (max-width:767px){
    60.        .wrapper { margin-top:70px; }
    61.        .gnav-wrap{ height:70px; }
    62.        .gnav { display:none; padding:0px; }
    63.        .gnav>li { width:90%; padding:0px; background:transparent; border-radius:8px; }
    64.        .gnav li li>a:before { content:"･"; }
    65.        .gnav li li li>a:before { content:"･･"; }
    66.        .gnav li:hover> a { background:#80b9ba; }
    67.        .gridWrap .box{ width:160px; }
    68.     }
    69.   </style>
    70.   <script>
    71.     $(function() {
    72.       $('.gnav-btn').on('click', function() {
    73.         $(".gnav").slideToggle();
    74.           $(this).toggleClass("highlight");
    75.       }); 
    76.     });
    77.   </script>
    78. </head>
    79. <body>
    80.   <div class="gnav-wrap">
    81.     <header>
    82.         <div class="gnav-btn" id="gnav-btn" title="メニューボタン">☰</div>
    83.         <div id="title">web sample</div>
    84.     </header>
    85.     <nav class="toggle">
    86.       <ul class="gnav">
    87.             <li><a href="https://kurage.ready.jp/index.html" title='top page'><img src='./LOyuki14.gif'></a>
    88.               <ul class="gnav-ul">
    89.                 <li><a href="../../../it14/it14.html">it入門</a></li>
    90.                 <li><a href="../../../micro/micro.html">マイクロ波回路</a>
    91.                   <ul>
    92.                     <li><a href="../../../micro/ckt.html">マイクロ波回路</a></li>
    93.                     <li><a href="../../../micro/bunpu.html">分布定数回路</a></li>
    94.                     <li><a href="../../../micro/spara.html">Ｓパラメータ</a></li>
    95.                     <li><a href="../../../micro/wave.html">波動アニメ</a></li>
    96.                   </ul>
    97.                 </li>
    98.                 <li><a href="../../../jhp_g/smaph/smUse.html">格安スマホ</a>
    99.                       <ul>
    100.                         <li><a href="../../../jhp_g/smaph/smPage.html">スマホ用ページ</a></li>
    101.                         <li><a href="../../../jhp_g/smaph/gai-sim.html">海外で使う</a></li>
    102.                         <li><a href="../../../jhp_g/smaph/battery.html">スマホの電池</a></li>
    103.                       </ul>
    104.                 </li>
    105.                 <li><a href="../../../keitsui/keitsui.html">神経根症</a></li>
    106.                 <li><a href="../../../implant/implant.html">インプラント</a></li>
    107.               </ul>
    108.             </li>
    109.             <li><a href="sample.html">海外旅行記</a>
    110.               <ul class="gnav-ul">
    111.                 <li><a href="../../../jsisen/jsisen.html">中国四川省</a>
    112.                   <ul>
    113.                     <li><a href="../../../jsisen/jkyusai/jkyusai.html">九寨溝</a></li>
    114.                     <li><a href="../../../jsisen/jkouryu/jkouryu.html">黄龍</a></li>
    115.                     <li><a href="../../../jsisen/jpanda/jpanda.html">パンダセンター</a></li>
    116.                   </ul>
    117.                 </li>
    118.                 <li><a href="../../../jkeirin/jkeirin.html">桂林・張家界</a>
    119.                   <ul>
    120.                     <li><a href="../../../jkeirin/jrikou/jrikou.html">漓江下り</a></li>
    121.                     <li><a href="../../../jkeirin/jchokakai/jchokakai.html">張家界</a></li>
    122.                   </ul>
    123.                 </li>
    124.                 <li><a href="../../../jrocky/canadaw.html">カナダ西部</a>
    125.                   <ul>
    126.                     <li><a href="../../../jrocky/rocky.html">カナダロッキー</a></li>
    127.                   </ul>
    128.                 </li>
    129.                 <li><a href="../../../jsafrc/jsafrc.html">南部アフリカ</a>
    130.                   <ul>
    131.                     <li><a href="../../../jsafrc/victoria.html">ビクトリア滝</a></li>
    132.                     <li><a href="../../../jsafrc/chobe-PK.html">チョベ国立公園</a></li>
    133.                   </ul>
    134.                 </li>
    135.                 <li><a href="../../../je_asia/e_asia.html">東南アジア</a>
    136.                   <ul>
    137.                     <li><a href="../../../je_asia/angkor1.html">アンコールワット</a></li>
    138.                     <li><a href="../../../je_asia/hanoi.html">ハノイ</a></li>
    139.                   </ul>
    140.                 </li>
    141.                 <li><a href="../../../indnesa/indnesa.html">インドネシア</a>
    142.                   <ul>
    143.                     <li><a href="../../../indnesa/jogj.html">ジャワ島</a></li>
    144.                     <li><a href="../../../indnesa/bali.html">バリ島</a></li>
    145.                   </ul>
    146.                 </li>
    147.                 <li><a href="../../../jneuro/jneuro.html">北欧旅行</a>
    148.                   <ul>
    149.                     <li><a href="../../../jneuro/norway.html">ノルウェー</a>
    150.                       <ul>
    151.                         <li><a href="../../../jneuro/fjord.html">フィヨルド</a></li>
    152.                       </ul>
    153.                     </li>
    154.                     <li><a href="../../../jneuro/denmark.html">デンマーク</a></li>
    155.                   </ul>
    156.                 </li>
    157.                 <li><a href="../../../india/india.html">インド</a>
    158.                   <ul>
    159.                     <li><a href="../../../india/delhi.html">デリー</a></li>
    160.                     <li><a href="../../../india/vara.html">ワラナシー</a></li>
    161.                     <li><a href="../../../india/agra.html">アグラ</a></li>
    162.                     <li><a href="../../../india/jaipur.html">ジャイプール</a></li>
    163.                   </ul>
    164.                 </li>
    165.                 <li><a href="../../../jnzld/jnzld.html">ニュージーランド</a></li>
    166.               </ul>
    167.             </li>
    168.             <li><a href="sample.html">国内旅行記</a>
    169.               <ul class="gnav-ul">
    170.                 <li><a href="../../../jhokkai/jhokkai.html">北海道</a>
    171.                   <ul>
    172.                     <li><a href="../../../jtaisetu/taisetu.html">紅葉の大雪山</a>
    173.                       <ul>
    174.                         <li><a href="../../../jtaisetu/taisetu.html#jiki">紅葉の推移</a></li>
    175.                         <li><a href="../../../jtaisetu/taisetu.html#nen">旭岳の一年</a></li>
    176.                       </ul>
    177.                     </li>
    178.                     <li><a href="../../../jrisiri/risiri.html">利尻・礼文</a></li>
    179.                   </ul>
    180.                 </li>
    181.                 <li><a href="../../../jfuji/fuji.html#fuji">富士山</a></li>
    182.                 <li><a href="../../../jkouran/kouran.html">紅葉の香嵐渓</a></li>
    183.                 <li><a href="../../../jkyoto/kyoto.html">京都の秋</a></li>
    184.                 <li><a href="../../../jfujien/fujien.html">富士霊園の花</a></li>
    185.                 <li><a href="../../../jtanzawa/tanzu.html">丹沢の風景</a></li>
    186.               </ul>
    187.             </li>
    188.             <li><a href="../../../jhp_g/hp_g.html">HPを作る</a>
    189.               <ul class="gnav-ul">
    190.                 <li><a href="../../../jhp_g/kiso/kiso0.html">HPの基礎</a>
    191.                   <ul>
    192.                     <li><a href="../../../jhp_g/kiso/url.html">URL･IPアドレス</a></li>
    193.                     <li><a href="../../../jhp_g/kiso/net.html">internet回線</a></li> 
    194.                   </ul>
    195.                 </li>
    196.                 <li><a href="../../../jhp_g/kiso/flow.html">作成フロー</a>
    197.                   <ul>
    198.                     <li><a href="../../../jhp_g/kiso/kiso1.html">作成準備</a></li>
    199.                     <li><a href="../../../jhp_g/kiso/kiso2.html">作ってみる</a></li>
    200.                     <li><a href="../../../jhp_g/kiso/trans.html">公開する</a></li>
    201.                     <li><a href="../../../jhp_g/kiso/kiso4.html">実用的ページ</a></li>
    202.                     <li><a href="../../../jhp_g/zero/zero01.html">ゼロから始める</a>
    203.                       <ul>
    204.                         <li><a href="../../../jhp_g/zero/zero02.html">ゼロから始める 2</a></li>
    205.                         <li><a href="../../../jhp_g/zero/zero03.html">ゼロから始める 3</a></li>
    206.                         <li><a href="../../../jhp_g/zero/zero04.html">ゼロから始める 4</a></li>
    207.                       </ul>
    208.                     </li>
    209.                   </ul>
    210.                 </li>
    211.                 <li><a href="../../../jhp_g/syoho/syoho1.html">htmlの初歩</a>
    212.                   <ul>
    213.                     <li><a href="../../../jhp_g/syoho/syoho3.html">画像の貼付け</a></li>
    214.                     <li><a href="../../../jhp_g/syoho/syoho5.html">LINKを貼る</a></li>
    215.                     <li><a href="../../../jhp_g/kiso/trans.html">公開する</a></li>
    216.                     <li><a href="../../../jhp_g/kiso/kiso4.html">実用的ページ</a></li>
    217.                     <li><a href="../../../jhp_g/tegaru/us_sft.html">手軽に作る</a>
    218.                       <ul>
    219.                         <li><a href="../../../jhp_g/tegaru/us_wd.html">ワードで作る</a></li>
    220.                       </ul>
    221.                     </li>
    222.                   </ul>
    223.                 </li>
    224.                 <li><a href="../../../jhp_g/susumu/xml.html">HTMLを超える</a>
    225.                   <ul>
    226.                     <li><a href="../../../jhp_g/html5/html5.html">Html 5</a>
    227.                       <ul>
    228.                         <li><a href="../../../jhp_g/html5/respons.html">レスポンシブ Web</a></li>
    229.                         <li><a href="../../../jhp_g/html5/flexbox.html">flex box</a></li>
    230.                         <li><a href="../../../jhp_g/html5/canvas.html">canvas でグラフ</a>
    231.                           <ul>
    232.                             <li><a href="../../../jhp_g/html5/g-chart.html">Google Chart</a></li>
    233.                             <li><a href="../../../jhp_g/html5/d3chart.html">D3 チャート</a></li>
    234.                             <li><a href="../../../jhp_g/html5/dygraph.html">dygraph</a></li>
    235.                             <li><a href="../../../jhp_g/html5/chartjs.html">Chart.js</a></li>
    236.                           </ul>
    237.                         </li>
    238.                       </ul>
    239.                     </li>
    240.                     <li><a href="../../../jhp_g/style/style1.html">CSSの基礎</a></li>
    241.                     <li><a href="../../../jhp_g/jsct/gainen.html">JavaScript</a>
    242.                       <ul>
    243.                         <li><a href="../../../jhp_g/jsct/gainen.html">J.Scriptの概念</a></li>
    244.                         <li><a href="../../../jhp_g/jsct/jquery.html">jQueryを使う</a></li>
    245.                       </ul>
    246.                     </li>
    247.                     <li><a href="../../../jhp_g/susumu/cgiset.html">CGIを設置する</a></li>
    248.                   </ul>
    249.                 </li>
    250.                 
    251.               </ul>
    252.             </li>
    253.             <li><a href="../../../w_map/w_map.html">WebMapを使う</a>
    254.               <ul class="gnav-ul">
    255.                 <li><a href="../../../w_map/ex-gm3.html">Google Map v.3</a></li>
    256.                 <li><a href="../../../w_map/ex-gs2.html">GoogleMapsStatic</a></li>
    257.                 <li><a href="../../../w_map/ex-ymap1.html">Yahoo! JS Map</a></li>
    258.                 <li><a href="../../../w_map/ex-ymaps.html">Yahoo!map Static</a></li>
    259.                 <li><a href="../../../w_map/ichi.html">位置情報と連携</a>
    260.                   <ul>
    261.                     <li><a href="../../../w_map/logger.html">GPSロガー</a></li>
    262.                     <li><a href="../../../w_map/camera.html">GPSカメラ</a></li>
    263.                     <li><a href="../../../w_map/riyou.html">マップ利用</a></li>
    264.                   </ul>
    265.                 </li>
    266.               </ul>
    267.             </li>
    268.           </ul>
    269.     </nav>
    270.   </div>
    271.   
    272.   <div class="wrapper">
    273.     <section class="gridWrap">
    274.       <article class="grid">
    275.         <div class="box">
    276.           <img src="../../../img/IMGP0962s.jpg" alt="" />
    277.           <h3>海外旅行のページ</h3>
    278.           <p>海外旅行記のページです。 …</p>
    279.           <p class="readmore"><a href="sample.html">詳細を確認する</a></p>
    280.         </div>
    281.       </article>
    282.       <article class="grid">
    283.         <div class="box">
    284.           <img width="150" height="100" src="../../../img/y21c3s.jpg" alt="" />
    285.           <h3>国内旅行のページ</h3>
    286.           <p>国内旅行記のページです。 …</p>
    287.           <p class="readmore"><a href="sample.html">詳細を確認する</a></p>
    288.         </div>
    289.       </article>
    290.       <article class="grid">
    291.         <div class="box">
    292.           <img width="150" height="100" src="../../../img/HPwebs.gif" alt="" />
    293.           <h3>HP作成のページ</h3>
    294.           <p>HP作成に関するページです。 …</p>
    295.           <p class="readmore"><a href="sample.html">詳細を確認する</a></p>
    296.         </div>
    297.       </article>
    298.       <article class="grid">
    299.         <div class="box">
    300.           <img width="150" height="100" src="../../../img/w_maps.gif" alt="" />
    301.           <h3>Web map の作成</h3>
    302.           <p>Web map 作成のページです。 …</p>
    303.           <p class="readmore"><a href="sample.html">詳細を確認する</a></p>
    304.         </div>
    305.       </article>
    306.     </section>
    307.     <hr>
    308.     <footer>
    309.       このページはレスポンシブ Webページの一例です
    310.     </footer>
    311.   </div>
    312. </body>
    313. </html>

    解説

    ( 1行目)　このレスポンシブ Webページは、HTML5 上で展開します
    ( 7行目)　プルダウンメニューでjqueryを使うので呼び込みます
    (16行目)　class=gnav-btn のブロックを狭幅時のプルダウンメニューボタンとして使うこととします。
    (29行目)　class=gridWrap のブロックをフレックスコンテナとして使うこととします。配置方向は横方向・折返し可(row wrap)です。参考
    (30行目)　フレックス幅は１とします
    (35行目)　ウインド幅768px以上のスタイルを指定します
    (37行目)　プルダウンメニューは非表示です
    (38行目)　class=gnav のナビをフレックスで表示します
    (49-50行) class=gnav の最終&最終前ナビのプルダウンメニューを左に表示します
    (59行目)　ウインド幅767px以下のスタイルを指定します
    (62行目)　狭幅ではclass=gnav のナビを非表示にします
    (71-76行) class=gnav-btn をクリックしたとき、プルダウンメニューを表示するようにしました
    (82行目)　メニューボタンを配置しました
    ( 85-269行) ナビメニューを記述しました
    (272-310行) 本文を記述しました

    表示-広幅時

    表示-中幅時

    表示-狭幅時

■ その他のサンプル

■ 参考サイト