HTML

リストマーカーの挙動、制御できていますか？ `list-style-position` が握るレイアウトの鍵フロントエンドの現場で、意外と「なんとなく」で済ませがちなのがリスト要素のマーカー制御です。CSSで `ul` や `ol` をリセ...

こんにちは！フロントエンドの世界へようこそ。HTMLでリスト（``や``）を書いているとき、「あれ？この黒い点（マーカー）のせいで、文字のインデントが思ったように決まらないな…」と、モヤモヤしたことはありませんか？実は、リストのマーカーとい...

リストの深淵：ブラウザのレンダリングエンジンと対話する「リストマーカー」の最適化戦略フロントエンドエンジニアの端くれとして、`` や `` を単なる「箇条書きの入れ物」と捉えていないだろうか。もしそうなら、あなたはブラウザが裏側でどれほどの...

リストデザインの「その先」へ：`list-style-type`の極意と`@counter-style`による完全制御フロントエンドの実務において、リスト要素（`ul`, `ol`, `dl`）は避けては通れない「情報の骨格」です。しかし、...

リストを自由に操ろう！`list-style-type`と「自分だけのマーカー」の作り方こんにちは！Web制作の世界へようこそ。HTMLを書き始めると、必ずと言っていいほど出会うのが「リスト」ですよね。箇条書きのメニューや、手順を説明するス...

空のリストが引き起こす「見えない負債」：堅牢なリストレンダリングの解剖学フロントエンドの設計において、`` や `` といったリスト要素はあまりにも基本的すぎて、多くのエンジニアがその「扱い」を軽視している。しかし、大規模なデータ駆動型のア...

その「空のリスト」、DOMに放置していませんか？：実務で差がつくマークアップの流儀フロントエンドの現場で、「データがないときは何も表示しない」という要件に出くわすことは日常茶飯事です。しかし、APIから返ってきた配列が空だったとき、皆さんは...

「中身のないリスト」ってどうすればいいの？HTMLの落とし穴と解決策Webサイトを作っていると、必ずと言っていいほどお世話になるのが `` や `` といった「リスト」タグです。メニューを作ったり、お知らせを並べたりと、まさに現場の「頼れる...

なぜ今、HTMLの「意味」をARIAで再定義するのか？ — 構造の正当性とレンダリングエンジンへの配慮フロントエンドのアーキテクトとして、我々は日々「DOMの軽量化」と「セマンティクスの厳密さ」の狭間で戦っている。特に、CSSのレイアウト手...

なぜ今、あえて `role="list"` を使うのか？HTMLセマンティクスの「最後の砦」を攻略するフロントエンドの現場で「HTMLはセマンティックに書け」と教わらない日はありません。`` や `` はマークアップの基本中の基本。しかし、...