インライン要素とテキスト装飾（a, span, strong, em, code, time）

画面外の要素は「描画しない」という贅沢。`content-visibility`でWebサイトを爆速にする方法こんにちは！フロントエンド開発の世界へようこそ。HTMLを学び始めると、``で文字を囲ったり、``でリンクを貼ったりと、要素をどん...

セマンティクスの虚像を剥ぐ：ARIAロールとインライン要素の「正しい」共存戦略フロントエンドの深淵を覗くエンジニア諸氏なら、一度は直面したはずだ。「なぜ、ボタンに見える``が、スクリーンリーダーには無機質なテキストとして読み上げられるのか？...

インライン要素を「ただの箱」で終わらせない：ARIAで意味を宿すアクセシビリティの作法フロントエンド開発の現場で、デザインカンプを前にして「ここ、CSSで見た目だけ整えればいいか」と``や``を乱用した経験はないでしょうか。正直に言います。...

その「タグ」、本当に伝わっていますか？インライン要素とアクセシビリティのやさしい関係HTMLを書いていると、「とりあえず見た目さえ整えばいいや」と、``タグや``タグをなんとなく使ってしまうこと、ありますよね。実は、そこが「誰にとっても使い...

双方向テキストの深淵：Bidiアルゴリズムを制御するエンジニアリングの作法Webアプリケーションが真の意味で「グローバル」であるためには、単なる翻訳ファイル（i18n）の管理だけでは不十分だ。多言語対応の現場で最もエンジニアを悩ませる「負の...

Unicodeの迷宮を制する：`bdo`と`bdi`で実現する双方向テキストの完全制御フロントエンド開発の現場で、多言語対応（i18n）に直面したとき、多くのエンジニアが最初にぶつかる壁が「テキストの方向性」です。日本語や英語は左から右（L...

文字列の「並び順」に迷ったら？HTMLの「bdo」と「bdi」で多言語の世界を整えよう！Webサイトを作っていると、英語や日本語だけでなく、アラビア語やヘブライ語といった「右から左へ流れる言語」と出会うことがあります。「あれ、文字が変な方向...

ルビの深淵：ブラウザレンダリングの「異端児」を完全制御する技術論Web開発において、``タグは最も「放置されがち」かつ「実装を誤るとレイアウトの美学を崩壊させる」曲者です。多くのエンジニアにとって、ルビは「単に文字の上に小さい文字を置くもの...

ルビ構造の「正解」を知る：``タグを現場で美しく扱うための作法フロントエンド開発の現場で、ふとした瞬間に「あ、ここルビ振らなきゃ」となる場面、ありますよね。出版系の案件や、あるいは企業のコーポレートサイトで人名にルビを振るケースなど、避けて...

「ふりがな」を美しく操る！HTMLのルビタグ（ruby, rt, rp）完全ガイドWebサイトを作っていると、たまに「この漢字、なんて読むんだろう？」と迷うような単語に出会うことがありますよね。そんなとき、文字の上にそっと「ふりがな」を添え...