サクッとWEBサイトを作る「SAKUWEB(さくうぇぶ)」

Bootstrap特定のデバイスで非表示にしてみよう

サイトを作っていると、カラム数と要素数の兼ね合いで、特定のデバイスだけ空白カラムができてしまうことがあります。

空白カラムが気になる場合は、穴埋め要素をつくりましょう。

そして、デバイスによって表示・非表示で切り替えることで、解決できます。

 

*-*-* Chapter36 *-*-*

表示・非表示の仕方を学ぼう

Bootstrap特定のデバイスで非表示にしてみよう

目次

  1. カードデザインで穴埋め要素を作っていこう
  2. 表示・非表示を切り替える「Display」
    1. 全サイズ非表示「d-none」
    2. xsのみ非表示「d-sm-block」
    3. smのみ非表示「d-sm-none d-md-block」
    4. mdのみ非表示「d-md-none d-lg-block」
    5. xs/smのみ非表示「d-none d-sm-none d-md-block」
    6. xsのみ表示「d-sm-none」
    7. smのみ表示「d-none d-sm-block d-md-none」
    8. mdのみ表示「d-none d-md-block d-lg-none」
    9. xs/smのみ表示「d-sm-block d-md-none」
  3. SEO的には全デバイスで同じ表示が推奨
  4. 穴埋め要素の表示・非表示を制御しよう

 

Bootstrap5サンプルサイト
Bootstrap5サンプルサイト

SAKUWEB さくうぇぶ

 

カードデザインで穴埋め要素を作っていこう

前回作ったカードデザイン直下に穴埋め要素を作ります。

今回作るのはこちらです。

カードデザインで穴埋め要素 さくうぇぶ

 

「BedでRelax!」のパーツです。

 

画像の上にテキストが重なっているパターンですね。

 

ここもカードデザインで作ります。

そして、表示・非表示を切り替えましょう。

 

では、カードデザインで穴埋めパーツを作ってみてください。

ここで利用する画像ですが、横長だと下半分が空いてしまうので、

できれば縦長の画像を選びましょう。

 

「BedでRelax!」のデザインは、他タイトルと一緒です。

そして、前回作ったリストは必要ないですね。

 

それではコードを。

 <div class="card border-0">
   <img src="../img/catbed-block.webp" class="card-img" alt="ベッド">
   <div class="card-img-overlay">
     <h3 class="card-title">Bedで<br>Relax!</h3>
   </div>
</div>

これでスマホの空白カラムが埋まりました。

 

次は表示・非表示で切り替えます。

表示・非表示を切り替える「Display」

以前、インライン要素「d-inline」・ブロック要素「d-block」の話をしましたね。

同じプロパティに、非表示というのもあります。

 

Utilities→Display→Hiding elements

要素の表示・非表示 さくうぇぶ

非表示にするには「d-none」を指定します。

ブレイクポイントで切り替える場合は「d-*-none」で指定し、

「*」には、「xs/sm/md/lg」を入れます。

 

スマホ・タブレットのみ表示したい、逆に非表示にしたい。

タブレットのみ表示したいなどの制御も可能になります。

 

ただ、組み合わせがちょっと複雑なのでひと通り見ていきましょう。

 

表示・非表示のサイズクラス
全サイズ非表示.d-none
xsのみ非表示.d-sm-block
smのみ非表示
xs/md以上で表示
.d-sm-none .d-md-block
mdのみ非表示
xs/sm/lg以上で表示
.d-md-none .d-lg-block
全サイズ表示.d-block
xsのみ表示.d-sm-none
smのみ表示
xs/md以上で非表示
.d-none .d-sm-block .d-md-none
mdのみ表示
xs/sm/lg以上で非表示
d-none .d-md-block .d-lg-none

 

全サイズ非表示「d-none」

xs sm md lg
非表示 非表示 非表示 非表示

全てのサイズで非表示となります。

 

xsのみ非表示「d-sm-block」

xs sm md lg
非表示 表示 表示 表示

スマホのみ非表示、それ以外は表示されます。

 

smのみ非表示「d-sm-none d-md-block」

xs sm md lg
表示 非表示 表示 表示

タブレットで非表示、それ以外は表示されます。

 

mdのみ非表示「d-md-none d-lg-block」

xs sm md lg
表示 表示 非表示 表示

ディスクトップで非表示、それ以外は表示されます。

 

xs/smのみ非表示「d-none d-sm-none d-md-block」

xs sm md lg
非表示 非表示 表示 表示

スマホとタブレットで非表示、それ以外は表示されます。

もし「d-none」がない場合は、スマホで表示されてしまうので必須です。

 

全サイズ表示「d-block」

xs sm md lg
表示 表示 表示 表示

全てのサイズで表示されます。

 

xsのみ表示「d-sm-none」

xs sm md lg
表示 非表示 非表示 非表示

スマホのみ表示、それ以外は非表示となります。

 

smのみ表示「d-none d-sm-block d-md-none」

xs sm md lg
非表示 表示 非表示 非表示

タブレットのみ表示、それ以外は非表示となります。

 

mdのみ表示「d-none d-md-block d-lg-none」

xs sm md lg
非表示 非表示 表示 非表示

ディスクトップで表示、それ以外は非表示となります。

 

xs/smのみ表示「d-sm-block d-md-none」

xs sm md lg
表示 表示 非表示 非表示

スマホとタブレットで表示、それ以外は非表示となります。

 

「d-none」「d-block」「d-*-none」「d-*-block」と値がたくさんあるので、パターンも複雑になります。

 

紹介したパターンが理解できれば、他のパターンを作れるようになりますので、記載したものを理解しておきましょう。

 

 

SEO的には全デバイスで同じ表示が推奨

「d-none」を適用するパーツは、本編と関係ないパーツに絞って使いましょう。

 

SEO的には、どのデバイスで見ても同じ表示が推奨されていることと、

スパム扱いされてしまう可能性があるからです。

 

今回のように穴埋め要素は特に本編とは関係ないパーツです。

たまに使うのは「改行」の表示・非表示です。

中央寄せのテキストの場合、幅によっては変なところで改行されてしまうため、

表示・非表示を設定して、改行位置に違和感のないようにするために使用しています。

 

考えて使ってください。

 

穴埋め要素の表示・非表示を制御しよう

穴埋め要素のパーツだけ、スマホで表示、それ以外は非表示の設定をしてみましょう。

上記に記載したコードの中から、適切なものを選択し、クラス名に付与するだけですね。

設置したらブラウザの幅を変えて確認してみましょう。

 

それではコードを。

<div class="card border-0 d-sm-none">
  <!-- 中略 -->
</div>

スマホで表示、それ以外は非表示にするクラス名は「d-sm-none」でしたね。

 

これで穴埋め要素が完了し、さらにこのページも完成です。

 

Bootstrap5サンプルサイト-CatBed
Bootstrap5サンプルサイト-CatBed

SAKUWEB さくうぇぶ

今回はいろいろと要素を詰め込んだので、過去に学んだ内容を忘れてしまっているかもしれません。

何度も同じことを繰り返して覚えていけばいいので、作り続けましょう。

 

まとめ

表示・非表示を切り替える「Display」

非表示にするには「d-none」を指定

ブレイクポイントで切り替える場合は「d-*-none」で指定

組み合わせにより、デバイスごとに制御できる

SEO的には全デバイスで同じ表示が推奨

「d-none」を使う時は、本編に関係ないところで利用する

スパムと勘違いされてしまう可能性がある

Recent Post

Category Post

Back To Top