responsive design

2020年に続き2021年もCOVI-19により重苦しい状況が続いています。
スマホが普及しWEBを見ることもＰＣよりスマホのほうが多くなってきたそうです。 2020年ではGoogleへのアクセスがＰＣよりスマホのほうが多くなったとか。 WEBもスマホの狭い画面やタップでの縦送りに対応が標準になっています。
とはいえディスプレー環境で見ることができるなら画面の広いディスプレーのほうが優位なことも多くどちらにも対応できるレシポンシブデザインが必要な2021年現在であります。少し昔、携帯電話i-Modeに対応するために別デザインのページを用意したこともありました。それは既に過去のものになっています。
新たにページを作る場合はレシポンシブページで書いていけますが、過去のページをレシポンシブルに書き直すのは労力が必要です。できるだけ簡単にアレンジしたいものです。 2020年からそんな作業をすすめてきたのでここで一回まとめておこうと思いました。

<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%;
  }

</style>
</head>

  /*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>

HTMLヘッダにレシポンシブル用のCSSを準備

<html>
<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;
}
/*横方向のみスクロール*/
.SCRX{
  overflow-x: scroll;
  width: 100%;
  border: 1px solid #999;
}
/*縦横にスクロール*/
.SCR{
  overflow: scroll;
  width: 100%;
  height:100%;
  border: 1px solid #999;
}
/*横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;
  }
  .FI{
    width: 50%;
    background-color: #FFFFFF;
    Word-break:break-all;
    padding: 10px;
  }
  /*テーブル設定用*/
  .T{
    Word-break:break-all;
    display:table-cell;/*横並び許容*/
    vertical-align:top;
    width: 50%;
    padding: 10px;
    margin: 0px;
    background-color: #FFFFFF;
  }
}
/*横499px以下のディスプレー設定 (スマホ縦)*/
@media screen and (max-width: 499px) {
  body {
    width: 375px;
    margin: 0 auto;
    word-break: break-all;
  }
  /*フレックスボックス設定用*/
  .FC {
    background-color: #FFFFFF;
  }
  .FI {
    width: 100%;
    background-color: #FFFFFF;
    Word-break:break-all;
    padding: 10px;
  }
  /*テーブル設定用*/
  .T{
    Word-break:break-all;
    vertical-align:top;
    width: 100%;
    padding: 10px;
    margin: 10px;
    background-color: #FFFFFF;
  }
}

</style>
<title>TITLE</title>
</head>