CSS: HTML 要素の表示・非表示

title 属性 (2024/04)

title 属性はどのタグにも付けることができます。 タグの領域にマウスカーソルを持ってくるとツールチップ (吹き出しのメッセージ) を表示します。

表示するテキストを途中で改行させたい場合は 
 を入れます。 
 はラインフィード (LF : line feed, JavaScript の \n) を表す特殊文字です。
改行を表す文字コード

details タグと summary タグ

details タグ と summary タグ は近年の新しいタグです。 IE11 が対応しなかったため 2010年代まであまり使われませんでした。 詳細説明 (details) を開いて表示したり、閉じて要約 (summary) だけの表示にしたりするのを簡単にできます。 下で出てくるような CSS の display や :focus や tabindex を使った複雑な書き方が不要になります。
details タグ、summary タグ

dialog タグ (2023)

ダイアログを表示する用途では従来は div を表示・非表示する方法が使われていましたが、 近年は dialog タグ があります。 ただし少々の JavaScript が必要です。
HTML 要素の表示・非表示: JavaScript

(工事中) CSS popover (2024)

CSS の popover を使うと JavaScript が不要になります。 ただし、2023年時点では Chrome と Edge しか対応していません。

CSS display と visibility

HTML 要素の表示・非表示は CSS の display や visibility で設定することができます。

• MDN: display
  display: none; はタグの区画自体が確保されません。
• MDN: visibility
  visibility: hidden; はタグの区画は確保されていますが、 内容を表示しません。

• TestCSS_display_visibility01.html
  display と visibility の違いのサンプル。 div タグの例。 p タグや li タグや dd タグなどのブロック要素も扱い方は同じです。

:target 擬似クラスでポップアップ表示 (2024/04)

• CSS: :target 擬似クラス
  

タブパネルなどの表示

タブパネルなどの表示は :focus を使うよりも input タグ の ラジオボタン (type="radio") を使った方が操作性が安定します。
input タグ: type="radio" ラジオボタン

:focus 擬似クラスで要素を表示・非表示する

ul, li タグを組み合わせたサンプル

• ul,ol,li タグ
  
• TestHTML_ul_li_div_focus03.html
  li:focus のサンプル。li 内の div をポップアップ表示する。
  div を position: absolute; にして li に対して重ねて表示します。

CSS position: fixed; でウインドに対して固定位置で表示する

固定のメニューやアプリケーションのツールの表示など。

:hover 擬似クラス

:hover は文字の強調や領域のハイライト表示などの用途に限定した方が良いです。

:hover でも :focus に似た複雑な表示・ 非表示ができますが、不安定な表示状態で操作性が悪くなるので ポップアップメニューやタブパネルなどの用途で使わない方が良いです。

• TestCSS_hover01.html
  :hover と :active のサンプル。

JavaScript で要素を表示・非表示する

関連

• CSS: 要素の表示・非表示: JavaScript
  
• HTML: タブパネル
• CSS: 要素の配置: ブロック要素
• CSS: 要素の配置: 左右中央, 上下中央