レシポンシブWEB
〜PCとスマホの両者に対応するページデザインについて〜

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

とりあえずレシポンシブWEBに

従前のHTMLページヘッダの<style>...</style>項目に、 画面サイズ別に最大表示幅を設定する指定をするくらいで「とりあえず」対応できることが 多いようです。以下のような感じです
<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%;
  }
  /*hrがあったら最大幅は表示幅に*/
  hr {
    max-width: 100%;
  }
/*横750ピクセル以上のディスプレーの場合の表示幅*/
@media screen and (min-width: 750px) {
  body {
    width: 750px;
    margin: 0 auto; 
  }
}
/*横749ピクセル以下のディスプレーの場合の表示幅*/
@media screen and (max-width: 749px) {
  body {
    width: 375px;
    margin: 0 auto; 
  }
}
</style>
</head>

段組でレシポンシブルに対応

PC用とスマホ用で同じHTMLが使えるよう、以下のような段組でレシポンシブルにします。
PCでは2列に、スマホでは1列とします。横幅はPCでは750px、スマホでは375pxとします。

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>
/*横並びtable-cellのクリア用*/
.CLR{
  clear: both;
}
/*imgの最大横幅を画面幅に*/
img {
  max-width: 100%;
  border: 0px;
}
/*横750px以上のディスプレー設定*/
@media screen and (min-width: 750px) {
  body {
    width: 750px;
    margin: 0 auto; 
  }
 /*フレックスボックス設定*/
  .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;
  }
  /*フロート設定用*/
  .L {
    Word-break:break-all;
    float: left;
    vertical-align:top;
    width: 47%;
    padding: 10px;
    margin: 0px;
    background-color: #FFFFFF;
  }
  .R {
    Word-break:break-all;
    float: right;
    vertical-align:top;
    width: 47%;
    padding: 10px;
    margin: 0px;
    background-color: #FFFFFF;
  }
}

/*横749px以下のディスプレー設定*/
@media screen and (max-width: 749px) {
  body {
    width: 375px;
    margin: 0 auto; 
  }
  /*フレックスボックス設定用*/
  .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;
  /*フロート設定用*/
  .L {
    Word-break:break-all;
    vertical-align:top;
    width: 100%;
    padding: 10px;
    margin: 0px;
    background-color: #FFFFFF;
  }
  .R {
    Word-break:break-all;
    vertical-align:top;
    width: 100%;
    padding: 10px;
    margin: 0px;
    background-color: #FFFFFF;
  }
}
</style>
<title>TITLE</title>
</head>

フレックスボックスで段組

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>
テーブルセル設定で段組(ボックス高さが自動調整される)

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>
フロート設定で段組@((leftとright,ボックス高さは自動調整されない)
(width, padding, margin, border がバランスしないと並ばない)

float: left;
float: left;

float: right;
上の表示のHTML(classの定義はヘッダのソースを参照)
<center>
<div class="L">
<img src="../index.jpg">
<div style="text-align:left;">
float: left;
float: left;
</div>
</div>
<div class="R">
<img src="../index.jpg">
<div style="text-align:left;">
float: right;
</div>
</div>
</div> </center>
フロート設定で段組A(leftとleft,ボックス高さは自動調整されない)
(width, padding, margin, border がバランスしないと並ばない)

float: left;

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