HTMLのhidden属性の使い方と弱点、要素の表示・非表示を切り替える便利なスタイルシート

ページ上の要素、例えばメニューの中身などの表示・非表示を切り替える必要がある時があります。実装方法はいろいろありますが、要素を非表示にする一番簡単な方法はHTMLのhidden属性です。

HTMLのhidden属性の使い方と弱点、要素の表示・非表示を切り替える便利なスタイルシートを紹介します。

The 'hidden' Attribute is Visibly Weak

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

• HTMLのhidden属性の使い方と弱点
• 要素の表示・非表示を切り替える便利なスタイルシート

HTMLのhidden属性の使い方と弱点

HTMLには、hidden属性というあなたが期待する通りの機能があります。

hidden属性は、ブラウザのサポートも充実しています。
IE11をはじめ、すべての主要ブラウザでサポートされています。

hidden属性のサポートブラウザ

では、hidden属性は役に立つでしょうか？
うーん、たぶん、ひょっとして、あまり、、、

displayで定義されたスタイルが優先されるとは、こういうことです。

hidden属性には、2つの問題があります。

1. hidden属性はとても弱い存在です。要素に強いセレクタを使用してnone以外の値（block, inline-blockなど）を定義すると、簡単に上書きされます。widthやその他のプロパティと同様に、要素に非表示の属性をアクティブに定義し、実際に非表示にしないと安心できません。
2. これは、displayプロパティに責任があります。hidden属性が要素の可視を制御するプロパティではなく、ブロックのタイプを制御するプロパティと同じであれば、期待通りの結果が得られたでしょう。残念なことに、Webは下位互換性を禁止しています（Web全体の健全性にとっては良いことです）。

もし、属性のセマンティックを望むなら、Monicaの提案はどうでしょうか。
下記のCSSをリセットCSS、またはベースのCSSに加えておきます。

また、ユーティリティのclassを用意しておく古典的な方法も素晴らしいです。

要素の表示・非表示を切り替える便利なスタイルシート

忘れてはならないのは、何かをする方法は常に無限にあるということです。私は表示・非表示を行う際には、下記のCSSを使用しています。

表示・非表示を切り替える必要があるが、常にアクセシブルにしておく必要があるメニューなどに適しています。