レスポンシブWebデザインを考える

きょうびのホームページは、端末環境に依存しない「レスポンシブWebデザイン」が主流となっている(らしい)が、WordPressベースのこのブログと本館ページは「Twenty Twenty-Three」テーマを使っていて、こいつは「レスポンシブWebデザイン」対応を謳っている。


PCでの見え方一例


スマホでの見え方一例

webを作る上では楽で良いが、完全ではない。
どうしてもhtmlなどでガチガチにコーディングしたところなどはうまく行かないし、貼込画像なども、PCではちゃんと表示されているにもかかわらず、スマホで見るとギュギュッと横に縮まったものになっちゃうこともある。


こんな感じ(笑)

そんな時は以下のCSSコードを埋め込むと良い。

img {max-width:100%}

文字通りで「最大幅は100%だぜ」ってやつですね。

また、ミドルクラスのタブレットの解像度だと、メニューなどは折り返し(設定次第)てハンバーガーメニューにならずちょっと中途半端(ハイクラスならPCと同じでしょう)。


中華Androidタブレット(1280×800)での見え方一例

それでも「Twenty Twenty-Three」テーマはおおむね満足しているので、もう少し作り込んでいこうかとは思っている。

ですので、このブログにアクセスすると、ちょくちょく出方が変わると思われますが、その時は当方が “コードをいぢってる” と言うことですのでご了承くだされ。(^_^;)

投稿日

カテゴリー:

投稿者: