JavaScriptでHTML要素を表示・非表示にする方法
JavaScriptでは、CSSスタイルを操作することで、HTML要素を簡単に表示・非表示できます。CSSには要素の表示状態を制御するdisplayプロパティが用意されており、値にnoneを指定すれば要素を隠し、blockを指定すれば再び表示させることが可能です。
要素を非表示にする方法
コード例
以下の例では、「Hideme」ボタンをクリックすると、pタグ内のテキストが画面から消えます。
<html>
<body>
<p id="hide">JavaScriptを使ってHTML要素を非表示にします。</p>
<input type="button" onclick="document.getElementById('hide').style.display='none'" value="Hideme">
</body>
</html>
上記のコードを実行すると、まず次のような画面が表示されます。
この状態で「Hideme」ボタンをクリックすると、段落内のテキストが非表示になり、ボタンだけが残ります。
実行結果
要素を表示する方法
コード例
次の例では、pタグ内のテキストは初期状態で非表示（display:none）に設定されています。「Showme」ボタンをクリックすると、隠れていたテキストが画面に現れます。
<html>
<body>
<p id="show" style="display:none">JavaScriptなら非表示のHTML要素も表示できます</p>
<input type="button" onclick="document.getElementById('show').style.display='block'" value="ShowMe">
</body>
</html>
上記のコードを実行すると、最初はボタンだけが表示されます。
このボタンをクリックすると、非表示だったテキストが次のように画面に現れます。
実行結果
補足：display:none と visibility:hidden の違い
要素を隠す方法としては、visibility: hidden を使うこともできます。こちらは要素が見えなくなるだけで、レイアウト上のスペースは保持されるという点が display: none との大きな違いです。スペースごと消したい場合は display: none、場所を確保したまま見た目だけ隠したい場合は visibility: hidden を選ぶなど、用途に応じて使い分けるとよいでしょう。
-
Windows 10のタスクバーでWindows Ink Workspaceボタンを表示・非表示にする3つの方法
Surface Pro 4やSurface Bookなど、アクティブペン対応デバイスをお使いのPCユーザーの場合、Windows Ink Workspaceはデフォルトで有効になっており、タスクバーの通知領域にあるペンボタンからアクセスできます。ただし、アクティブペンがペアリングされていないデバイスでは、このボタンは表示されません。アクティブペン非対応のデバイスでも、Windows Ink Workspaceボタンを手動で有効にすれば、Windows Ink Workspaceを試すことが可能です。この記事では、Windows 10でタスクバーの通知領域(システムトレイ)にあるWindows
-
Microsoft Edgeで「コレクション」ボタンを表示・非表示にする2つの簡単な方法
この記事では、Microsoft Edgeブラウザの「コレクション」ボタンを表示または非表示にする方法を解説します。これにより、自分の使い方に合わせてツールバーを自由にカスタマイズできます。コレクション機能は、Web閲覧中に収集した情報やデータを保存しておける便利な機能です。しかし、コレクション機能をあまり使わないユーザーにとっては、ツールバー上のボタンが不要に感じられることもあります。その場合は、ボタンを非表示にしてすっきりさせるとよいでしょう。なお、Edgeにはこのオプションが標準で搭載されているため、拡張機能やサードパーティ製ソフトウェアを追加でインストールする必要はありません。かつては