HTML 【実務・中級編】Radix UIにおけるリストコンポーネントの設計思想 – HTML実践ガイド
なぜ今、Radix UIで「リスト」を再定義する必要があるのかフロントエンド開発の現場で、もっとも軽視されがちなタグの代表格といえば ``, ``, そして `` でしょう。正直に告白すると、かつて僕も「ただの箇条書きだし、`div` で囲...
リストと記述リスト（ul, ol, li, dl, dt, dd）
HTML HTML 【入門編】Radix UIにおけるリストコンポーネントの設計思想 – HTML実践ガイド
なぜ「ただのリスト」にこだわるのか？Radix UIから学ぶアクセシブルな設計思想こんにちは！Web制作の現場に飛び込んで、「HTMLのリストタグって、``と``だけでいいんじゃないの？」と一度は思ったことはありませんか？実は、Webの世界...
HTML 【テクニカル・上級編】Headless UIにおけるリストコンポーネントの設計思想 – HTML実践ガイド
リストの「意味」を解体する —— Headless UIにおけるアクセシブルなデータ構造の設計論フロントエンドのアーキテクチャにおいて、リストコンポーネントほど「簡単そうに見えて、実は深い沼」は他にない。`ul`や`li`を並べるだけの単純...
HTML 【実務・中級編】Headless UIにおけるリストコンポーネントの設計思想 – HTML実践ガイド
なぜ今、私たちは「Headless UI」でリストを再定義するのか？フロントエンド開発の現場で、ふと立ち止まって考えてみてほしい。「ただの `` と `` を並べるだけのコンポーネント」に、どれほどの労力を割いているだろうか。「リストの項目...
HTML 【入門編】Headless UIにおけるリストコンポーネントの設計思想 – HTML実践ガイド
「ただ並べるだけ」じゃない！Headless UIで学ぶ、リストの「本質」とHTMLの役割Web制作を始めたばかりの頃、``や``を「なんとなく箇条書きにするためのタグ」だと思っていませんでしたか？実は、プロの現場でリストを扱う際、私たちは...
HTML 【テクニカル・上級編】リストと構造化データ（Schema.org ItemList）の関連 – HTML実践ガイド
HTMLリストの「意味」を検索エンジンに正しく届ける：Schema.org ItemListの高度な実装戦略フロントエンド開発において、``や``といったリストタグはあまりにありふれた存在だ。しかし、テックリードとして大規模なアプリケーショ...
HTML 【実務・中級編】リストと構造化データ（Schema.org ItemList）の関連 – HTML実践ガイド
リストを「ただの箇条書き」で終わらせるな：Schema.org ItemListで検索エンジンに文脈を伝える技術フロントエンド開発の現場で、`ul`や`ol`タグを使わない日はありませんよね。しかし、多くのエンジニアが「見た目のリストを作る...
HTML 【入門編】リストと構造化データ（Schema.org ItemList）の関連 – HTML実践ガイド
こんにちは！フロントエンドの世界へようこそ。HTMLのリストタグ、``や``、使っていますか？「ただの箇条書きでしょ？」と思われがちですが、実はこれ、Webサイトの「骨格」を決める非常に重要なパーツなんです。今日は、ただ見た目を整えるだけで...
HTML 【テクニカル・上級編】リストの印刷時（@media print）のスタイル制御 – HTML実践ガイド
印刷という「レガシー」を制する：リスト要素のCSS制御に見るレンダリングの深淵Webアプリケーションのフロントエンドエンジニアが、往々にして「最後」に回すのが印刷用スタイルの最適化だ。画面上のピクセルパーフェクトなUIには心血を注ぐのに、ブ...
HTML 【実務・中級編】リストの印刷時（@media print）のスタイル制御 – HTML実践ガイド
画面の「見たまま」を印刷するな。リスト要素で学ぶ、プロの印刷用CSS設計Webサイト制作の現場で、意外と見落とされがちなのが「印刷用スタイル（`@media print`）」の最適化です。「印刷なんて今どき……」と思うかもしれない。しかし、...