bootstrap

bootstrapのhiddenとは?使い方を紹介

投稿日:

Pocket

うも、チャーさんです。

 

あなたはbootstrapのhiddenとは、

何だろう?と思っていませんか?

 

この記事ではbootstrapのhiddenとは、

何かを説明しています。

 

またwebページ制作における、

hiddenの使い方も紹介していますので、

hiddenについて知りたい場合はこのままお読みください。

 

スポンサードサーチ

bootstrapのhiddenとは?

 

で結論から言いまして、

bootstrapのhiddenとは、

簡単に言えば、display:noneのことです。

 

なので、このクラスを任意のタグにつけておくと、

その要素を消すことができます。

 

 

というわけで、早速具体例をみてみましょう。

 

画像でわかる通り、

hiddenというクラスをつけた部分である、

h1タグのHello world!が消えてますね。

 

こんな風にbootstrapでは、

hiddenというクラス名を用意しており、

display:noneと同じ機能になっております。

 

スポンサードサーチ

bootstrapのhiddenはレスポンシブ対応

 

また、このhiddenは、

レスポンシブ対応にもなっています。

 

例えば改行を例としてあげましょう。

 

 

webページ制作では、

パソコンサイズで見た目を整えようと、

改行を入れますよね。

 

以下の画像はパソコンサイズで、

brタグを入れて改行してます。

 

 

しかし、これで画面サイズを縮めると、

 

 

こんな風に改行が変なとこに入って、

見た目が崩れますよね。

 

でこんな時に、hiddenを使います。

 

すると、

 

 

このように改行タグがなくなって、

前の画像の時のように、

変なとこで改行されなくなりましたね。

 

で説明が後になりましたが、

 

ブートストラップのhiddenでは、

ブレイクポイントごとにhiddenを、

効かすことができます。

 

 

なので、上の画像では画面サイズが、

スマホサイズになったら、

brタグを消す(display:none)になっています。

 

そのため、改行がいい感じにされて、

画面サイズを変えても見た目が、

崩れないようにできるのです。

 

便利ですね!

 

 

というわけで、例をみてきて

わかったと思いますが、

hiddenは要素を消すものだと思ってくれればOKです。

 

スポンサードサーチ

bootstrapのhiddenの使い方

 

で、ここからはhiddenを使う手順について、

お話しします。

 

bootstrapの環境設定をする

 

まずはbootstrapを使えるようにしましょう。

 

と言うのも、bootstrapは、

何もせずにクラス書けば使えるというものでは、

ないからです。

 

やり方は、bootstrapの公式サイトで、

ファイルをダウンロードするか、

CDNをファイルにコピペしましょう。

 

詳しい設定のやり方はこちらの記事をどうぞ。

ブートストラップの使い方を初心者向けに紹介

 

タグにクラスをつけましょう。

 

そして、それができたらここからは実際に、

コーディングですが使い方は簡単で、

消したいタグにhiddenとクラス名をつけるだけです。

 

そうすれば要素が消えます。

 

 

またレスポンシブ対応にするには、

hiddenの後に-ハイフンと、

smやxsなどブートストラップで決められた単語を、

つければokです。

 

例えば

<p class=”hidden-xs”></p>

のようにです。

 

こうするとスマホサイズになると、

このpタグの中に書いたものは消えます。

 

 

またこちらのsmやxsですが、

これは画面サイズの数値、

ブレイクポイントの数値を表してます。

 

例えば、smだとタブレットサイズです。

 

これらはブートストラップのサイトに、

書いてるので、サイトを参照してみてください。

 

スポンサードサーチ

bootstrap、hiddenの注意点

 

で、こちらのhiddenですが、

現在(2019年4月執筆時点)最新の、

bootstrapバージョン4ではクラス名が以下に変わってます。

 

hidden → d-none

 

なので、バージョン4のbootstrapを使うと、

hiddenとクラス名を書いても効かないので、

注意しましょう。

 

 

また、hiddenが使えるのは、

バージョン4以前でして、

バージョン3だと使えます。

 

そのため、hiddenを使うときは、

お使いのbootstrapのバージョンを、

確かめるようにしましょう。

 

 

ちなみに公式サイトでは何もしなければ、

表示されてるのはバージョン4なので、

 

普通に公式サイトからダウンロードしたりCDNをコピペすると、

バージョン4になってます。

 

バージョン4以外を使いたい場合は、

bootstrapの公式サイトの画面右上にある、

v.4とvと数字の書いてるタブをクリックして選びましょう。

 

スポンサードサーチ

まとめ

 

ということでまとめに入ります。

bootstrapのhiddenとは、

display:noneのことです。

 

このクラスをつけると、

要素が消えるので、要素を消したいときに、

クラスをつけましょう。

 

またレスポンシブ対応なので、

ブレイクポイントに合わせて使うと、

デザインの幅が広がりますよ。

 

 

またお使いのbootstrapのバージョンによっては、

クラス名がhiddenではないので、

そこも注意しましょう。

 

それでは、読んでもらってありがとうございました。

 

 

チャーさん

-bootstrap


スポンサードサーチ

関連記事

no image

ブートストラップのpushとpullの機能と使い方の紹介

どうも、チャーさんです。   あなたはブートストラップの、 pullとpushってなに? と思っていませんか?   この記事では、ブートストラップの、 pushとpullを具体例と …

no image

ブートストラップを使う利点をわかりやすく説明します。習得方法も紹介。

  どうもチャーさんです。   あなたはブートストラップを使う利点は、 何だろうと思っていませんか?   css使えばデザインなんてできる、 何でわざわざブートストラップ …

no image

ブートストラップの使い方を初心者向けに紹介

どうも、チャーさんです。   あなたはブートストラップを使ってみたい、 または使わないといけないけど、 使い方がわからない。   導入の仕方も、何したらいいかもわからない。 そんな …

最新記事

チャーさん

プログラミング・筋トレ・unity系の記事などを書いてます。

大学卒業後→開業→個人事業主7年目ぐらいです。webサイト制作したり、unityでゲーム開発しております。

youtubeもやってまして、主にプログラミング動画とかunity系の動画をあげてるので見てください。