otosan インデックスページ変更20221106

２０２２年１１月６日

1.状況説明

Webページ作りは、「趣味の世界」を実現させたい為、今まで幾度となくデザイン変更を重ねながら新化し続け、自己満足の世界が19年ばかり続いています。

最新まで使用していた、このotosanサイトのindexページ（本の表紙と同様に重要なページに相当する）は、2015年ごろ作り替え時に「アイテムごと区切りながら横並びのボックスデザインにしたい」という発想で、然も高さも揃えレスポンシブ対応（RWD化：デバイスの画面幅に対応したページ）にもしたい、と一寸欲張った内容を取り込んでいました。

試行錯誤しながら、最終的には当時としては最新技術？だった「display:table-cell;プロパティ」を駆使する方向で、調査・試作等しながら何とか完成させ、今日まで大きなトラブルも無く運用してきました。

ところが、最近になり原因の心当たりはありませんが、画面のセル幅が制御（均一にならない）できない、又、改良変更もできない？等の問題が出てきました。

Webで色々調査した結果、時代遅れのdisplay:table-cell;プロパティの限界？を感じ、ここで大幅な設計変更を余儀なくされることになりました。

indexページはWebの「一つだけの入り口ページ」にあたるため、対策は急いでやろうと思い立ちました。

色々調査した結果、今回採用したプロパティは最新の「FlexBox」にしました。indexページの基本的レイアウトは、特に欠点を感じていなかった従来のレイアウトをそのまま踏襲しました。

ここでやっと希望通りのindexページに仕上がり、今まで試験的に使用して微調整も一応完了した？為、運用を開始する事にしました。・・・記録を雑記メモとして残します。

2.使用デバイス

使用PC

1. 富士通製ノートPC：詳細　system（ワーク用PC）記載のPC② FMVA77YRを使用。
   OS：Windows10
   ・バージョン21H1→21H2
   ・OSビルド19043.1865→19044.1889→現在19045.2193
2. ブラウザー(1:常時メインに使用)：Google Chromeバージョン: 107.0.5304.88（Official Build） （64 ビット）
3. ブラウザー(2:予備用)：Mozilla Firefox:106.0.5（64ビット）
4. メーラー：Mozilla Thunderbird 102.4.2（32ビット）
5. セキュリティー：McAfeeリブセーフ バージョン 16.0

使用スマホ

1. メーカー：富士通
2. 呼称名：arrows Be4 F-41A（2020年製）
3. デバイス名：F41A
4. モデル名：F41A
5. OS：Android
6. バージョン情報：V10(購入時)→V11（2021/11/1グレードアップ）
7. ビルド番号：V41R055B（2022/11/06）
8. 通信規格のゼネレーション：4G
9. キャリア：NTT docomo

3.やった事

対策に一番時間が掛かったのは、RWD化するのにPCファーストにするか、SP（モバイル）ファーストにするかでした。

これらは使い方によって、PCでは全く異常なく横並び表示しているのに、SPでは希望通りの縦一列表示にならない、という問題の対応にはかなりの時間を費やしてしまいました。

最終的にはSP（モバイル）ファーストで設定し、ブレークポイント600px以上のPC画面での使用時には、「上書きさせる」方法を採用しました。

600pxは従来から使用実績のもの。最近のweb記事ではメディア切替の指定は
@media screen and (min-width:768px) {}が良いと記載しているのも有りますが、ここはいじらず様子を見ることにしました。
後は
「display:flex」を.containerに入れ、他の指定とマッチングさせるだけでした。

スマホで見た状態（スクショ）

4.お勧めページの紹介

Otosan の記事情報