レシポンシブＷＥＢ
～大きさの違う表示画面に対応するWEBページについて～
【現在の表示環境】
画面サイズ：px
初期ウィンドウ：px
<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>
<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>
横に長いものがある部分の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... |
/*横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) フレックスボックス設定で段組(2) テーブルセル設定で段組(ボックス高さが自動調整される)<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>
<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>
<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>
<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>
