架空創造地図描画日記2023[No.7836]

　さて、これはあくまで「手っ取り早く」というのがテーマであり、外観が最重要視されるプロの仕事レベルの話ではない。結局のところ、レスポンシブ化を手っ取り早く進めるカギは、横幅を320px程度まで縮めても、中身をはみ出さないようにすることである。そのために最も手っ取り早く済ませるには、ページの外側に大きな結界を張り巡らせて、その幅をディスプレーに応じて制御すればよい。
　html5以降では、ページ内のブロックの位置付けを明確にすべく、header・main・footerというタグが存在する。単純にページ内で頭・胴体・足に相当する部分を明確にすべく用いられるわけで、1ページ内にそれぞれ1個ずつしか唱えられない。それに対してdivは昔からあって、今も多用されるタグだが、これは1ページ内で何度も唱えられる。良い意味で融通が利くが、悪い意味でページ内の構造が理解しづらくなる。
　では外側に結界を張る呪文は何を唱えるべきか? 単純に動けばいいというのであれば、万能型のdivで問題無い。だが、時代の流れに則するならば、セオリー通りに頭から足まで、きちんと役割ごとに分担して唱えるべきであろう。
　いずれにせよ、レスポンシブにするためには、これらの結界に対してメディアクエリでブレイクポイントを設定して、その値に応じてクラスで受け渡せばよい。横幅に制約のあるスマホは全開といきたいところだが、縦スクロールバーとかち合わないように96%ほどに抑えるのがよいだろう。PCは横幅を広く活用できるものの、広げ過ぎると外観がもっさりするし、ノートパソコンの需要も考えれば、1000px程度に抑えておくか…。後は常に真ん中に配置されるように、margin:0 autoを唱えておけば、とりあえず最低限の外面はどうにかなる。かくして、どんな横幅にも対応できる簡素なレスポンシブの完成である。