レスポンシブ・レイアウト(仮)
※画像は開発中のものです
広い時は横に並べる
狭い時は右下に固定(かつオーバーレイ)
タッチデバイス向けは別ページを用意していてターゲットはPCのみだけど、使用可能な最小サイズを押し下げたかった、PCだからといってブラウザをデカく使っているとは限らない、ツール系のWebアプリケーションの場合小さい画面で操作すること自体諦めてもいいかなとは思う。
このツールの場合コメント欄はそんなに重要ではないし一定幅未満で非表示にしてしまっても良いくらいだけど流石に片手落ちなのでfixedにした。
現状は7kai Tasksは横幅1080pxに最適化されていてそれより狭いと両サイドが切れるし広いと余白が空き見苦しい、つい1080pxにブラウザサイズを合わせてしまうがそんな非効率的なことをしていると捗らないので改善しようと思う。
/* 狭い時のStyle */ @media(max-width:840px){ section .fluid-container { display: block; } article { width: auto; /*padding-left: 0; margin-left: 0; border-left: none;*/ padding-left: 10px; padding-right: 10px; border-top: 1px solid rgba(0, 0, 0, 0.25); border-left: 1px solid rgba(0, 0, 0, 0.25); position: fixed; height: 300px; bottom: 0; right: 0; background-color: #F7F7F6; } }