CSSでレスポンシブ・レイアウト

July 11, 2022

HTMLのtableはデータの整理には便利だが，項目が多くなると1行がどんどんと横に長くなってしまう．パソコンであれば良いが，スマホやタブレットではちょっと使いづらい．そこでレイアウトをレスポンシブ(画面サイズに合わせた表示)にする必要がある．そのあたりの変更を自動でしても良いが，植生調査アプリでは使用者がボタンを押して切り返す仕組みにした．ボタンを押すと，JavaScriptでスタイルを書き換えて，表示を途中で折り返すようにした．だいぶできてきた．

アプリ(CSS/JavaScript別ファイルバージョン) https://matutosi.github.io/biodiv/biodiv.html
アプリ(1ファイルバージョン) https://matutosi.github.io/biodiv/biss.html
使用例 https://matutosi.github.io/biodiv/exam01.html