HTML

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

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

日本語タイポグラフィの矜持：`text-emphasis`で魅せる傍点と、その深淵なるレンダリング負荷Webにおける日本語タイポグラフィは、往々にして「欧文の添え物」として扱われがちだ。しかし、CSSの `text-emphasis` プロ...

日本語タイポグラフィの美学：`text-emphasis`で魅せる傍点の流儀Webデザインの世界で、日本語の「情緒」をどう表現するかは、我々フロントエンドエンジニアにとって永遠の課題です。かつて、テキストに傍点（レ点や丸点）を打とうと思えば...

日本語の「ここを見て！」を表現する。CSSで傍点（ぼうてん）を操る魔法Webサイトを作っていると、「この言葉だけ、ちょっと強調したいな」と思うことはありませんか？太字にするほどではないけれど、日本語特有の「気持ち」を込めたい。そんな時にぴっ...

なぜ「インライン要素のz-index」は効かないのか —— ブラウザレンダリングの深淵とスタッキングコンテキストの制御フロントエンドの設計において、「要素が重ならない」「z-indexが効いているはずなのに背面に潜り込む」といった事象は、新...

なぜ「z-index」はインライン要素を無視するのか？―スタッキングコンテキストの深淵に触れるフロントエンドの現場で、一度は必ずハマる「沼」があります。「``や``に`z-index`を適用したのに、なぜか背面に行かない（または前面に来ない...

「CSSで重なり順を整理したいのに、`z-index`が全然効かない……！」Web制作を始めたばかりの誰もが一度はぶつかる、この「CSSの七不思議」のような現象。特に``や``といったインライン要素を使っているとき、この壁に直面してPCの前...

レイアウト崩壊をコードで制圧する：`word-break`と`overflow-wrap`の深淵なる使い分けWebアプリケーションのUIを構築する際、もっとも「泥臭い」戦いの一つが、予期せぬ文字列によるレイアウト破壊の阻止だ。特に、``タグ...

なぜ、その「長い文字列」はコンテナを突き破るのか？：word-break と overflow-wrap の正しい使い分け現場でコーディングをしていると、必ず一度は頭を抱える問題がありますよね。「クライアントから送られてきたテストデータのU...