モバイル端末用に表示を切替える（試行編）

実際にHTMLやスタイルシートを変更して、どういった画面表示になるかを試してみる
　　基本方針としてはＣＳＳの変更のみで対応することにする

切替え作業に着手する前の状態は以下の通り
　　横幅を固定し、２カラムで作成したサイトを切替えの対象とする
　　最上段はheader部、中央はmain部と右横にsidebar部、最下段はfooter部となっている
　　横幅８００pxの固定幅で定義している

１．スマホの試行テストを開始する
スマホの表示をテストする
　　・違和感の有る画面が表示される
　　　　８００pxの固定幅画面全体を忠実にスマホ画面に表示する
　　　　　　文字は小さくて読みづらい、ピンチアウト（拡大）操作すれば読めるようにはなる

ＨＴＭＬを修正する（全ページのheader部の修正となるが、限定的なので方針内とする）
　　・ＨＴＭＬに【viewport】を追加する
　　　　　<meta name=”viewport” content=”width=device-width,initial-scale=1.0″ >

スマホの表示をテストする
　　・違和感の有る画面が表示される
　　　　【initial-scale】を指定したにも関わらず、数倍に拡大されたものが表示される
　　　　　　sidebar部はオーバーフローしmain部の下方に回りこんで表示されている
　　　　　　文字は小さくて読みづらい、画面下方にはスライドバーが表示されている
　　　　ピンチイン（縮小）操作すれば読めるようにはなる、画面下方のスライドバーも見えなくなる

スマホ用のスタイルシートを用意する
　　・ＨＴＭＬに【link】を追加し、新たにスマホ用ＣＳＳを指定する
　　　　<link rel=”stylesheet” href=”css/smart.css” media=”screen and (max-width: 500px)” type=”text/css”/>
　　　　従来のＰＣ用ＣＳＳ定義の行の次に挿入する
　　　　　　共通のスタイルシートを先に、個別のスタイルシートを後に定義する
　　　　　　　　※ｌｉｎｋ命令と@import命令の読込み順位は不明、だが経験値としてこの順でないといけない

　　・ＣＳＳファイルを新たに用意する
　　　　【@import】命令で共通のスタイルシートを呼び出しておく
　　　　【width】で定義してある固定幅の値を１００％と上書き訂正する（当然複数箇所の対応となる）

スマホの表示をテストする
　　・違和感の有る画面が表示される
　　　　違和感は有るが、ＨＴＭＬとＣＳＳの値が反映され始めていると確信する
　　　　後は、ＣＳＳの微調整を繰り返して行い、気長に表示画面をスマホ用にするだけとなる

修正手順を整理しながら、少しづつ進める（実際には、行きつ戻りつの試行錯誤を何度と無く繰り返す）
　　・ＨＴＭＬの修正は以下の様にする・・・・・・表示幅の大きいモノから順に並べて定義する
　　　　<meta name=”viewport” content=”width=device-width,initial-scale=1″ / >
　　　　<link rel=”stylesheet” href=”css/pc.css” type=”text/css” media=”screen and (min-width: 1024px)”/>
　　　　<link rel=”stylesheet” href=”css/tablet.css” type=”text/css” media=”screen and (min-width:768px) and (max-width:1023px)”/>
　　　　<link rel=”stylesheet” href=”css/smart_l.css” type=”text/css” media=”screen and (min-width:480px) and (max-width:767px)”/>
　　　　<link rel=”stylesheet” href=”css/smart_s.css” type=”text/css” media=”screen and (max-width:479px)”/>

　　　　値の設定はスマホは320px x 480px、タブレットは768px x 1024pxと想定している

　　・ＣＳＳの修正は以下の様にする
　　　　【width】を１００％にする、画面横幅いっぱいに表示されると想定する
　　　　【background-color】を使って各ＣＳＳごとに色を変えた、ＣＳＳ定義の反映状況の確認に使用する
　　　　　　HTMLの記述やＣＳＳの定義に自信が無い初期段階での表示テストには有効であった

スマホの表示をテストする
　　　　縦にして表示すると
　　　　　　特定のブロックだけが右に飛び出している
　　　　　　背景の色を見て、修正した縦型ＣＳＳが反映されていると確信する
　　　　横にして表示すると
　　　　　　画面からはみ出さずにピッタリと収まっている
　　　　　　文字の大きさがアンバランスな感じ、途中で切れている部分もある
　　　　　　背景の色を見て、修正した横型ＣＳＳが反映されていると確信する
　　　　縦で表示してから横にすると
　　　　　　文字も大きくなり、画面からはみ出してしまう、ピッタリ収まっていたのに・・・・かなり長時間悩んだ
　　　　　　　　収まらなくなった原因は【inirtial-scale】はページを読み込んだ時のみ有効と分かる
　　　　　　　　読み込んだ後で縦横を変化させても、ページの再読み込みは行わないため
　　　　　　　　320px分を480pxにして表示したため、１．５倍の大きさになって表示されたと分かる

　　ここまでのテストで基本的な動きが保障されたので、後はＣＳＳの微調整だと割り切る
　　　　デバイスの表示幅の範囲に合わせて最適な固定幅を定義をしたり
　　　　デバイスの物理属性に合わせて最適なＣＳＳを選んだり
　　　　試行テストの種類にはまだ先がある、が一旦ここで打ち切ってＣＳＳの微調整を行って収束させる

２．タブレットの試行テストを開始する
タブレットの表示をテストする（８００pxの固定のまま）
　　　　横にして表示すると
　　　　　　画面からはみ出さずにこじんまりと中央に収まっている
　　　　　　背景の色は、タブレット用に指定した色ではなくて、ＰＣ用の色が反映されている

　　タブレットはＰＣ用のＣＳＳで賄えると判断し、タブレットのテストは終了させる