レシポンシブＷＥＢ
～大きさの違う表示画面に対応するWEBページについて～

【現在の表示環境】
画面サイズ：横1280 縦720px
初期ウィンドウ：横1280 縦720px
現在ウィンドウ：横 縦px
2020年に続き2021年もCOVI-19により重苦しい状況が続いています。
スマホが普及しWEBを見ることもＰＣよりスマホのほうが多くなってきたそうです。 2020年ではGoogleへのアクセスがＰＣよりスマホのほうが多くなったとか。 WEBもスマホの狭い画面やスワイプでの縦送り対応が標準になっています。
また、ディスプレーも地デジ普及2011年以後２Ｋや４Ｋの高解像度が標準になりました。 従前のSXGA1280pxをデフォルトとしたコーディングのままだと横に長くなり、文章が読みにくくなることもでます。
どちらにも対応できるレシポンシブデザインが必要な2021年現在であります。 新たにページを作る場合はレシポンシブページで書いていけますが、過去のページをレシポンシブルに書き直すのは 労力が必要です。できるだけ簡単にアレンジしたいものです。 2020年からそんな作業をすすめてきたのでここで一回まとめておこうと思います。

画面横幅の決定
画面の横幅設定など、レシポンシブルに対応する場合、簡単に２～４種類くらいの設定でよいかなと感じます。
(1) 横幅 375px ... iPhone6S, iPhon SE など用
(2) 横幅 412px ... Android, iPhone6S plus など用
(3) 横幅 750px ... iPad, デスクトップモニター用
(4) 横幅1024px ... デスクトップモニター用
私の場合、スマホ用設定は、シンプルに 375px のみとしています。画面の小さいほうに合わせればよいかという理由です。 同様にディスプレー用も、750px のみとしています。シンプルなページが多いのでそれほど横に広げる必要がないからです。

Ⅰ レイアウトだけくずれないように
小さいディスプレーではスクロールが必要、大きな画面は幅指定
<head>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=yes">
<style>
  body {
    /*従前ページに必要な幅を設定する*/
    width: 750px;
    margin: 0 auto;
    word-break: break-all;
    /*iPhone横位置でのフォント拡大をふせぐ*/
    -webkit-text-size-adjust: 100%;
  }
  /*imgがあったら最大幅は表示幅に*/
  img {
    max-width: 100%;
    border: 0px;
  }
  /*tableがあったら最大幅は表示幅に*/
  table {
    max-width: 100%;
  }
</style>
</head>
この設定のサンプル
レイアウトは乱れませんが、スマホ画面に収まらないので、見づらいと思います。ただ横幅750pxとしていますのでスマホを横にすれば横レイアウトも収まります。
横幅のあるレシポンシブル未対応なページを、スマホで見た場合、とりあえずレイアウトが乱れないようにするパッチのような設定です。 私の場合、徐々にページをレシポンシブルに整えていきましたので、この設定だけのページは今はありません。


Ⅱ とりあえずレシポンシブル
画面幅を設定し、画像やTABLEを収める
<head>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=yes">
<style>
  /*imgがあったら最大幅は表示幅に*/
  img {
    max-width: 100%;
    border: 0px;
  }
  /*tableがあったら最大幅は表示幅に*/
  table {
    max-width: 100%;
  }
/*横500ピクセル以上のディスプレーの場合の表示幅 (ＰＣ,スマホ横)*/
@media screen and (min-width: 500px) {
  body {
    /*従前ページに必要な幅を設定する*/    
    width: 750px;
    margin: 0 auto; 
    Word-break:break-all;
　  /*iPhone横位置でのフォント拡大をふせぐ*/
    -webkit-text-size-adjust: 100%;
  }
}
/*横499ピクセル以下のディスプレーの場合の表示幅 (スマホ縦)*/
@media screen and (max-width: 499px) {
  body {
    /*スマホ横幅にあわせた設定をする*/
    width: 375px;
    margin: 0 auto; 
    word-break: break-all;
    -webkit-text-size-adjust: 100%;
  }
}
</style>
</head>
この設定のサンプル
スマホ表示でも、横にスクロールする必要がなくなるので、この簡単な設定だけでだいぶ見やすくなると思います。 TABLEを使った表の表示は縮小されるので、見やすくする工夫をしたくなります。

Ⅲ 横スクロールウィンドウで対応
表など横に長い部分を横スクロールウィンドウに入れて対応
横に長いものがある部分のhtmlソースを、スクロール設定の中に入れて、スマホではその部分のみ横スクロールするようにする。

