HTML 【入門編】list-style-imageとbackground-imageの比較 – HTML実践ガイド
こんにちは！Web制作の世界へようこそ。HTMLを学び始めると必ず出会うのが「リスト（箇条書き）」ですよね。``で囲んで、``を並べて……。最初はただの黒い丸（●）が表示されるだけで十分満足していたはずなのに、いざデザインをこだわろうとする...
リストと記述リスト（ul, ol, li, dl, dt, dd）
HTML HTML 【テクニカル・上級編】dl/dt/ddとaria-describedbyの連携 – HTML実践ガイド
フォームと記述リストの「見えない絆」：`dl/dt/dd` と `aria-describedby` が織りなす高度なアクセシビリティ設計フロントエンドの世界で「HTMLのセマンティクス」を語るとき、多くのエンジニアは`ul`や`li`のネ...
HTML 【実務・中級編】dl/dt/ddとaria-describedbyの連携 – HTML実践ガイド
HTMLの「意味」を殺さない：dl/dt/ddとaria-describedbyで実現する、堅牢なアクセシビリティ設計フロントエンドの現場で、「とりあえず見た目を整える」ことに終始して、HTMLのセマンティクスを軽視してしまうこと、ありませ...
HTML 【入門編】dl/dt/ddとaria-describedbyの連携 – HTML実践ガイド
「それ、なんて書いてある？」をブラウザに伝える魔法。dl要素とaria-describedbyでアクセシビリティを極めるWeb制作を始めたばかりの皆さん、こんにちは！フォームを作っているとき、「この入力欄、何を書けばいいのかヒントを出したい...
HTML 【テクニカル・上級編】role=presentationによるリストのセマンティクス解除 – HTML実践ガイド
HTMLリストのセマンティクスを「殺す」技術 —— `role="presentation"` の正しい作法と深淵フロントエンドのアーキテクトとして、我々が常に戦っているのは「意味論（セマンティクス）と視覚表現の乖離」です。HTMLを単なる...
HTML 【実務・中級編】role=presentationによるリストのセマンティクス解除 – HTML実践ガイド
「リストは本当にリストであるべきか？」― `role="presentation"` でセマンティクスを制御する現場の知見フロントエンド開発の現場で、「マークアップの正しさ」と「デザイン上の制約」が衝突することは日常茶飯事です。特に、CSS...
HTML 【入門編】role=presentationによるリストのセマンティクス解除 – HTML実践ガイド
こんにちは！フロントエンドの現場で日々コードと格闘しているエンジニアです。HTMLを書き始めた頃、「レイアウトを整えるために``と``を使いたいけれど、スクリーンリーダーに『リストです』って読み上げられるのがちょっと邪魔だな…」と感じたこと...
HTML 【テクニカル・上級編】aria-labelによるリストの役割の明示 – HTML実践ガイド
リストの「意味」をブラウザに語らせる：aria-labelによるセマンティクス実装の深淵フロントエンドのアーキテクチャを設計する際、私たちはしばしば「見た目のコンポーネント化」に腐心する。しかし、DOMツリーの最深部に潜むセマンティクスを軽...
HTML 【実務・中級編】aria-labelによるリストの役割の明示 – HTML実践ガイド
リストの「名前」を呼んであげよう：aria-labelでアクセシビリティを一段引き上げる技術フロントエンドの現場で、私たちは無意識に `` や `` を多用しますよね。しかし、ページ内に複数のリストが並ぶとき、スクリーンリーダーを使っている...
HTML 【入門編】aria-labelによるリストの役割の明示 – HTML実践ガイド
Webサイトの「目次」を整理しよう：aria-labelでリストに名前を付ける魔法こんにちは！フロントエンドの世界へようこそ。HTMLを書き始めたばかりの頃、``や``を使ってリストを作るのって楽しいですよね。でも、ページの中にリストがいく...