どうも、チャーさんです。
あなたはbootstrapのhiddenとは、
何だろう？と思っていませんか？
この記事ではbootstrapのhiddenとは、
何かを説明しています。
またwebページ制作における、
hiddenの使い方も紹介していますので、
hiddenについて知りたい場合はこのままお読みください。
スポンサードサーチ
目次
で結論から言いまして、
bootstrapのhiddenとは、
簡単に言えば、display:noneのことです。
なので、このクラスを任意のタグにつけておくと、
その要素を消すことができます。
というわけで、早速具体例をみてみましょう。
画像でわかる通り、
hiddenというクラスをつけた部分である、
h１タグのHello world!が消えてますね。
こんな風にbootstrapでは、
hiddenというクラス名を用意しており、
display:noneと同じ機能になっております。
スポンサードサーチ
また、このhiddenは、
レスポンシブ対応にもなっています。
例えば改行を例としてあげましょう。
webページ制作では、
パソコンサイズで見た目を整えようと、
改行を入れますよね。
以下の画像はパソコンサイズで、
brタグを入れて改行してます。
しかし、これで画面サイズを縮めると、
こんな風に改行が変なとこに入って、
見た目が崩れますよね。
でこんな時に、hiddenを使います。
すると、
このように改行タグがなくなって、
前の画像の時のように、
変なとこで改行されなくなりましたね。
で説明が後になりましたが、
ブートストラップのhiddenでは、
ブレイクポイントごとにhiddenを、
効かすことができます。
なので、上の画像では画面サイズが、
スマホサイズになったら、
brタグを消す(display:none)になっています。
そのため、改行がいい感じにされて、
画面サイズを変えても見た目が、
崩れないようにできるのです。
便利ですね！
というわけで、例をみてきて
わかったと思いますが、
hiddenは要素を消すものだと思ってくれればOKです。
スポンサードサーチ
で、ここからはhiddenを使う手順について、
お話しします。
bootstrapの環境設定をする
まずはbootstrapを使えるようにしましょう。
と言うのも、bootstrapは、
何もせずにクラス書けば使えるというものでは、
ないからです。
やり方は、bootstrapの公式サイトで、
ファイルをダウンロードするか、
CDNをファイルにコピペしましょう。
詳しい設定のやり方はこちらの記事をどうぞ。
↓
タグにクラスをつけましょう。
そして、それができたらここからは実際に、
コーディングですが使い方は簡単で、
消したいタグにhiddenとクラス名をつけるだけです。
そうすれば要素が消えます。
またレスポンシブ対応にするには、
hiddenの後に-ハイフンと、
smやxsなどブートストラップで決められた単語を、
つければokです。
例えば
<p class=”hidden-xs”></p>
のようにです。
こうするとスマホサイズになると、
このpタグの中に書いたものは消えます。
またこちらのsmやxsですが、
これは画面サイズの数値、
ブレイクポイントの数値を表してます。
例えば、smだとタブレットサイズです。
これらはブートストラップのサイトに、
書いてるので、サイトを参照してみてください。
スポンサードサーチ
で、こちらのhiddenですが、
現在(2019年4月執筆時点)最新の、
bootstrapバージョン４ではクラス名が以下に変わってます。
hidden → d-none
なので、バージョン４のbootstrapを使うと、
hiddenとクラス名を書いても効かないので、
注意しましょう。
また、hiddenが使えるのは、
バージョン４以前でして、
バージョン３だと使えます。
そのため、hiddenを使うときは、
お使いのbootstrapのバージョンを、
確かめるようにしましょう。
ちなみに公式サイトでは何もしなければ、
表示されてるのはバージョン４なので、
普通に公式サイトからダウンロードしたりCDNをコピペすると、
バージョン４になってます。
バージョン４以外を使いたい場合は、
bootstrapの公式サイトの画面右上にある、
v.4とvと数字の書いてるタブをクリックして選びましょう。
スポンサードサーチ
まとめ
ということでまとめに入ります。
bootstrapのhiddenとは、
display:noneのことです。
このクラスをつけると、
要素が消えるので、要素を消したいときに、
クラスをつけましょう。
またレスポンシブ対応なので、
ブレイクポイントに合わせて使うと、
デザインの幅が広がりますよ。
またお使いのbootstrapのバージョンによっては、
クラス名がhiddenではないので、
そこも注意しましょう。
それでは、読んでもらってありがとうございました。
チャーさん
