画面の幅がブレイクポイントに達したら、レイアウトを変える

投稿日: 2021年 2月 3日

自己紹介のホームページをレスポンシブに作成してみました。bootstrap 5.0 で定義されているクラスを使って、だいたい実装できました。
スマホの画面幅で表示したときに、文字の配置などは、まあまあ良かったのですが、
画面幅が狭いとき、表示が段組みになると、項目ごとの境界がわからず、見づらい感じになりました。

そこで、bootstrap の js の機能を使って、画面幅が狭くなったときだけ、表示項目の境界を示す


を表示する機能を実装しました。
コードにすると下記のような感じです。

collapseList に bootstrap のオブジェクトのインスタンスを入れているのは、公式の説明の通りです。
その後、ブラウザの resize イベントが発火したタイミングで、ブラウザの画面幅を window.innerwidth で取得して、そのサイズに応じて、collapseElement を show するか、hide するか分岐させています。
しかし、このコードだと、あくまで resize イベントが発火しないと動かないので、はじめからスマホで開くと、何も動かないというバグ付きです・・・

プログラミングに関するオススメ書籍