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

なぜ今、我々は `` を再評価すべきなのか：セマンティックの深淵と実装の最適解フロントエンドの世界では、ReactやVueといったコンポーネント指向のフレームワークが主流となり、マークアップは「UIの断片」へと抽象化されました。しかし、DO...

脱・「用語辞典」！``タグを使いこなす、セマンティックHTMLの極意現場でコードレビューをしていると、未だに「`dl`は用語と定義を書くためのものでしょ？」という誤解に出くわします。もちろん間違いではありませんが、それは``が持つポテンシャ...

「リスト」は「箇条書き」だけじゃない！dl/dt/ddタグでWebサイトを賢く整理するコツHTMLを学び始めると、最初にぶつかるのがリストタグですよね。``（中身がない箇条書き）や ``（順序がある箇条書き）は、メニューを作るときによく使う...

CSSの深淵へ：`@counter-style`がもたらすリスト表現の再定義と、そのアーキテクチャ的考察フロントエンドの現場において、``や``のマーカーをカスタマイズする際、かつて我々は`::before`擬似要素に頼り、DOMを汚染し、...

CSSの表現力を極める：`@counter-style` でリストマーカーの「既成概念」を破壊するフロントエンド開発の現場で、デザイナーから「このリストのマーカー、普通の丸や数字じゃなくて、ブランドの象徴的なアイコンにしたいんだよね」と無茶...

こんにちは！フロントエンドの世界へようこそ。HTMLでリストを作るとき、``タグや``タグを使いますよね。でも、いざデザインを当てようとすると「この黒丸（●）や数字（1, 2, 3）以外のマークにはできないの？」と悩んだことはありませんか？...

Radix UIとセマンティックHTML：リスト構造の「極致」を実装する多くのフロントエンドエンジニアが、`ul`や`li`を単なる「見た目のためのレイアウト要素」だと誤解している。しかし、Webのアクセシビリティを突き詰め、ブラウザのレン...

なぜ今、Radix UIで「リスト」を再定義する必要があるのかフロントエンド開発の現場で、もっとも軽視されがちなタグの代表格といえば ``, ``, そして `` でしょう。正直に告白すると、かつて僕も「ただの箇条書きだし、`div` で囲...

なぜ「ただのリスト」にこだわるのか？Radix UIから学ぶアクセシブルな設計思想こんにちは！Web制作の現場に飛び込んで、「HTMLのリストタグって、``と``だけでいいんじゃないの？」と一度は思ったことはありませんか？実は、Webの世界...

リストの「意味」を解体する —— Headless UIにおけるアクセシブルなデータ構造の設計論フロントエンドのアーキテクチャにおいて、リストコンポーネントほど「簡単そうに見えて、実は深い沼」は他にない。`ul`や`li`を並べるだけの単純...