Bootstrapでスマホのみ非表示にする方法を解説！
この記事では、Bootstrapでスマホのみ要素を非表示にする方法を解説しています。Bootstrapではスマホの画面サイズとPCの画面サイズで、表示、非表示を切り替えることができるクラスが用意されています。それを利用して、スマホのみ非表示にしていきます！
Bootstrapでスマホのみ非表示にしたい
Bootstrapでウェブページを作る際に、PCには表示したいが、スマホのときには非表示にしたい要素が出てくることがありますよね。
今回はそのような場合にスマホのときのみ非表示にする方法を解説していきます！
Bootstrapでスマホのみ非表示にする方法
Bootstrapには、「d-*-block」と「d-*-none」というクラスがあります。このクラスを使うと、ある特定の画面サイズのときに表示するもしくは表示しない、ということを指定できます。
例えばこの「*」の部分に「md」を入れると、画面サイズが768px以上の場合に表示もしくは非表示にする、というように指定できます。
これを利用して、スマホでは非表示にする要素を作りたい場合には、以下のように記述します。
d-noneとd-md-blockを適用したdiv要素の例
<div class="d-none d-md-block" style="height: 100px;">スマホでは非表示</div> d-noneで基本的に非表示にし、d-md-blockで画面サイズ768px以上でのみ表示するというように指定しています。
このようにすると、スマホサイズの画面では非表示にすることができます。サンプルコードは以下のようになります。
ちなみに、スマホの画面サイズとPCの画面サイズの間にはタブレットの画面サイズもありますね。先程のサンプルコードでは、768px以上で表示としていたので、一般的にはタブレットでも表示になります。（使用するタブレットによって画面サイズは違うので、全てとは言い切れません）。
mdの代わりにsmを使うとブレークポイントが更に小さく、576pxになります。用途によってはこちらを使用してみてもいいでしょう。
