1月6日初公開した時のHP おうちフリーランサー(コンピュータ&ウェブ) 光ちゃ!はページも少なく、あれからページを少しずつ増やし、コロナで外出控えるようとの事で集中して、6月21日に完成したんですが、iPhoneとAndroidで自分のHPを見るとケータイを縦にした場合、左メニューの占有率が大きく、本文が少ししか見れないと指摘あったので、今日、やっと出来ました。
(1) パソコン&iPadで通常のページを見るとこんな感じになります。

CSSでデザインしているので、ページを狭めても見にくいと言う事もないですね。
(2) パソコン&iPadで右上の「黒地」ボタンを押すと、目が悪い視覚障害者向けに見やすく表示されます。

アクセシビリティを配慮したページに仕上がっていますね。
(3) iPhone横長で見るとこんな感じになります。

パソコンで見たページから右側のアフィエイト領域が省かれた感じになるので、これも見やすいと思います。
(4) iPhone横長で右上の「黒地」ボタンを押すとこんな感じです。

上の宣伝画像を除けた方がいいかな?
(5) iPhone縦長で見ると左メニューエリアを無くし、上の方に移動します。

左メニューを上に移動させて、本文を100%の幅で表示したら、読みやすくなりましたね。
(6) iPhone縦長で「黒地」ボタンを押すとこれも左メニューエリアを無くし、上の方に移動します。

目が悪い人もこれなら見やすく見れますね。
(7) Android横長で見るとこんな感じになります。

iPhone横長と同じでいいですね。
(8) Android横長で右上の「黒地」ボタンを押すとこんな感じです。

見やすいですね。
(9) Android縦長で見るとiPhoneと同じく左メニューエリアを無くし、上の方に移動します。

バッチシですね!
(10) Android縦長で「黒地」ボタンを押すとこれも左メニューエリアを無くし、上の方に移動します。

iPhoneとAndroidも表示が良さそうなので、HP作成はこれで打ち切ろうと思います。
(1) パソコン&iPadで通常のページを見るとこんな感じになります。

CSSでデザインしているので、ページを狭めても見にくいと言う事もないですね。
(2) パソコン&iPadで右上の「黒地」ボタンを押すと、目が悪い視覚障害者向けに見やすく表示されます。

アクセシビリティを配慮したページに仕上がっていますね。
(3) iPhone横長で見るとこんな感じになります。

パソコンで見たページから右側のアフィエイト領域が省かれた感じになるので、これも見やすいと思います。
(4) iPhone横長で右上の「黒地」ボタンを押すとこんな感じです。

上の宣伝画像を除けた方がいいかな?
(5) iPhone縦長で見ると左メニューエリアを無くし、上の方に移動します。

左メニューを上に移動させて、本文を100%の幅で表示したら、読みやすくなりましたね。
(6) iPhone縦長で「黒地」ボタンを押すとこれも左メニューエリアを無くし、上の方に移動します。

目が悪い人もこれなら見やすく見れますね。
(7) Android横長で見るとこんな感じになります。

iPhone横長と同じでいいですね。
(8) Android横長で右上の「黒地」ボタンを押すとこんな感じです。

見やすいですね。
(9) Android縦長で見るとiPhoneと同じく左メニューエリアを無くし、上の方に移動します。

バッチシですね!
(10) Android縦長で「黒地」ボタンを押すとこれも左メニューエリアを無くし、上の方に移動します。

iPhoneとAndroidも表示が良さそうなので、HP作成はこれで打ち切ろうと思います。