☆music.BBS 再生日誌８
>>前回
トップページの編集作業も大詰めが近づいて来た。
画面横幅変更でスマホ・ＰＣの画面が簡単に切り替え出来るので両方を同時に編集している。
操作ボタンの作成には随分時間がかかった。
JavaScriptでのボタンリンクやホバー/オンマウスのイベントが多いのだが、スマホはオンクリックのみなので、ＰＣはマウスイベントで動作する様に分けて、CSSの振り分けも同時にやった。
スマホ画面ではpointer-eventsでマウス操作無効にしたいのだが、ラップトップなどでスマホ画面を操作する時不便だったからモバイルデバイスの時だけに有効となる様に後でやる。
後はテキスト書き換えてスマホ画面に全BBS一覧を表示させるイベントを加えるだけだ。
オーバーレイでフェードイン・アウトしたいな。。。
未作成のページもまだまだあるし、完成時期は見えないが完成形は見えて来た。
春までには出来上がる気がしてきたぞ！！
☆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ファイル内を整理最小化してひとつにまとめようぜ！！