Bootstrapを使って画面の幅によって表示を変えてみた

会社で不便に思っていることがあって解決すべくDjangoで簡単なアプリというかwebページを作っています。

カタログを見やすく凝縮したようなものを作るだけなので、わざわざDjangoを使うまでもなかったのですが、ログイン機能を搭載したかったことと、Djangoでデプロイしたことがなかったのでやってみたかったということで、あえてDjangoで作っています。

本当に簡単なものを作るだけなので、当初はBootstrapを使う予定はなかったのですが、どうもこれを使ったほうが楽そうなことがあったので試してみました。

使用目的は画面の幅を縮めた時に、ヘッダーのメニューの帯？的なものを、ハンバーガーメニューに変えること。
本来ならメディアクエリーを使うところなのでしょうが、ヘッダー部分だけだし、なんか面倒臭そうだからなんか簡単にできうるものがないかと調べていたらBootstrapにたどり着いたというのが本当のところです。

使い方はとても簡単。
今回は768pxを境界に表示・非表示を切り替えてみました。

<div class="d-none d-md-block">768px以上の場合表示</div>
<div class="d-block d-md-none">768px未満の場合表示</div>

やることはたったこれだけ。
classに少し加えるだけです。

意味合いとしては、1行目は、d-noneでいったん画面サイズに関係なく非表示にした上で、d-md-blockでmd以上のサイズで表示。
2行目は、d-blockで画面サイズに関係なく表示させ、d-md-noneでmd以上のサイズで非表示。ちなみにd-blockはなくても問題ないと思います。何もしなければ基本的には表示されるはずなので。

ちなみにmdはBootstrap において横幅のサイズを表していて、
sm --> 576px~
md --> 768px~
lg --> 992px~
xl --> 1200px~
を表しています。

Bootstrapってtwitterではたまに槍玉に上げられたりしていますが、私みたいに部署内で使う程度やお遊び程度のアプリを作る上では大変便利なので、結構重宝しています。