Bootstrap4ではhidden-xsがうまく動かない！？書き方が変わったので新しい書き方を伝授

こんにちは。いっとくです。

Bootstrapって便利ですよね！

今までCSSでいちいちスタイルを指定しないとできなかったものが、classを指定するだけであっという間に綺麗なレイアウトを作れるわけですから！

先ほどWEBサイトのトップページを作っていた時のこと。

スマホだといらない要素を消したいな〜と思って調べてみると、消したい要素のclassに「hidden-xs」を追加すればいいとのこと。

これは横幅がxs（つまりスマホ）の時に消しますよというもの。

意気揚々と動作を確認してみると全然動かない…！

これは困った。

僕は割とウェブ制作初心者なので何が原因がわかりませんが、とりあえずCSSのリンク設定と文字の打ち間違えを確認することに。

CSSのリンクがうまくできていないのかと思って、CDNにしてみたり、Bootstrapのリンクの文字列を見直してみるも効果なし。

そもそもグリッドシステムとか他Bootstrapの機能は使えているからきっとCSSのリンクは間違っていないはず…

文字の打ち間違えかと思って、ハウツーサイトのコードをそのまま使っても動かぬ…

そしてその後も色々試行錯誤を繰り返したり、いろんなサイトを見たりしましたが、やっぱりわからぬ。

そんな中、公式サイトを調べた結果ついに原因がわかりました！

最新版のBootstrapではhiddenやvisibleのコードが削除されている！

今回サイト作成にあたって最新版使ってみたいな〜ということでBootstrapの4.1.3を使ったのですが、どうやらこちらのバージョンではhiddenとvisibleのクラスが削除されているようです！

ちょっと調べただけなのでどのバージョンから使えなくなってるのかはよくわからんのですが、hiddenやvisibleがなぜか動かないって人はこれが原因だと思います。

検索で出て来る日本語サイトだと全部hiddenとvisibleで説明していたので、めちゃくちゃ探すのに苦労しました。結局英語でしか見つからなかった。

ということで自分へのメモがてらデバイスのサイズごとに表示非表示を切り替える新しい書き方についてサクッと解説していきます。

hiddenとvisibleクラスの新しい書き方

ちょっと全部書くのは面倒臭いので、スマホだけ表示を消したい場合とスマホだけ表示したい場合を紹介します。

左側が今までの書き方で、右側が新しい書き方です。

【スマホの画面サイズの時に非表示にする方法】

class=”hidden-xs”　→　class=”d-none d-sm-block”

【スマホの画面サイズの時だけ表示する方法】

class=”visible-xs”　→　class=”d-block d-sm-none”

こんな感じで今までは一つのクラスでよかったものが、複数のクラスを組み合わせて使うようになりました。

ちなみに一つずつクラスの意味を見ていくと以下のような感じ。

d-none　＝　全部非表示にします

d-sm-none　＝　画面サイズがsm(タブレット)以上の時に非表示にします。smの部分はmd、lg、xlとブレイクポイントを指定できる。

d-block　＝　全部のディスプレイをblockにします（表示します）

d-sm-block　＝　画面サイズがsm(タブレット)以上の時にblockにします

クラスを使って画面サイズごとのディスプレイの値を指定できるので、うまく組み合わせることで画面サイズごとの表示非表示を切り替えることができます！

ちなみに他のパターンを知りたい方はBootstrapの公式サイトに書いてるのでどうぞ！※英語ですがパッと見でわかるはず

ちょっと複雑な気もしますが、hiddenやvisibleは使うことができなくなってしまっているので気をつけましょ〜