HTML 【入門編】li要素内のコンテンツモデル – HTML実践ガイド
なぜかハマる「liタグの中身」の正体。HTMLのルールを優しく紐解こうこんにちは！フロントエンドの世界へようこそ。HTMLを書き始めると、必ずと言っていいほどお世話になるのが「リスト（`ul`, `ol`, `li`）」ですよね。箇条書きを...
HTML
HTML HTML 【テクニカル・上級編】dl要素とtable要素の使い分け – HTML実践ガイド
dlか、tableか。その「セマンティクス」は単なる記号論ではないフロントエンドのアーキテクチャ設計において、「dl要素を使うべきか、table要素を使うべきか」という問いは、初心者向けのHTML入門書では「見出しと内容ならdl、行列データ...
HTML 【実務・中級編】dl要素とtable要素の使い分け – HTML実践ガイド
なぜ「dl」と「table」で迷うのか？セマンティクスで紐解くデータ構造の正解現場でコードレビューをしていると、未だに「とりあえず見た目が整列しているから」という理由で、あらゆる情報を `` で囲ってしまうケースに遭遇します。あるいは、逆に...
HTML 【入門編】dl要素とtable要素の使い分け – HTML実践ガイド
こんにちは！フロントエンドの世界へようこそ。HTMLを書き始めたばかりの頃って、「このデータ、``で囲むべき？ それとも``？」なんて悩み、一度はぶつかりますよね。特に「説明リスト」である``と、「表」である``は、見た目が似ていることもあ...
HTML 【テクニカル・上級編】CSSによるリストマーカーの非表示とリセット – HTML実践ガイド
リストスタイルの「無効化」という名の罠：ブラウザエンジンとアクセシビリティの深淵Webフロントエンドの世界において、`ul { list-style: none; }` は、CSSリセットの儀式としてあまりにも定着しすぎています。しかし、上...
HTML 【実務・中級編】CSSによるリストマーカーの非表示とリセット – HTML実践ガイド
なぜ「list-style: none」だけで満足してはいけないのか？ リスト要素のプロフェッショナルな扱い方現場でコードをレビューしていると、HTMLのリスト要素（`ul`, `ol`, `li`）に対して機械的に `list-style...
HTML 【入門編】CSSによるリストマーカーの非表示とリセット – HTML実践ガイド
こんにちは！フロントエンドの世界へようこそ。HTMLでリストを作るとき、``タグや``タグを使いますよね。でも、いざブラウザで表示してみると、左側に黒い「・（中黒）」が出てきて、「うーん、このデザインじゃないんだよな……」と悩んだことはあり...
HTML 【テクニカル・上級編】リストのアクセシビリティとARIA – HTML実践ガイド
リスト構造の深淵：ARIAで「意味」をどう拡張し、レンダリング負荷を極小化するかWebフロントエンドにおいて、``や``といったリスト要素は、マークアップの基礎中の基礎として扱われがちです。しかし、我々のような上級エンジニアにとって、それは...
HTML 【実務・中級編】リストのアクセシビリティとARIA – HTML実践ガイド
リストのアクセシビリティを極める：HTML構造とARIAが織りなす「意味の階層」フロントエンドの現場で、「とりあえずリストは `` にしておけばいいか」と考えているとしたら、少しだけ立ち止まってほしい。中級者へのステップアップを目指すなら、...
HTML 【入門編】リストのアクセシビリティとARIA – HTML実践ガイド
HTMLの「リスト」をただの箇条書きだと思っていませんか？Webサイトを作っていると、``や``は本当に毎日使う「相棒」のような存在ですよね。でも、実はその「リスト」という概念、ただ見た目を整えるためだけのものではないって、ご存知でしたか？...