Day After Day
tsurezure naru mamani...
ANOTHER DECADE

from 2022 when it's begining after/with CORONA Virus.

スマホ対応できたWEBデザイン

9月
20
2022
Back


以前から思っては居たのですが、WEB(ブログ)を作成してもPCが主体で、自分のスマホで見た時も「もう少し見易くならない」と呟いてしまっていました。

当時は Word Press を利用して居り、そう言うモードも有ったのですが何分にも今回 htmlphp を主として簡便なブログシステムを作りたいと思った理由となった、好きにできないという事では、難しくても自分でやらねばと奮起してやってみることにしました。





Responsive Web Design


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) { }

実際のオペレーション

以上、上記を一遍で完遂するのは難しいかも知れませんが、慣れてくればコツが分かってきます。私のブログも一応の完成を見ました。

Back