display:none / visibility:hidden

CSS

displayプロパティ

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


visibilityプロパティ


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


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

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

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

display: none


スペース確保
・✕

表示
・✕


visibility:hidden


スペース確保
・◯

表示
・✕


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


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


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


擬似要素

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



週間人気ページランキング / 1-29 → 2-4
順位 ページタイトル抜粋 アクセス数
1 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 22
2 16進数カラーコード / 2進数 11
3 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 9
4 鉄道会社毎のカラーコード | カラーコード(色) 7
5 キャラクター無料着せ替えジェネレーター Dress up game / オンラインサービス | イラスト参考(デザイン) 6
6 金融機関ブランドカラー / コーポレートカラー | カラーコード(色) 5
7 キャラクター無料作成ジェネレーター / FLASH / オンラインサービス | イラスト参考(デザイン) 4
7 似顔絵ジェネレーター : 似顔絵メーカー / NIGAOE MAKER 4
7 FontAwesomeでアイコンが□(四角)になって表示されない Forbidden  | Font Awesome(フォント) 4
8 「東京都」のカラーコード取得は難しい | カラーコード(色) 3
8 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 3
8 血の色 / #b30000 / #360800 / #ff0000 | カラーコード(色) 3
8 「Google Chrome」の文字が突然ギザギザで表示されるようになったら、「chrome://flags/#top-chrome-md」へアクセス後、右上の「Reset all」ボタンをクリックします。 | Google Chrome(ブラウザ) 3
8 拡張機能が Chrome によって無効にされました / この拡張機能は破損している可能性があります。 | Chrome 拡張機能 3
9 キャラクター無料着せ替えジェネレーター Rinmaru Games / オンラインサービス | イラスト素材(デザイン) 2
9 Design 0 2
9 RGBの種類 / ビットカラー | RGB(色) 2
9 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能 2
9 色空間 / 表色系 / 顕色系 / 混色系 2
9 「Midjourney」を使用してみた感想。2022 年 8 月 2 時点では、画像生成能力自体は素晴らしいと思いますが、UIが致命的に分かりづらかったです。 | AI画像生成 2
2025/2/5 1:02 更新