[Bootstrap]スマホの時だけ隠したい画面があるのですが(hidden,visible)
ダディーです。
BootstrapでWebサイトを作っている時、こんなことが。
「広告を置くスペースを確保してみたが、スマホで表示するとだいぶ窮屈じゃないか…?」
どんな感じのWebサイトになったのかというとこんな感じ。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<div class="container"> <div class="row"> <div class="col-md-3 col-sm-3 col-xs-3"> コンテンツA </div> <div class="col-md-6 col-sm-6 col-xs-6"> コンテンツB </div> <div class="col-md-3 col-sm-3 col-xs-3"> 広告 </div> <div class="col-md-12 col-sm-12 col-xs-12"> コンテンツC </div> </div> </div> |
コンテンツA
コンテンツB
広告
コンテンツC
スマホで表示すると横にあるコンテンツが潰れて窮屈になりますね。
(PCの方はブラウザの画面幅を狭めてみるとわかりやすいと思います。)
この場合、スマホ表示の時だけ広告を非表示にして、その分を横のコンテンツに割り当ててあげれば、
余裕ができるのでは…!と思ったわけです。
特定の画面サイズの時だけ非表示にする -hiddenクラス-
上記の場合、「col-xsの時だけ”広告”を非表示にして、コンテンツAとBの割り当てを増やす」と、
窮屈になったり表記が崩れることもなくすっきりになります。
そのときに大活躍するのがclass=”hidden-xs(sm/md/lg)”です。
使い方は、col-xsの代わりにhidden-xsを置くだけです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<div class="container"> <div class="row"> <div class="col-md-3 col-sm-3 col-xs-6"> <!-- 3→6に割り当てを増やす --> コンテンツA </div> <div class="col-md-6 col-sm-6 col-xs-6"> コンテンツB </div> <div class="col-md-3 col-sm-3 hidden-xs"> <!-- xsのときだけ消える --> 広告 </div> <div class="col-md-12 col-sm-12 col-xs-12"> コンテンツC </div> </div> </div> |
こうすることで、PC表示の時は広告が表示されますがスマホ表示だと広告が消えてコンテンツAに3グリッド分が割り当てられます。
(PCの方はブラウザの画面幅を狭めてみるとわかりやすいと思います。)
コンテンツA
コンテンツB
コンテンツC
hidden各種を適応させた場合、以下の表のとおりに動きます。
hiddenを書いた部分だけ非表示になります。
col-xs | col-sm | col-md | col-lg | |
hidden-xs | 非表示 | 表示 | 表示 | 表示 |
hidden-sm | 表示 | 非表示 | 表示 | 表示 |
hidden-md | 表示 | 表示 | 非表示 | 表示 |
hidden-lg | 表示 | 表示 | 表示 | 非表示 |
タブレット(col-sm)以降の画面サイズでは全て非表示にしたい、という時は
1 2 3 4 |
<!-- sm,xsのときだけ消える --> <div class="col-md-3 hidden-sm hidden-xs"> 広告 </div> |
と書けばいいことになります。
この画面サイズだけ表示させたい -visible-
hiddenとは逆に、スマートフォンのときだけ表示させたいコンテンツなどもあると思います。
ただその場合、hiddenを使ってxsだけ適用させないとなると、
1 2 3 4 |
<!-- xs以外全部非表示設定 --> <div class="hidden-xl hidden-lg hidden-md hidden-sm col-xs-12"> 広告 </div> |
となり、非常にスッキリしない書き方になります。
そんな時に大活躍するのがclass=”visible-xs(sm/md/lg)”です。
使い方は、visible-xsを置いて、col-xs-○○でグリッドの割り当てをするだけです。
1 2 3 |
<div class="visible-xs col-xs-12"> <!-- xs以外全部非表示設定 --> 広告 </div> |
visible各種を適応させた場合、以下の表のとおりに動きます。
visibleを書いた部分だけ表示になります。
col-xs | col-sm | col-md | col-lg | |
visible-xs | 表示 | 非表示 | 非表示 | 非表示 |
visible-sm | 非表示 | 表示 | 非表示 | 非表示 |
visible-md | 非表示 | 非表示 | 表示 | 非表示 |
visible-lg | 非表示 | 非表示 | 非表示 | 表示 |
ディスカッション
コメント一覧
まだ、コメントがありません