リストと記述リスト（ul, ol, li, dl, dt, dd）

画面で見やすいリスト、紙で見ると「残念」になっていませんか？こんにちは！Web制作の世界へようこそ。日々コツコツとHTMLやCSSを書いていると、「ブラウザ上では完璧！」と思っても、いざお客さまが「これ、念のため紙で印刷しておきたいな」とプ...

リストの選択状態管理、その「当たり前」を疑う ― `aria-selected` とDOMの深淵フロントエンドエンジニア諸君、リストの選択状態管理をどう実装しているだろうか？「`ul` と `li` を並べて、クリックされたら `activ...

リストの「選択」を極める：aria-selected を用いたアクセシブルな状態管理のベストプラクティス現場でフロントエンドを書いていると、「ただのリスト」に機能を持たせる場面に多々遭遇します。ドロップダウンの選択肢、タブ切り替え、あるいは...

リストを選択する、という「魔法」。aria-selectedでアクセシブルなUIを作ろうこんにちは！Webの世界へようこそ。HTMLを書き始めたばかりの頃って、「タグは覚えたけど、これってどう動かせばいいの？」と迷子になってしまうこと、あり...

リストの「空」をどう扱うか：Empty Stateとアクセシビリティの深層Webアプリケーションのフロントエンドにおいて、最も軽視されがちなのが「リストが空である状態（Empty State）」の設計です。APIから返ってきたデータが空配列...

「データがありません」をどう見せるか：Empty Stateのマークアップとアクセシビリティの作法フロントエンド開発の現場で、意外と頭を悩ませるのが「リストが空の時」のUIです。「とりあえず `display: none` で消しておけばい...

「あれ、何もない…？」を優しく伝える。リストが空の時の「Empty State」の作り方Webサイトを作っていると、必ずと言っていいほどぶつかる壁があります。それが「リストの中身が何もない時、どうすればいいの？」という問題です。例えば、お気...

リストマーカーの「不条理」を制する：ピクセルパーフェクトの先にあるレンダリングの深淵フロントエンドのUI実装において、`ul`や`ol`のリストマーカー（`list-style-type`）ほど、ベテランを苛立たせる存在はないかもしれない。...

リストマーカーの「微妙なズレ」を許すな。プロが実践する完璧なアライメント制御術フロントエンド開発の現場で、デザインカンプを忠実に再現しようとしたとき、一度は「リストのマーカー（・）」に殺意を覚えたことはないだろうか？「行間を広げるとマーカー...

リストの「マーカー」がズレてモヤモヤする……その悩み、CSSで解決しましょう！Webサイトを作っていて、「あれ、なんかリストの点（マーカー）が微妙に浮いてない？」と気になったことはありませんか？テキストの行の真ん中あたりにポツンと浮かぶ黒い...