display:none / visibility:hidden

CSS

displayプロパティ

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


visibilityプロパティ


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


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

 閲覧数:360 投稿日: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」では何が違うの?

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

display: none


スペース確保
・✕

表示
・✕


visibility:hidden


スペース確保
・◯

表示
・✕


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


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


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

Twitter検索結果。「display:none / visibility:hidden」に関する最新ツイート


擬似要素

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



週間人気ページランキング / 7-21 → 7-27
順位 ページタイトル抜粋 アクセス数
1 RGB ⇔ Lab | 色変換(色) 47
2 画面キャプチャ | Chrome 拡張機能(ブラウザ) 32
3 血の色 / #b30000 / #360800 / #ff0000 | 色 30
4 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 26
5 RGBの種類 / ビットカラー | RGB(色) 17
6 「属性」「プロパティ」「アトリビュート」の違い | CSS 16
7 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 15
7 HSLとHSVの違い | 色変換(色) 15
8 使用していないCSSをチェックする、標準的な方法を知りたい | CSS 14
9 Design 0 12
9 「Bootstrapデザイン」✕「グラフ」 | 2系(Bootstrap) 12
10 「bgcolor」「background-color」「background」の違い | CSS 10
11 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 9
12 親要素の背景色を、CSSで打ち消したい | CSS 7
12 「overflow」効果を打ち消すスタイルシートは、「overflow: auto;」 7
12 キャラクター無料着せ替えジェネレーター Rinmaru Games / オンラインサービス | イラスト素材(デザイン) 7
13 Chromeブックマークの不満な点 | Chromeブックマーク(ブラウザ) 6
13 100/7%ではなく100%/7。(100/7)%ではなく(100%/7) | CSS 6
13 ログイン 6
13 グラデーション練習 | Fireworks 8(Fireworks) 6
2021/7/28 1:01 更新