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

Webタイポグラフィの深淵：`text-emphasis`で魅せる「傍点」の設計思想フロントエンド開発において、「傍点（ぼうてん）」の実装は、単なるビジュアルの装飾以上の意味を持ちます。それは日本語のタイポグラフィにおける情緒と、セマンティ...

日本語の「傍点」をCSSで美しく操る――`text-emphasis`の深淵と現場の知見フロントエンド開発の現場で、デザインカンプに「ここ、傍点（ぼうてん）でお願いします」と書かれているのを見て、一瞬顔をしかめた経験はありませんか？昔であれ...

日本語の「ここを見て！」を美しく。CSSで傍点（ぼうてん）を操る技術Webサイトで文章を読んでいるとき、「ここは特に伝えたい！」という部分を強調したくなること、ありますよね。太字にするのもいいけれど、日本の出版物でよく見かける「傍点（ぼうて...

アクセシビリティの「ノイズ」を消し去る：aria-hiddenがもたらすレンダリング最適化の深淵フロントエンドの現場において、私たちは日々「意味」と「装飾」の境界線と戦っている。特にアイコンフォントや、デザイン上の都合で挿入された装飾的な`...

HTMLの「ノイズ」を消し去れ：aria-hiddenでアクセシビリティツリーを洗練させる技術現場でコードレビューをしていると、アクセシビリティ対応について「とりあえず全部にラベルを付ければいい」という誤解をしているケースをよく見かけます。...

「それ、本当に読んでほしい？」HTMLの装飾をスクリーンリーダーからそっと隠す魔法の属性『aria-hidden』こんにちは！Web制作の世界へようこそ。HTMLを書き始めると、ボタンの中にアイコンを入れたり、デザインのアクセントのために`...

アクセシビリティの深淵：aria-describedbyが変えるインライン要素の「意味」と「体験」フロントエンド開発において、アクセシビリティを「義務的な作業」と捉えるのは、今日ではもはやナンセンスだ。それはUXの解像度を上げ、アプリケーシ...

`aria-describedby`でアクセシビリティの「解像度」を上げる：脱・初心者アクセシビリティの処方箋フロントエンドの現場で、「とりあえず`aria-label`を振っておけば大丈夫」と安易に考えていないだろうか？ 確かにそれも一つ...

こんにちは！フロントエンドの世界へようこそ。HTMLを書き始めて、「リンクやテキストに補足情報を付けたいけれど、どうすればいいんだろう？」と悩んだことはありませんか？今日は、そんなあなたの疑問を解決する「魔法の属性」、`aria-descr...

フロントエンドの深淵：Bidi（双方向テキスト）が引き起こすレイアウト崩壊と、その堅牢な制御術Webアプリケーションをグローバルに展開する際、避けて通れない「双方向テキスト（Bidirectional text、通称Bidi）」の課題。日本...