「このボタンを押せばメニューが出現する」という意味を持つこの UI は、そもそもこれをボタンと認識できる人がどれだけいるのか？が議論になってきましたが、今でも賛否両論あるものの、一定レベルに浸透したことで多くのアプリケーション・Webサイトで見られるようになりました。
Web サイトで採用するメリットは PC のように画面の大きなデバイスであれば、コンテンツの横やページ上部にメニューを表示する領域確保が容易です、しかしスマートフォンのような画面の小さなデバイスだとそうもいきません。
その問題を解決するためにハンバーガーメニューが発案されたわけです。
マークアップをどうするか
三 をまとめるタグをどうするか。候補として上がるのは
- button
- a
- div
- ul
あたり思いつくのですが
- button タグは純粋にボタンのタグ
- a タグはクリックを持ちますが、リンクを作成するものなのでボタンではない
- div タグは特に意味を持たないタグであり、グループするためのタグ
- ul タグはリストを用事するためのタグ
ということから、button タグを採用が解かと。
問題は内部の構造をどうするかで、最初に思いついたのが 下線を使う u タグ
他にも選択肢はいくつかあって
- span
- div
- hr
が候補になるのですが
- span タグは MDN web docs の span タグのページ を読むと「記述コンテンツの汎用的な行内コンテナーであり、何かを表すものではありません。」とあり、線を表現するものかといえば違う。
- div タグも MDN web docs の div タグのページ を読むと「
<div>要素は「純粋」なコンテナーとして、本質的には何も表しません。」とあり線を表現するものとは違う。 - hr タグは線を引くものではありますが、MDN web docs の hr タグのページ を読むと「
<hr>要素は、段落レベルの要素間において、テーマの意味的な区切りを表します。」とあり、区切りとは意味が違う
ということで候補から外しました。しかし u タグも MDN web docs の u タグのページ を見ると「非言語的に注釈があることを示す方法で表示する行内テキストの区間を示します。これは既定で単純な実線の下線として表示されますが、 CSS を使用して変更することもできます。」
となっているので、これも実は意味合い的には違うんですよね。
そう考え出すと他の人がどうしているかも気になってきたので、 Twitter で意見を募ったところ色々リプライをいただきました。
button タグ だけで3本線を実装するのは結構良いですね。JavaScript を使えば3本線でも実現できるのはなるほど！と思いました。
また、これ以外に SVG で実装する方法もありますね。
僕個人的にすごく良かったのはリク（ @fabrec_jp
）さんが送ってくださったもので、CodePen のほうを紹介すると
1つの span タグに menuButton というテキストを記述し、テキスト自体を screen-reader-text クラスで非表示にしつつスクリーンリーダーではしっかり読み込ませるというもの。
この書き方の何が良かったかと言うと
- HTML のソースがすごくわかりやすい
- アクセシビリティが担保される
という点。
Web サイトは誰でも簡単に利用できて且つ多くの人が作れるのが理想だと考えているので、この2点が担保されるのはすごく良い！と感じました。
また、僕のつぶやいた u タグ を使う手段について、なつみ（ @natsumi_m31 ）さんが色々とやり取りをしてくださってなるほど！と思う点が多かったです。
確かに button 要素のみで済むんですよね。これは yori3（ @yori3_otim2 ）さんが作ってくださったものなどで実装できますし、SVG についてももちろん納得です。
もう少し色々質問させていただいたので続いて紹介すると
この観点がすごく素敵でまったくもってそのとおり！と感じました。
という感じで、かなり長いやり取りになってしまいましたが、色々とお話させていただいてすごく楽しい時間をいただきました。
なつみさんありがとうございました。
何が正解か
そもそもこれを考えだしたのは、Twitter 上でハンバーガーボタンの実装をどうするか的なつぶやきが RT で流れてきたのを見たからなんですが、何が正解か？というのは越智（ @otiext
）さんがおっしゃられてるコーディングルールが規定する部分 に尽きると思います。
解を求めて考えること、他の人と話し合ってみること、コーディングルールを設ける事はすごく大事なことですね。
お役に立てたらお願いします🙇
Comments