ここまでのヘッダのstyle設定に以下のCSSを追加

 /*横方向のみスクロール*/
 .SCRX{
   overflow-x: scroll;
   width: 100%;
   border: 1px solid #999;
 }
 /*縦横方向スクロール*?
 .SCR{
   overflow: scroll;
   width: 100%;
   height:100%;
   border: 1px solid #999;
 }

HTMLソース部分

<div class="SCRX">
<center>
<table width="640"><tr>
<td>
<img src="../index.jpg"><br>
text...<br>
</td>
<td>
<img src="../index.jpg"><br>
text...<br>
</td>
</tr></table>
</center>
</div>


text...
text...
横スクロールの割合は減りますが、グラフなどでなく、タイル表示しているものなどは、横にスクロールさせず位置変更で見やすくしたくなります。
TABLEで書かれているソースをそのまま、横の短い画面で、縦並びにすることはできませんので、次の工夫が必要になります。


Ⅳ 段組変更で対応
従前のTABLE設定などをレシポンシブルに段組変更されるようにするには、その部分のソースを変更しなければなりません。 ページが多い場合は手間がかかりますが、スマホで閲覧されることの多い現状なので、レシポンシブル対応は必要と思います。
ＰＣ用とスマホ用で同じHTMLが使えるよう、以下のような段組でレシポンシブルにします。
ＰＣでは２列に、スマホでは１列とします。横幅はＰＣでは750px、スマホでは375pxとします。
ここまでのヘッダのstyle設定に以下のCSSを追加 
/*横500px以上のディスプレー設定 (ＰＣ,スマホ横)*/
@media screen and (min-width: 500px) {
  body {
    width: 750px;
    margin: 0 auto; 
    Word-break:break-all;
　  /*iPhone横位置でのフォント拡大をふせぐ*/
    -webkit-text-size-adjust: 100%;
  }
  /*フレックスボックス設定*/
  .FC{
    display: -webkit-box; /*Android4.3*/
    display: -moz-box;    /*Firefox21*/
    display: -ms-flexbox; /*IE10*/
    display: -webkit-flex; /*PC-Safari,iOS8.4*/
    display: flex;
    box-sizing: border-box;
  }
  .FI{
    width: 50%;
    background-color: #FFFFFF;
    Word-break:break-all;
    padding: 10px;
    box-sizing: border-box;
  }
  /*テーブル設定用*/
  .T{
    Word-break:break-all;
    display:table-cell;/*横並び許容*/
    vertical-align:top;
    width: 50%;
    padding: 10px;
    margin: 0px;
    background-color: #FFFFFF;
    box-sizing: border-box;
  }
}
/*横499px以下のディスプレー設定 (スマホ縦)*/
@media screen and (max-width: 499px) {
  body {
    width: 375px;
    margin: 0 auto;
    word-break: break-all;
  }
  /*フレックスボックス設定用*/
  .FC {
    background-color: #FFFFFF;
    box-sizing: border-box;
  }
  .FI {
    width: 100%;
    background-color: #FFFFFF;
    Word-break:break-all;
    padding: 10px;
    box-sizing: border-box;
  }
  /*テーブル設定用*/
  .T{
    Word-break:break-all;
    vertical-align:top;
    width: 100%;
    padding: 10px;
    margin: 10px;
    background-color: #FFFFFF;
    box-sizing: border-box;
  }
}
(1) フレックスボックス設定で段組

text...

text...
text...
上の表示のHTML(classの定義はヘッダのソースを参照)
<div class="FC">
<div class="FI">
<center>
<img src="../index.jpg">
</center>
text...
</div>
<div class="FI">
<center>
<img src="../index.jpg">
</center>
text...
</div>
</div>
(2) テーブルセル設定で段組(ボックス高さが自動調整される)

text...
text...

text...
上の表示のHTML(classの定義はヘッダのソースを参照)
<center>
<div class="T">
<img src="../index.jpg">
<div style="text-align:left;">
text...
</div>
</div>
<div class="T">
<img src="../index.jpg">
<div style="text-align:left;">
text...
</div>
</div>
</center>


画像の縦横を一定の大きさにして表示

横幅指定などで任意の大きさの画像を、ＰＣ用、スマホ用に対応させた場合、ＰＣでは横画像が大きくなり、スマホで縦画像が大きくなります。
それを一定の大きさで表示させます。CSSだけでは対応できないようなので、javascriptで画像縦横をチェックしcssを吐き出すという手順です。 このサイトの解説を引用させていただきました。

(1) HTMLヘッダの中にjavascriptを入れる
<script>
(function(){
  function image_class(){
    var img = new Image();
    var images = document.querySelectorAll('img');
    for(var i=0;i<images.length;i++){
      img.src = images[i].src;
      /*縦長画像にクラス名付*/
      if(img.width < img.height){
        images[i].className += ' vertically_long';
        images[i].parentNode.className += ' vertically_long_outer';
      /*横長画像にクラス名付*/
      }else if(img.width > img.height){
        images[i].className += ' horizontally_long';
        images[i].parentNode.className += ' horizontally_long_outer';
      /*正方形画像にクラス名付*/
      }else{
        images[i].className += ' square';
        images[i].parentNode.className += ' square_outer';
      }
    }
  }
  if(window.addEventListener){
    window.addEventListener('load', image_class, false);
  }else if(window.attachEvent){
    window.attachEvent('onload', image_class);
  }
})();
</script>
(2) HTMLヘッダの中にcssを入れる 
<style>
/*横720pix以上のディスプレイの場合*/
@media screen and (min-width: 720px) {
  /*縦長画像の横は最大480pixに*/
  .vertically_long {
    max-width: 480px;
    height: auto;
  }
  /*横長画像の横は最大720pixに*/
  .horizontally_long{
    max-width: 720px;
    height: auto;
  }
}
/*横719pix以下のディスプレイの場合(スマホなど)*/
@media screen and (max-width: 719px) {
  /*縦長画像の横は最大240pixに*/
  .vertically_long {
    max-width: 240px;
    height: auto;
  }
  /*横長画像の横は最大360pixに*/
  .horizontally_long{
    max-width: 360px;
    height: auto;
  }
}
</style>
横長画像サンプル(1200px*800px)


縦長画像サンプル(800px*1200px)



デバイスの横幅に対応する例

もどる