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

``の`value`属性を使いこなす：数値の制御から見えるブラウザの「計算」という概念フロントエンドエンジニアの皆さん、普段何気なく使っている``タグ、そしてその中の``タグ。リストの番号を途中で変えたいとき、わざわざCSSの`counte...

「あれ、番号が飛んじゃった！」を解決する、olタグのちょっと便利な裏ワザWebサイトを作っていると、商品のランキングや手順の解説などで「1, 2, 3…」と番号付きのリスト（``タグ）を使うこと、よくありますよね。普通に使っている分には、H...

`reversed`属性という「小さな反逆」：リストの順序制御におけるブラウザ実装と設計の解像度フロントエンドのアーキテクトとして、私たちは日々セマンティクスとDOMの整合性に頭を悩ませている。``で十分な場面にわざわざ``を持ち込み、そこ...

HTMLの「隠れた名脇役」：ol要素の `reversed` 属性を使いこなすフロントエンドの現場で、リストを扱うとき。無意識に `` を選び、番号付きなら何も考えずに `` を書いていませんか？もちろんそれで動くし、ブラウザも文句は言いま...

リストの番号が「逆」になる？HTMLの意外と知らない「reversed属性」の魔法Webサイトを作っていると、必ずと言っていいほど出会うのが「リスト」ですよね。``（点々のリスト）や ``（番号付きリスト）は、まるで朝のトーストにバターを塗...

`ol`要素の`start`属性：その「泥臭い」仕様と、大規模アプリケーションにおける堅牢な扱い方フロントエンドのアーキテクチャを設計する際、私たちはしばしば「リスト」という極めて原始的なUI要素に直面します。しかし、単なる順序付きリストと...

なぜ今さら `` の `start` 属性なのか？フロントエンドの現場で「リスト」と言えば、`` でメニューを作り、`` で項目を並べる。このルーチンに慣れきった中級エンジニアほど、実は `` の持つポテンシャルを見落としています。「番号な...

番号付きリスト、途中から始めたい時はどうする？ `ol` 要素の「start属性」を使いこなそうWebサイトを作っていると、「このリスト、1からじゃなくて5からスタートさせたいんだけどな…」なんて場面、意外とありますよね。例えば、「前編と後...

`ol`要素の`type`属性とCSS：ブラウザの描画パイプラインから見た「正しい」使い分けフロントエンドのアーキテクチャを設計する際、HTMLの属性とCSSプロパティが競合する場面に遭遇することは珍しくない。特に順序付きリストを示す`ol...

意外と忘れがちな「ol要素のtype属性」の正体と、CSSとの正しい付き合い方フロントエンドの現場で「リストの番号をどう振るか」という話題になると、多くのエンジニアが即座にCSSの `list-style-type` を思い浮かべるはずです...