display:none / visibility:hidden

CSS

displayプロパティ

 状態:-  閲覧数:2,337  投稿日:2014-07-09  更新日:2014-07-09
ブロックレベル・インライン等の、要素の表示形式を指定する際に使用
・値は全17種類の中から1つ指定可能
※以下抜粋
効果 表示非表示
inline インラインボックス生成(初期値) 表示
block ブロックボックス生成 表示
inherit 親要素の値を継承 親依存
none 要素は表示されない。描画エリアも確保されない(レイアウト影響あり) 非表示


visibilityプロパティ


ボックスの表示(visible)・非表示(hidden)を指定する際に使用
・値は全3種類の中から1つ指定可能
効果 表示非表示
visible ボックス表示 表示
collapse テーブル(表)の行や列にこの値を指定すると、その部分を詰めて表示 表示
hidden 要素は表示されないが、描画エリアは確保される(レイアウト影響なし) 非表示


jQueryでCSS表示非表示関連プロパティを操作 / 同義処理を実施するメソッド

 閲覧数:683 投稿日:2014-07-09 更新日:2014-07-09

一覧表

メソッド名 効果 表示非表示
show() 表示 表示
toggle() 表示していたら非表示へ、非表示なら表示へ変更 現状に依存
hide() display:noneと同義 非表示
下記2つは同じ意味
$("セレクタ記述").css("display", "none"); 

$("セレクタ記述").hide(); 


下記は上記とは意味が異なる
・「visibility:hidden」に該当するjQuery独自メソッドは存在しない
$("セレクタ記述").css("visibility","hidden"); 



displayプロパティ


inline
$("セレクタ記述").css("display", "inline"); 


none
$("セレクタ記述").css("display", "none"); 



visibilityプロパティ


visible
$("セレクタ記述").css("visibility","visible"); 


hidden
$("セレクタ記述").css("visibility","hidden"); 



jQueryメソッド


show()
$("セレクタ記述").show(); 


hide()
$("セレクタ記述").hide(); 

・display:none;と同義
・要素は表示されない
・描画エリアも確保されない(レイアウト影響あり)

toggle()
$("セレクタ記述").toggle(); 

・各要素のうち、「表示状態にあるものは非表示」、「非表示状態にあるものは表示状態」へ変更

「display: none」と「visibility:hidden」では何が違うの?

 閲覧数:611 投稿日:2014-07-09 更新日:2017-11-01

display: none


スペース確保
・✕

表示
・✕


visibility:hidden


スペース確保
・◯

表示
・✕


「display: none」と「jQuery hide()メソッド」では何が違うの?


以前表示していた値へ戻す場合
hide()メソッドの方が良い


hide()メソッドオプション一覧
jQuery – いろんなセレクタ指定方法+αを覚えて、目的の要素をさくっと取得する
jQueryのセレクタ解説


擬似要素

perspectiveのベンダープレフィックスを自動付与したい



週間人気ページランキング / 2-12 → 2-18
順位 ページタイトル抜粋 アクセス数
1 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 11
2 金融機関ブランドカラー / コーポレートカラー | カラーコード(色) 9
3 鉄道会社毎のカラーコード | カラーコード(色) 7
3 RGB ⇔ Lab | 色変換(色) 7
4 「bgcolor」「background-color」「background」の違い | CSS 5
4 16進数カラーコード / 2進数 5
5 血の色 / #b30000 / #360800 / #ff0000 | カラーコード(色) 4
5 「東京都」のカラーコード取得は難しい | カラーコード(色) 4
5 Design 0 4
5 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 4
6 「コズミックブルー」は、くすんだ青系全般の色を指す用語だと思います。 | カラーコード(色) 3
6 「属性」「プロパティ」「アトリビュート」の違い | CSS 3
6 黒体 / 色温度 / D65(6500K)/ D50(5000K)/ K | 色 3
7 ログイン 2
7 Chrome でキャッシュを効かさない | Google Chrome(ブラウザ) 2
7 Fireworks で背景画像透明化 | Fireworks CS3(Fireworks) 2
7 FontAwesomeでアイコンが□(四角)になって表示されない Forbidden  | Font Awesome(フォント) 2
7 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能 2
7 height:100%;の効果を打ち消す(あるいは上書きする)には、height:auto!important; | CSS 2
7 24ビットカラーにおけるHLS要素範囲 / 最小値 ~ 最大値 2
2025/2/19 1:01 更新