スマホ対応できたWEBデザイン
9月
20
2022
以前から思っては居たのですが、WEB（ブログ）を作成してもPCが主体で、自分のスマホで見た時も「もう少し見易くならない」と呟いてしまっていました。
当時は Word Press を利用して居り、そう言うモードも有ったのですが何分にも今回 html と php を主として簡便なブログシステムを作りたいと思った理由となった、好きにできないという事では、難しくても自分でやらねばと奮起してやってみることにしました。
index.php を余り変更せず index.css でコントロール
ページを記述する index.php(又は index.html)側は、どうしてもページを描画する順番を変更しないとどうしようもない時のみ変更するとして できる限り <div> でブロック化して、それを CSS で描画位置や順番をコントロールするようにします。
そのコントロールの切替えポイントは？
この切替ポイントを ブレイクポイント と呼ぶようです。
つまり、PC用・タブレット用・スマホ用などに切り替える解像度を決めて、それぞれの解像度に見合ったデザインにするということです。
これには、(1)スマホ用のようにシンプルな方が見やすいものから CSS を作成（共有部）し、 それに少しリッチな部分を加えて共有部と加算することによりPC用にまで上げていく モバイルファースト と言われる手法と、 (2)それぞれを独立した CSS として記述する方法が有ります。私は(2)の方法を採用しようと思います。
理由は、共通部分が多くはなりますが、スマホ部分を修正しようとして結果PC部分まで壊してしまうことが防げると考えたからです。
こう考えた時、(A)私のPCを含む解像度 横解像度 1200 以上、(B)横解像度 1081 ～ 1199 までのタブレット横使用、 更に (C)1080 以下のスマートフォン（タブレット縦使用含む）の3とおりとしました。
それぞれ次のように仕分けして CSS を書きます。
(A) @media screen and (min-width: 1200px) { }
(B) @media screen and (min-width:1081px) and ( max-width:1199px) { }
(C) @media screen and (max-width: 1080px) { }
実際のオペレーション
- まず、すでに出来上がっている index.css の内容を (A) のブレイクポイントで囲います。
- index.php(html) の内容で style タグが有れば CSS化し class指定に変更して行きます。
- index.php(html) の表示が今までどおりになったら、(A) の CSS をすべて (C) へコピーします。
- (B) はデザイン的には (A)と同じにするので、全くデザインの変わる (C) の編集を先にします。
- (C) で全くデザイン出来ないときは、index.php(html) のソースともに調整し、(A) のデザインを大きく損ねないように両立させます。
- 再編集した (A) を (B) にコピーします。
- (B) では、基本 (A) とデザインは同じとし、文字のはみ出しなど全体が小さくなった事による問題点を潰していきます。
