自分でできる簡単更新!オリジナルのホームページ制作ならkayokiseki-design

  

Bootstrap表示・非表示class

新年明けましておめでとうございます。今年はどんなHPトレンドが来るのでしょうか、楽しみですね!


栄枯盛衰、流行りは必ず廃るもの。わたしは服は数年着るので流行りのデザインは買わないのですが、アパレル同様Webデザインも流行ったものをいつまでも使用していると流行遅れに見えてしまいます(;´Д`)。ホームページの制作を検討されている方は、「2~3年は安定して使い続けられるデザイン」を提案してくれる制作会社さんを選ばれてくださいネ!

本日のエントリーはタイトルの通りですが、新年なのでまず昨年わたしが廃ったと感じているものをご紹介。

[広告]

■ゴーストボタン

レスポンシブデザインではもっとも安定したデザインができる1カラムサイトで、2015年に飽きるほど多用されました。


昨今の大型ディスプレー主流となっているデスクトップ市場で、画面いっぱいにアイキャッチ画像が広がったときの画素数不足によるボケ、または軽量化するための粗、はたまたオシャレな写真風に抽象的なものを撮って#000000を0.3ほど乗せた上記の画像のようなイメージ写真の上に、テキスト&CSSでボタンを描画する手法です。

欠点は、画像上のボタンより視点が先に下の文字コンテンツに流れるため、クリック率が低いという致命的なもの。ボタンとして広く認知されないままその流行を終えました。


■FLASH風動的ボタン・動的コンテンツ

これも前回のオリンピックの時にいやというほど見たので、流行は2014年~15年と思います。


ボタンは当時わたしも導入を試みたのですが、すべてのデバイスやブラウザで確実な挙動を得ることができなかったのでやめました。

CSSアニメーションでキャラクターが動くのも最近はめっきり減りました。当時消えゆくFLASHのような動きのあるものを何が何でも制作したい側と、「動く=なんか格好いい」という顧客側のニーズのマッチが生んだ流行だったのではないでしょうか。


では、本題です。

昨年最後のエントリー「Bootstrapコードを速く書く」で、

「表示非表示、左右の入れ替えなどのclass名もBootstrapには用意されています。(これはのちほど扱いたいと思います)」

と書いたので、早速新年のエントリーではこちらを扱います。


BootstrapのCSSには、あるコンテンツをディスプレー幅によって表示・非表示にするclassが用意されています。

「あるコンテンツをディスプレー幅によって表示・非表示にする」よくあるケースとしては…

  • 読み込みの利便性を考えて、アフィリエイト広告などのバナースペースをモバイルサイズでは減らす。
  • 読み込みやデザイン上の理由で、アイキャッチイメージをPCサイズとモバイルサイズで切り替える。
  • 画面上の操作性やデザイン上の理由で、ロゴマークをPCサイズとモバイルサイズで切り替える。

などが考えられますね!


さて、このclassですが、Bootstrap v3.3.7とBootstrap v4.0.0-alpha.2ではかなり変更されていますので、両方ご紹介します。

v3.3.7では、ある1サイズにおいて表示・非表示を設定する方式だったのが、v4.0.0-alpha.2では、ある1サイズ以上・以下において表示・非表示を設定する方式となりました。

やりたいことによって、どちらのほうが使い勝手がいいかということもあると思います。シンプルなCSSですしclass名も重複していないので、コピペして両方使えるようにしておくのもひとつの手と思います。

■Bootstrap v3.3.7

v3.3.7 xs(~767) sm(768~991) md(992~1199) lg(1200~)
.visible-xs
display: block
.visible-xs-block
display: block
.visible-xs-inline
display: inline
.visible-xs-inline-block
display: inline-block
.hidden-xs
.visible-sm
display: block
.visible-sm-block
display: block
.visible-sm-inline
display: inline
.visible-sm-inline-block
display: inline-block
.hidden-sm
.visible-md
display: block
.visible-md-block
display: block
.visible-md-inline
display: inline
.visible-md-inline-block
display: inline-block
.hidden-md
.visible-lg
display: block
.visible-lg-block
display: block
.visible-lg-inline
display: inline
.visible-lg-inline-block
display: inline-block
.hidden-lg

◆表示・非表示サンプル ※ブラウザーウィンドウ幅を伸縮してご覧ください。

<img src="スマホ縦.png" width="100" height="100" alt="" class="visible-xs-block" />
<img src="タブレット.png" width="100" height="100" alt="" class="visible-sm-block" />
<img src="ノート.png" width="100" height="100" alt="" class="visible-md-block" />
<img src="デスクトップ.png" width="100" height="100" alt="" class="visible-lg-block" />



■Bootstrap v4.0.0-alpha.2

v4.0.0-alpha.2 xl(~543) xs(544~767) sm(768~991) md(992~1199) lg(1200~)
.hidden-xl-down
.hidden-xs-down
.hidden-sm-down
.hidden-md-down
.hidden-lg-down
.hidden-xs-up
.hidden-sm-up
.hidden-md-up
.hidden-lg-up
.hidden-xl-up

◆表示・非表示サンプル ※ブラウザーウィンドウ幅を伸縮してご覧ください。

<img src="スマホ縦.png" width="100" height="100" alt="" class="hidden-sm-up" />
<img src="スマホ横.png" width="100" height="100" alt="" class="hidden-xs-down" />
<img src="タブレット.png" width="100" height="100" alt="" class="hidden-sm-down" />
<img src="ノート.png" width="100" height="100" alt="" class="hidden-md-down" />
<img src="デスクトップ.png" width="100" height="100" alt="" class="hidden-lg-down" />



考え方としてはv4.0.0-alpha.2方式の方が理解しやすいのですが、例えば上記の例でいうところの

・読み込みやデザイン上の理由で、アイキャッチイメージをPCサイズとモバイルサイズで切り替える。

では、PCサイズ、タブレットサイズ、モバイルサイズとそれぞれに、最適な画素数と縦横比のイメージを用意したいということもあるかもしれませんね。その時はv3.3.7の方が幸せになれます。

[広告]

Bootstrapコードを速く書く ブログTOP body内にstyleを書く
Hotentry
Blog Post
Archives
クリックして上に戻る