HTML 【テクニカル・上級編】インライン要素への適切なARIAロール付与 – HTML実践ガイド
インライン要素の「意味」を殺さない：ARIAロール付与の深淵と実装戦略Web開発の現場で、私たちは日々「divをボタンにする」という誘惑と戦っています。デザイン至上主義のUIコンポーネントライブラリや、CSSの制約が厳しい複雑なUIにおいて...
インライン要素とテキスト装飾（a, span, strong, em, code, time）
HTML HTML 【実務・中級編】インライン要素への適切なARIAロール付与 – HTML実践ガイド
その``、本当にクリックさせるつもり？インライン要素とARIAの「正しい距離感」現場のコードレビューをしていると、必ずと言っていいほど遭遇するのが「本来の用途とは違うタグに、無理やりボタンの役割を詰め込んでいる」ケースです。「CSSで見た目...
HTML 【入門編】インライン要素への適切なARIAロール付与 – HTML実践ガイド
こんにちは！Web制作の世界へようこそ。HTMLを書き始めたばかりの頃って、``や``ばかり使ってしまって、「あれ、これ本当に正しい書き方なのかな？」と不安になること、ありますよね。今日は、そんな皆さんが必ず一度は迷う「インライン要素にAR...
HTML 【テクニカル・上級編】display: inline-blockの特性と使い分け – HTML実践ガイド
`display: inline-block` の深淵 —— ブラウザの描画エンジンが泣かないための境界線設計フロントエンドの世界に足を踏み入れて久しい諸君なら、一度は `inline-block` の挙動に翻弄された経験があるはずだ。「な...
HTML 【実務・中級編】display: inline-blockの特性と使い分け – HTML実践ガイド
インライン要素とブロックの「いいとこ取り」を極める：`display: inline-block`の深淵フロントエンド開発の現場で、CSSの「レイアウト崩れ」に頭を抱えた経験は誰にでもあるはずです。特に、ボタンやアイコン、あるいは動的に生成...
HTML 【入門編】display: inline-blockの特性と使い分け – HTML実践ガイド
「幅を指定したいのに動かない！」を解決。inline-blockの魔法を理解しようWeb制作を学び始めると、誰もが一度は「あれ、`width`（幅）を指定したのに全然言うことを聞いてくれない……！」という壁にぶつかりますよね。特にHTMLの...
HTML 【テクニカル・上級編】インライン要素のボックスモデル（padding/margin） – HTML実践ガイド
インライン要素の「余白」が引き起こすレンダリングの深淵：ブラウザの行ボックスモデルを制するフロントエンドの現場で、「なぜかインライン要素の `padding-top` が効いているように見えて、レイアウトが崩れる」という怪奇現象に遭遇したこ...
HTML 【実務・中級編】インライン要素のボックスモデル（padding/margin） – HTML実践ガイド
インライン要素と「余白」の罠：なぜpaddingやmarginが思い通りにならないのかフロントエンド開発の現場で、ふと「あれ？インライン要素にpaddingを当てたのに、行の高さが変わらないぞ？」と首を傾げた経験はありませんか？CSSを触り...
HTML 【入門編】インライン要素のボックスモデル（padding/margin） – HTML実践ガイド
インライン要素の「余白」の罠！paddingやmarginが効かない（ように見える）理由を解説しますHTMLとCSSを学び始めて、最初に誰もが「えっ、どうなってるの？」と首をかしげるポイントがあります。それが「インライン要素の余白」問題です...
HTML 【テクニカル・上級編】text-transformによる大文字小文字の変換 – HTML実践ガイド
CSS `text-transform` の深淵：装飾か、セマンティクスか、それともパフォーマンスの罠かフロントエンドの現場において、デザインカンプに記載された「すべて大文字（Uppercase）」の指示に対し、安易に `text-tran...