HTML 【入門編】リスト構造のセマンティックな使い分け – HTML実践ガイド
「ただの並び」じゃない！HTMLリストタグを正しく使いこなして、Webに「意味」を吹き込もうWeb制作を始めたばかりの頃、こんなふうに思ったことはありませんか？「見た目は全部同じように並んでいるのに、なんでわざわざ `ul` とか `ol`...
HTML
HTML 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）は「なんとなく意味論的に正しいから使う」という、お守りのような存在かもしれ...
HTML 【実務・中級編】記述リスト(dl)のレイアウトパターン – HTML実践ガイド
記述リスト `` を「ただの装飾」で終わらせない。モダンCSSで操るレイアウトの正解現場でコードレビューをしていると、未だに「用語と説明」を表現するのに `` や `` を使って力技で整えているケースに出くわします。HTMLのセマンティクス...
HTML 【入門編】記述リスト(dl)のレイアウトパターン – HTML実践ガイド
こんにちは！Web制作の世界へようこそ。コードを書いていると、「これ、どうやって並べるのが一番きれいかな？」と悩む場面、たくさんありますよね。特に、HTMLの「リスト」と聞くと、``や``を思い浮かべる方が多いと思いますが、実は現場でめちゃ...