HTML 【入門編】リストのアクセシビリティとARIA – HTML実践ガイド
HTMLの「リスト」をただの箇条書きだと思っていませんか？Webサイトを作っていると、``や``は本当に毎日使う「相棒」のような存在ですよね。でも、実はその「リスト」という概念、ただ見た目を整えるためだけのものではないって、ご存知でしたか？...
HTML
HTML HTML 【テクニカル・上級編】リストの入れ子構造（ネスト） – HTML実践ガイド
リストの入れ子構造を極める：HTMLセマンティクスとブラウザエンジンの深淵フロントエンドのアーキテクトとして、これまで数多のUIコンポーネントを設計してきたが、未だに「リストの入れ子（ネスト）」を正しく扱えていないコードベースに遭遇すること...
HTML 【実務・中級編】リストの入れ子構造（ネスト） – HTML実践ガイド
HTMLリストの「入れ子構造」を制する：セマンティクスとブラウザの裏側フロントエンド開発の現場で、意外と軽視されがちなのが「リストの入れ子（ネスト）」の作法です。「とりあえず``の中に``を突っ込めば表示はされるし、CSSで調整すればいいで...
HTML 【入門編】リストの入れ子構造（ネスト） – HTML実践ガイド
こんにちは！フロントエンド開発の現場に飛び込んだばかりの皆さん、日々のコーディングお疲れ様です。HTMLを書き始めた頃、「リストの中にリストを入れたいけど、どう書くのが正解なの？」と迷ったことはありませんか？実は、この「入れ子（ネスト）」構...
HTML 【テクニカル・上級編】dl要素内でのdivによるグループ化 – HTML実践ガイド
セマンティクスの真価：`dl`要素内での`div`グループ化がもたらすアーキテクチャの最適解HTML5.1の仕様策定時、密かに、しかし確実にフロントエンド・アーキテクトたちの胸を躍らせた変更がある。それが`dl`要素内における`div`要素...
HTML 【実務・中級編】dl要素内でのdivによるグループ化 – HTML実践ガイド
dl要素にdiv？ HTML5.1でひっそりと解禁された「構造化」の真実フロントエンドの現場で「定義リスト」といえば `dl` ですが、皆さんは普段どんなマークアップをしていますか？長年、`dl` 直下に `dt` と `dd` を並べるの...
HTML 【入門編】dl要素内でのdivによるグループ化 – HTML実践ガイド
こんにちは！フロントエンドの世界へようこそ。HTMLを学び始めると、誰もが一度は「リスト」の扱いに悩みますよね。「ただの箇条書きなら``と``でいいけれど、専門用語と解説文がセットになったリストはどう書けばいいの？」と。そんな時、頼りになる...
HTML 【テクニカル・上級編】li要素のvalue属性 – HTML実践ガイド
なぜ今さら`value`属性なのか？：リストの番号付けをブラウザエンジンに委ねるという選択フロントエンドの現場では、ReactやVueといった強力な抽象化レイヤーに守られているため、HTMLのプリミティブな属性が持つ「本来の挙動」を忘れがち...
HTML 【実務・中級編】li要素のvalue属性 – HTML実践ガイド
``の`value`属性を使いこなす：数値の制御から見えるブラウザの「計算」という概念フロントエンドエンジニアの皆さん、普段何気なく使っている``タグ、そしてその中の``タグ。リストの番号を途中で変えたいとき、わざわざCSSの`counte...
HTML 【入門編】li要素のvalue属性 – HTML実践ガイド
「あれ、番号が飛んじゃった！」を解決する、olタグのちょっと便利な裏ワザWebサイトを作っていると、商品のランキングや手順の解説などで「1, 2, 3…」と番号付きのリスト（``タグ）を使うこと、よくありますよね。普通に使っている分には、H...