HTML 【実務・中級編】Headless UIにおけるリストコンポーネントの設計思想 – HTML実践ガイド
なぜ今、私たちは「Headless UI」でリストを再定義するのか？フロントエンド開発の現場で、ふと立ち止まって考えてみてほしい。「ただの `` と `` を並べるだけのコンポーネント」に、どれほどの労力を割いているだろうか。「リストの項目...
HTML
HTML 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`）」の最適化です。「印刷なんて今どき……」と思うかもしれない。しかし、...
HTML 【入門編】リストの印刷時（@media print）のスタイル制御 – HTML実践ガイド
画面で見やすいリスト、紙で見ると「残念」になっていませんか？こんにちは！Web制作の世界へようこそ。日々コツコツとHTMLやCSSを書いていると、「ブラウザ上では完璧！」と思っても、いざお客さまが「これ、念のため紙で印刷しておきたいな」とプ...
HTML 【テクニカル・上級編】リストアイテムの選択状態管理 – HTML実践ガイド
リストの選択状態管理、その「当たり前」を疑う ― `aria-selected` とDOMの深淵フロントエンドエンジニア諸君、リストの選択状態管理をどう実装しているだろうか？「`ul` と `li` を並べて、クリックされたら `activ...
HTML 【実務・中級編】リストアイテムの選択状態管理 – HTML実践ガイド
リストの「選択」を極める：aria-selected を用いたアクセシブルな状態管理のベストプラクティス現場でフロントエンドを書いていると、「ただのリスト」に機能を持たせる場面に多々遭遇します。ドロップダウンの選択肢、タブ切り替え、あるいは...