From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/api/htmlelement/hidden/index.html | 155 +++++++++++++++++++++++++ 1 file changed, 155 insertions(+) create mode 100644 files/ja/web/api/htmlelement/hidden/index.html (limited to 'files/ja/web/api/htmlelement/hidden') diff --git a/files/ja/web/api/htmlelement/hidden/index.html b/files/ja/web/api/htmlelement/hidden/index.html new file mode 100644 index 0000000000..390321e26a --- /dev/null +++ b/files/ja/web/api/htmlelement/hidden/index.html @@ -0,0 +1,155 @@ +--- +title: HTMLElement.hidden +slug: Web/API/HTMLElement/hidden +tags: + - API + - Attribute + - Element + - HTML + - HTML element + - Property + - Reference + - hidden +translation_of: Web/API/HTMLElement/hidden +--- +
+
{{ APIRef("HTML DOM") }}
+
+ +

{{domxref("HTMLElement")}} の hidden プロパティは {{jsxref("Boolean")}}  で、要素が非表示の場合は true で、それ以外の場合は false です。 これは、CSS プロパティの {{cssxref("display")}} を使用して要素の可視性を制御することとはまったく異なります。 hidden プロパティはすべてのプレゼンテーションモードに適用され、ユーザーが直接アクセスできるコンテンツを非表示にするために使用しないでください。

+ +

hidden の適切な使用例は次のとおりです。

+ + + +

不適切な使用例には次のものがあります。

+ + + +
+

hidden でない要素は、hidden 要素にリンクしてはいけません。

+
+ +

構文

+ +
isHidden = HTMLElement.hidden;
+
+
+HTMLElement.hidden = true | false;
+ +

値

+ +

要素がビューから隠されている場合に true になる Boolean。 それ以外の場合、値は false です。

+ +

例

+ +

次に、非表示のブロックを使用して、ユーザーが珍しい要求に同意した後に表示されるお礼のメッセージを含める例を示します。

+ +

JavaScript

+ +
document.getElementById("okButton")
+        .addEventListener("click", function() {
+  document.getElementById("welcome").hidden = true;
+  document.getElementById("awesome").hidden = false;
+}, false);
+ +

このコードは、ウェルカムパネルを非表示にして、その場所に "awesome" という名前のフォローアップパネルを表示する、ウェルカムパネルの [OK] ボタンのハンドラを設定します。

+ +

HTML

+ +

2つのボックスの HTML は次のとおりです。

+ +

ウェルカムパネル

+ +
<div id="welcome" class="panel">
+  <h1>Foobar.com へようこそ！</h1>
+  <p>[OK] をクリックすると、あなたは毎日が素晴らしいことに同意します！</p>
+  <button class="button" id="okButton">OK</button>
+</div>
+ +

この HTML は、ユーザーをサイトに歓迎し、[OK] ボタンをクリックして同意していることを伝えるパネルを（{{HTMLElement("div")}} ブロック内に）作成します。

+ +

フォローアップパネル

+ +

ユーザーがウェルカムパネルの [OK] ボタンをクリックすると、JavaScript コードは2つのパネルのそれぞれの hidden の値を変更して2つのパネルを入れ替えます。 フォローアップパネルは、HTML では次のようになります。

+ +
<div id="awesome" class="panel" hidden>
+  <h1>ありがとう！</h1>
+  <p>今日は素晴らしいことに同意してくれてありがとう！
+  さあ、世界をもっと素晴らしいものにするために、
+  そこから出て、素晴らしいことをしてください！</p>
+</div>
+ +

CSS

+ +

コンテンツは、以下の CSS を使用してスタイル設定されます。

+ +
.panel {
+  font: 16px "Open Sans", Helvetica, Arial, sans-serif;
+  border: 1px solid #22d;
+  padding: 12px;
+  width: 500px;
+  text-align: center;
+}
+
+.button {
+  font: 22px "Open Sans", Helvetica, Arial, sans-serif;
+  padding: 5px 36px;
+}
+
+h1 {
+  margin-top: 0;
+  font-size: 175%;
+}
+ +

結果

+ +

{{ EmbedLiveSample('Example', 560, 200) }}

+ +

仕様

+ + + + + + + + + + + + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('HTML WHATWG', "interaction.html#dom-hidden", "HTMLElement.hidden")}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5.1', "editing.html#the-hidden-attribute", "HTMLElement.hidden")}}{{Spec2('HTML5.1')}}
{{SpecName('HTML5 W3C', "editing.html#the-hidden-attribute", "HTMLElement.hidden")}}{{Spec2('HTML5 W3C')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.HTMLElement.hidden")}}

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf