display:none / visibility:hidden

CSS

displayプロパティ

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


visibilityプロパティ


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


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

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

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

display: none


スペース確保
・✕

表示
・✕


visibility:hidden


スペース確保
・◯

表示
・✕


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


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


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


擬似要素

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



週間人気ページランキング / 1-29 → 2-4
順位 ページタイトル抜粋 アクセス数
1 RGB ⇔ Lab | 色変換(色) 49
2 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 38
3 「bgcolor」「background-color」「background」の違い | CSS 34
4 血の色 / #b30000 / #360800 / #ff0000 | カラーコード(色) 25
5 RGBの種類 / ビットカラー | RGB(色) 20
6 「属性」「プロパティ」「アトリビュート」の違い | CSS 18
6 Design 0 18
7 「東京都」のカラーコード取得は難しい | カラーコード(色) 17
8 金融機関ブランドカラー / コーポレートカラー | カラーコード(色) 16
9 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 15
9 Chrome でキャッシュを効かさない | Google Chrome(ブラウザ) 15
10 「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード) | Font Awesome(フォント) 14
11 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 13
11 「Bootstrapデザイン」✕「グラフ」 | 2系(Bootstrap) 13
11 「:after擬似要素」は、Chromeの「要素を検証」で確認できない | 擬似(CSS) 13
11 ICCプロファイル | カラーマネージメント(色) 13
11 HSLとHSVの違い | 色変換(色) 13
11 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 13
12 max-width: 100%の効果を打ち消すには、max-width: none; | CSS 12
13 GIMPで「レイヤーとして開く」を選択した画像、の位置情報(x,y)を表示させる方法が分からない | GIMP 系(ソフトウェア) 11
2023/2/5 1:01 更新