ブログ_音楽仲間 + ☆music.BBS 再生日誌7

ブログ_音楽仲間

☆music.BBS 再生日誌7

>>前回

10月27日に、☆music.BBSトップサイトのトップページPC版のレイアウトが完了した。

見た目は2012年以来のデザインとあまり変わりないがCSS(やり方)と内容が全く違う。
スマホ版デザインを変更せずに画面横幅でCSSを切り替える方法(レスポンシブレイアウト)に変更、、
つまり、スマホ版のHTMLソースを基本としたのだ。

旧PC版レイアウトは、HTMLとBODY要素を縦横100%に固定した上で、画面を横並び3分割する為に左中右それぞれのボックスを display:inline-block にして、floatプロパティで画面内に収めていた為に古いブラウザなどではオーバーフローを消去出来ずにHTMLかBODY要素にスクロールが発生したり、横幅が狭くなるとデザインが崩れる不具合がありました。

今回のPC版はスマホ版ソース基本でCSS3が標準なので、、、

HTMLとBODY要素の縦横100%固定は同じだが、BODY要素にdisplay:flex;min-width:961px;を指定。
スマホ版ボックスのワイドプロパティをBODY要素に対して37%に、
position:fixed;width:37%以下;で右側に分割内容を表示して2分割画面を作り、BODYの残りワイド26%の余白に元のPC版の表示物(元々の左側表示内容)を入れて3分割画面が完成。
単純??なフレキシブルレイアウトに変更した。

横幅の伸縮に対応し、BODYワイドが961px以下位になると縦一例(スマホ版)表示と成る様に大幅に変更、overflow:hidden;で余計なスクロールを消し、スクロールバー共々に完全消去した。

なお。
スマホ版になると消えてしまうPC版表示物はz-indexプロパティでスマホ版にも表示させる予定だが、まだ其処までには至っていない。。

当初は、position:absolute;やposition:fixed;などポジションプロパティのみでレイアウトしたのだが、これでは初期レイアウトの様に伸縮に対応仕切れずCSSの記述も膨大になった為に作戦変更、考えに考えて時間がかかったが少ない記述のCSSで上手く出来ました。

現在。
内容の更新・変更やポジションスティッキーで見出し貼りつけ等を少しずつやっている。。

結局、、
「全BBS一覧」はスマホ版では埋め込むカタチとなりHTMLソースの容量はPC版と同じ?、、、と云うよりもPC版が軽くなりスマホ版の総容量が増える結果となったが、5G標準になれば問題無いからこのまま作成を進めるだけだ。

画面切替え時の演出なども考えているから、最終的にはCSSファイル内を整理最小化してひとつにまとめようぜ!!

コメント
×
BLコンテスト・グランプリ作品
「見えない臓器の名前は」
- ナノ -