HTML 【テクニカル・上級編】dl/dt/ddを用いたグリッドレイアウトの実装 – HTML実践ガイド
なぜ今さら `` なのか？ ― CSS Gridで解き明かす「意味論」と「レイアウト」の極致フロントエンド界隈では、ReactやVueのコンポーネント設計が喧伝されがちですが、HTMLという「データ構造の根源」を疎かにするエンジニアは、結局...
HTML
HTML HTML 【実務・中級編】dl/dt/ddを用いたグリッドレイアウトの実装 – HTML実践ガイド
dl/dt/ddで「理想のグリッド」を組む。モダンCSS時代の記述リスト活用術フロントエンドの世界に入ってしばらく経つと、誰もが一度は悩みますよね。「定義リスト（dl）って、結局どう使うのが正解なんだ？」と。かつては「dlはIE時代の遺物」...
HTML 【入門編】dl/dt/ddを用いたグリッドレイアウトの実装 – HTML実践ガイド
「dl・dt・dd」って実はすごい！CSS Gridでスマートなリストを作ろうWeb制作を始めたばかりの頃、``や``はよく使うけれど、「`dl`とか`dt`、`dd`って何に使えばいいの？」と迷うことはありませんか？実はこの3つのタグ、「...
HTML 【テクニカル・上級編】liタグのdisplayプロパティとレイアウトへの影響 – HTML実践ガイド
リストの「本質」を殺さずにレイアウトをハックする：`display: list-item` との決別、あるいは再構築フロントエンドの世界において、`` や `` といったリスト要素は、HTMLのセマンティクスにおける「聖域」のような存在です...
HTML 【実務・中級編】liタグのdisplayプロパティとレイアウトへの影響 – HTML実践ガイド
`display: flex`でリストマーカーが消える？`li`要素の解剖学とモダンな制御術フロントエンドの現場で、「リストを横並びにしたい」という要件は、もはや呼吸をするのと同じくらい日常的なものです。そこで迷わず `display: f...
HTML 【入門編】liタグのdisplayプロパティとレイアウトへの影響 – HTML実践ガイド
なぜリストの「点（マーカー）」が消えるの？ `display: flex` との切ない関係を紐解くWeb制作を始めたばかりの頃、誰もが一度は「あれ？ リストのあの黒い点（マーカー）はどこに行ったの？」と首を傾げる瞬間があります。メニューバー...
HTML 【テクニカル・上級編】ネストされたリストのアクセシビリティとARIA – HTML実践ガイド
ネストされたリストの「アクセシビリティの深淵」：ARIAとDOM構造の調和を求めてフロントエンド開発において、「リスト」ほど過小評価されている要素はない。``の中に``を入れる。HTMLの基礎中の基礎だ。しかし、アクセシビリティという観点か...
HTML 【実務・中級編】ネストされたリストのアクセシビリティとARIA – HTML実践ガイド
ネストされたリストの「アクセシビリティの死角」を埋める：ARIAと構造の正しい作法フロントエンド開発の現場で、私たちは日々「リスト」をマークアップしています。しかし、``の中に``を入れ子にする、いわゆるネスト構造を作るとき、ただ「見栄えが...
HTML 【入門編】ネストされたリストのアクセシビリティとARIA – HTML実践ガイド
こんにちは！フロントエンドの現場で日々コードと格闘しているエンジニアです。皆さんは、Webサイトで「リスト」を作るとき、どんなことを意識していますか？「とりあえず``の中に``を入れればOKでしょ？」と思っているそこのあなた。実は、そこが「...
HTML 【テクニカル・上級編】dl/dt/ddタグのセマンティックな使い分け – HTML実践ガイド
なぜ今、我々は `` を再評価すべきなのか：セマンティックの深淵と実装の最適解フロントエンドの世界では、ReactやVueといったコンポーネント指向のフレームワークが主流となり、マークアップは「UIの断片」へと抽象化されました。しかし、DO...