リストと記述リスト(ul, ol, li, dl, dt, dd)

スポンサーリンク
HTML

【入門編】リストの印刷時(@media print)のスタイル制御 – HTML実践ガイド

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

【テクニカル・上級編】リストアイテムの選択状態管理 – HTML実践ガイド

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

【実務・中級編】リストアイテムの選択状態管理 – HTML実践ガイド

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

【入門編】リストアイテムの選択状態管理 – HTML実践ガイド

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

【テクニカル・上級編】リストが空の場合のUIパターン – HTML実践ガイド

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

【実務・中級編】リストが空の場合のUIパターン – HTML実践ガイド

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

【入門編】リストが空の場合のUIパターン – HTML実践ガイド

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

【テクニカル・上級編】リストマーカーの配置とアライメント問題 – HTML実践ガイド

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

【実務・中級編】リストマーカーの配置とアライメント問題 – HTML実践ガイド

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

【入門編】リストマーカーの配置とアライメント問題 – HTML実践ガイド

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