☆music.BBS 再生日誌７
>>前回
10月27日に、☆music.BBSトップサイトのトップページＰＣ版のレイアウトが完了した。
見た目は2012年以来のデザインとあまり変わりないがCSS（やり方）と内容が全く違う。
スマホ版デザインを変更せずに画面横幅でCSSを切り替える方法（レスポンシブレイアウト）に変更、、
つまり、スマホ版のHTMLソースを基本としたのだ。
旧ＰＣ版レイアウトは、HTMLとBODY要素を縦横100%に固定した上で、画面を横並び３分割する為に左中右それぞれのボックスを display:inline-block にして、floatプロパティで画面内に収めていた為に古いブラウザなどではオーバーフローを消去出来ずにHTMLかBODY要素にスクロールが発生したり、横幅が狭くなるとデザインが崩れる不具合がありました。
今回のＰＣ版はスマホ版ソース基本でCSS3が標準なので、、、
HTMLとBODY要素の縦横100%固定は同じだが、BODY要素にdisplay:flex;min-width:961px;を指定。
スマホ版ボックスのワイドプロパティをBODY要素に対して37%に、
position:fixed;width:37%以下;で右側に分割内容を表示して２分割画面を作り、BODYの残りワイド26%の余白に元のＰＣ版の表示物（元々の左側表示内容）を入れて３分割画面が完成。
単純？？なフレキシブルレイアウトに変更した。
横幅の伸縮に対応し、BODYワイドが961px以下位になると縦一例（スマホ版）表示と成る様に大幅に変更、overflow:hidden;で余計なスクロールを消し、スクロールバー共々に完全消去した。
なお。
スマホ版になると消えてしまうＰＣ版表示物はz-indexプロパティでスマホ版にも表示させる予定だが、まだ其処までには至っていない。。
当初は、position:absolute;やposition:fixed;などポジションプロパティのみでレイアウトしたのだが、これでは初期レイアウトの様に伸縮に対応仕切れずCSSの記述も膨大になった為に作戦変更、考えに考えて時間がかかったが少ない記述のCSSで上手く出来ました。
現在。
内容の更新・変更やポジションスティッキーで見出し貼りつけ等を少しずつやっている。。
結局、、
「全BBS一覧」はスマホ版では埋め込むカタチとなりHTMLソースの容量はＰＣ版と同じ？、、、と云うよりもＰＣ版が軽くなりスマホ版の総容量が増える結果となったが、５Ｇ標準になれば問題無いからこのまま作成を進めるだけだ。
画面切替え時の演出なども考えているから、最終的にはCSSファイル内を整理最小化してひとつにまとめようぜ！！