HTML 【テクニカル・上級編】リスト構造のセマンティックな使い分け – HTML実践ガイド
なぜ今さら「リスト構造」なのか？ ―― div教からの脱却と、セマンティクスの真価フロントエンドの深淵に潜る諸兄であれば、`` や `` を「単なるスタイル付けのためのラッパー」と見なす甘美な誘惑に、一度は駆られたことがあるはずだ。「CSS...
リストと記述リスト（ul, ol, li, dl, dt, dd）
HTML HTML 【実務・中級編】リスト構造のセマンティックな使い分け – HTML実践ガイド
なぜ今さら「リストタグ」の話をするのか？――Webの骨格を正すセマンティクスの本質現場でコードレビューをしていると、未だに「とりあえず`div`と`span`で組んで、CSSで整える」という実装に出くわすことがあります。一見、見た目さえ合っ...
HTML 【入門編】リスト構造のセマンティックな使い分け – HTML実践ガイド
「ただの並び」じゃない！HTMLリストタグを正しく使いこなして、Webに「意味」を吹き込もうWeb制作を始めたばかりの頃、こんなふうに思ったことはありませんか？「見た目は全部同じように並んでいるのに、なんでわざわざ `ul` とか `ol`...
HTML 【テクニカル・上級編】olタグのstart属性とreversed属性 – HTML実践ガイド
リストの順序を「DOMの力」で制御する：`start`と`reversed`属性の深淵Webアプリケーションにおいて「リスト」は最も基本的なUIパーツの一つですが、シニアレベルのエンジニアであれば、この単純な `ol` タグが、いかに効率的...
HTML 【実務・中級編】olタグのstart属性とreversed属性 – HTML実践ガイド
HTMLの「リスト」を極める：`ol`タグの`start`と`reversed`で魅せる順序の美学フロントエンドエンジニアの皆さん、こんにちは。普段、マークアップをする際、「順序付きリスト」といえば何気なく `ol` と `li` を並べて...
HTML 【入門編】olタグのstart属性とreversed属性 – HTML実践ガイド
こんにちは！フロントエンドの世界へようこそ。HTMLを学び始めると、必ず出会うのが「リスト」ですよね。スーパーの買い物リストや、手順書のように「1, 2, 3…」と並ぶ番号付きリスト。今回は、その番号付きリストである `` タグをもっと自由...
HTML 【テクニカル・上級編】大規模リストのパフォーマンス最適化（仮想スクロール） – HTML実践ガイド
DOMは裏切る：数千件のリストを「正しく」捌く仮想スクロールの極意Webアプリケーションが成熟するにつれ、私たちは「無限のデータ」を扱うという残酷な現実に直面します。APIから返ってきた5,000件のユーザーリストを、そのまま `map` ...
HTML 【実務・中級編】大規模リストのパフォーマンス最適化（仮想スクロール） – HTML実践ガイド
数千件のリストをDOMで溺れさせない：仮想スクロール（Windowing）の真髄フロントエンド開発の現場で、「リストアイテムが数千件ある」という要件を聞いたとき、皆さんはどう感じますか？正直、冷や汗が出ませんか？初心者が真っ先にやるのは、単...
HTML 【入門編】大規模リストのパフォーマンス最適化（仮想スクロール） – HTML実践ガイド
こんにちは！フロントエンドの現場で日々コードと格闘しているエンジニアです。Webサイトを作っていると、「リストの中に数千件のデータを表示したい！」という場面に出くわすことがありますよね。例えば、膨大な商品リストや、過去のメッセージ履歴などで...
HTML 【テクニカル・上級編】記述リスト(dl)のレイアウトパターン – HTML実践ガイド
記述リスト（dl）の再評価：Flexbox/Gridで紐解くCSSアーキテクチャの極意多くのフロントエンドエンジニアにとって、``（Description List）は「なんとなく意味論的に正しいから使う」という、お守りのような存在かもしれ...