.NETエンジニア・プログラマ向けの技術情報・業界ニュースをお届けします。

  1. FEnet.NETナビ
  2. .NETコラム
  3. プログラミング言語
  4. Javascript
  5. jqueryでのhiddenの使い方|選択される隠された要素もあわせて解説

jqueryでのhiddenの使い方|選択される隠された要素もあわせて解説

  • Javascript
  • プログラミング言語
公開日時:   更新日時:
jqueryでのhiddenの使い方|選択される隠された要素もあわせて解説
この記事でわかること
    基本情報技術者試験の試験対策はこちら>>
    プロジェクト
    リーダー
    visibilityプロパティを使うと、隠された要素の中の一部だけを表示するなどの小回りが効くんですよ。
    プログラマー
    なるほど…!

    jqueryにおけるhiddenとhideとの違い


    jqueryには要素の表示状態に関する機能がいくつかありますが、その中でも非表示な要素に対する機能としてhiddenとhideがあります。今回はhiddenとhideの違いやそれぞれの使い方について解説していきます。ぜひ、参考にしてください。

    構文から見る違い

    jqueryにおけるhiddenとはセレクタです。セレクタで要素を取得するときに:(コロン)に続けてhiddenを設定すると画面上で非表示になっている要素を選択することができます。

    jqueryにおけるhideとはメソッドです。jquery要素にhideメソッドを使うことで要素を非表示にすることができます。

    使い方から見る違い

    hiddenセレクタは以下のように使います。

    hideメソッドは以下のように使います。

    hiddenを設定することによって選択される隠された要素3つ


    hiddenセレクタは画面に表示されていない要素を取得することができます。表示されていない要素には、透明度・幅・高さが0である、編集フォームでtypeがhiddenである、CSS設定においてdisplayがnoneである、の3つのパターンがあります。

    1:透明度・幅・高さが0である

    CSSのwidth、heightプロパティなどで幅と高さを0に設定すると、その要素は画面に表示されなくなります。また、fadeOutメソッドを使うとアニメーションしながら要素を隠すことができ、その要素は透明度が0になり画面に表示されなくなります。hiddenセレクタではこれらの要素を取得することができます。

    2:編集フォームでtypeがhiddenである

    フォーム要素はtypeに設定した値によってさまざまなコントロールになりますが、typeにhiddenを設定すると画面に表示されないコントロールになります。hiddenセレクタではこの画面に表示されないコントロールを取得することができます。

    3:css設定においてdisplayがnoneである

    CSSのdisplayプロパティは要素の表示形式を決めるもので、blockやinline、inline-blockなどを設定できます。このdisplayプロパティにnoneを指定するとその要素は非表示になります。hiddenセレクタではこの非表示になった要素を取得することができます。

    jqueryでのhiddenの使い方7つ


    では、実際にjqueryでhiddenセレクタを使う方法について解説していきます。

    hiddenセレクタの使い方としては、name属性を使った値の取得および設定、id属性を使った値の取得および設定、カンマ区切りで複数値の取得および設定があります。

    これらについてサンプルコードを交えて説明します。また、hiddenと似た意味を持つvisibilityの使い方についても説明します。

    1:nameを使用してhiddenに値を設定する方法

    name属性を使用してhiddenな要素に値を設定します。サンプルコードは以下のようになります。

    2:nameを使用してhiddenの値を取得する方法

    name属性を使用してhiddenな要素の値を取得します。サンプルコードは以下のようになります。

    3:idを使ってhiddenの値を設定する方法

    id属性を使用してhiddenな要素の値を設定します。サンプルコードは以下のようになります。

    4:idを使ってhiddenの値を取得する方法

    id属性を使用してhiddenな要素の値を取得します。サンプルコードは以下のようになります。

    5:hiddenに配列をカンマ区切りで設定する方法

    hiddenな要素に配列をカンマ区切りで設定します。サンプルコードは以下のようになります。

    6:カンマ区切りのhiddenデータを配列として取得する方法

    カンマ区切りのhiddenな要素の値を配列として取得します。サンプルコードは以下のようになります。

    7:hiddenと似た意味を持つvisibilityプロパティの使い方

    visibilityプロパティは、要素の表示形式を変更できるCSSのプロパティの一つです。visibilityプロパティでは、以下のような値を使ってjqueryの中で次のように記述します。
    ■要素を表示
    要素名.style.visibility = “visible”;

    ■要素の非表示
    要素名.style.visibility = “hidden”;

    ■要素を詰めて非表示
    要素名.style.visibility = “collapse”;

    同じように表示・非表示を切り替えるプロパティに [display: none] が挙げられますが、displayプロパティは要素分の領域を詰めるのに対し、visibilityプロパティでは要素分の領域を確保するため、レイアウトが崩れにくいというメリットがあります。

    ただし、一点注意点として“Internet Explorerには対応していない”ということを覚えておきましょう。

    <補足>
    Internet Explorer(IE)は、今回のvisibilityプロパティをはじめ他のプロパティなどにも対応していないことが多いです。開発を行う環境としてIEは優れていないため、もし現在IEを使用しているのであれば他のブラウザに切り替えることをおすすめします。

    visibilityプロパティを使って表示・非表示を切り替えてみよう

    ここでは、実際にvisibilityプロパティを使って要素の表示・非表示を切り替えていきます。
    ソースコードは次のとおりです。

    実行すると、次のような結果になります。

    では、真ん中のロゴを非表示にしてみましょう。

    すると・・・

    ロゴは非表示となっていますが、ロゴがあった場所は残っていることが分かりますね。これがvisibilityプロパティの最大の特徴です。ちなみにvisibilityプロパティを使わずに [display] プロパティを使うと、次のような表示となります。

    jqueryでhiddenを使うときの注意点


    :hiddenセレクタはjqueryの拡張機能であり、CSSの仕様には含まれていないセレクタです。このため、他セレクタと比べると処理が若干重くなります。

    対処法としてはCSSのセレクタで要素を選択したのちにトラバースのfilterメソッドで再度絞り込むようにする方法があります。

    プロジェクト
    リーダー
    このように、それぞれのプロパティやメソッドの特徴を知っておくと、ウェブページを作成するときにも役立ちますよ。
    プログラマー
    分かりました!

    必要に応じてhiddenやvisibilityプロパティを活用していこう


    jQueryでは表示・非表示を切り替えるためのさまざまなプロパティやメソッドが用意されているため、比較的visibilityプロパティの出番は少ないかもしれません。しかし、“要素分の領域を確保したまま非表示にできる”という特徴があるなど、使い方によっては非常に便利なプロパティなので、ぜひ上手く活用してみてください。

    FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。
    株式会社オープンアップシステムロゴ

    株式会社オープンアップシステムはこんな会社です

    秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結!
    数多くのエンジニアが集まります。

    秋葉原オフィスイメージ
    • スマホアプリから業務系システムまで

      スマホアプリから業務系システムまで

      スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。

    • 充実した研修制度

      充実した研修制度

      毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。

    • 資格取得を応援

      資格取得を応援

      スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。

    • 東証プライム上場企業グループ

      東証プライム上場企業グループ

      オープンアップシステムは東証プライム上場「株式会社夢真ビーネックスグループ」のグループ企業です。

      安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。

    株式会社オープンアップシステムに興味を持った方へ

    株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。

    年収をアップしたい!スキルアップしたい!大手の上流案件にチャレンジしたい!
    まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。

    株式会社オープンアップシステムへのご応募はこちら↓
    株式会社オープンアップシステムへのご応募はこちら↓

    新着案件New Job