HTML 【入門編】ruby, rt, rpタグによるルビ構造の完全理解 – HTML実践ガイド
「ふりがな」を美しく操る！HTMLのルビタグ（ruby, rt, rp）完全ガイドWebサイトを作っていると、たまに「この漢字、なんて読むんだろう？」と迷うような単語に出会うことがありますよね。そんなとき、文字の上にそっと「ふりがな」を添え...
HTML HTML 【テクニカル・上級編】text-emphasisによる傍点（ルビ的装飾）の付与 – HTML実践ガイド
日本語タイポグラフィの矜持：`text-emphasis`で魅せる傍点と、その深淵なるレンダリング負荷Webにおける日本語タイポグラフィは、往々にして「欧文の添え物」として扱われがちだ。しかし、CSSの `text-emphasis` プロ...
HTML 【実務・中級編】text-emphasisによる傍点（ルビ的装飾）の付与 – HTML実践ガイド
日本語タイポグラフィの美学：`text-emphasis`で魅せる傍点の流儀Webデザインの世界で、日本語の「情緒」をどう表現するかは、我々フロントエンドエンジニアにとって永遠の課題です。かつて、テキストに傍点（レ点や丸点）を打とうと思えば...
HTML 【入門編】text-emphasisによる傍点（ルビ的装飾）の付与 – HTML実践ガイド
日本語の「ここを見て！」を表現する。CSSで傍点（ぼうてん）を操る魔法Webサイトを作っていると、「この言葉だけ、ちょっと強調したいな」と思うことはありませんか？太字にするほどではないけれど、日本語特有の「気持ち」を込めたい。そんな時にぴっ...
HTML 【テクニカル・上級編】インライン要素とz-indexのスタッキングコンテキスト – HTML実践ガイド
なぜ「インライン要素のz-index」は効かないのか —— ブラウザレンダリングの深淵とスタッキングコンテキストの制御フロントエンドの設計において、「要素が重ならない」「z-indexが効いているはずなのに背面に潜り込む」といった事象は、新...
HTML 【実務・中級編】インライン要素とz-indexのスタッキングコンテキスト – HTML実践ガイド
なぜ「z-index」はインライン要素を無視するのか？―スタッキングコンテキストの深淵に触れるフロントエンドの現場で、一度は必ずハマる「沼」があります。「``や``に`z-index`を適用したのに、なぜか背面に行かない（または前面に来ない...
HTML 【入門編】インライン要素とz-indexのスタッキングコンテキスト – HTML実践ガイド
「CSSで重なり順を整理したいのに、`z-index`が全然効かない……！」Web制作を始めたばかりの誰もが一度はぶつかる、この「CSSの七不思議」のような現象。特に``や``といったインライン要素を使っているとき、この壁に直面してPCの前...
HTML 【テクニカル・上級編】word-breakとoverflow-wrapの使い分け – HTML実践ガイド
レイアウト崩壊をコードで制圧する：`word-break`と`overflow-wrap`の深淵なる使い分けWebアプリケーションのUIを構築する際、もっとも「泥臭い」戦いの一つが、予期せぬ文字列によるレイアウト破壊の阻止だ。特に、``タグ...
HTML 【実務・中級編】word-breakとoverflow-wrapの使い分け – HTML実践ガイド
なぜ、その「長い文字列」はコンテナを突き破るのか？：word-break と overflow-wrap の正しい使い分け現場でコーディングをしていると、必ず一度は頭を抱える問題がありますよね。「クライアントから送られてきたテストデータのU...
HTML 【入門編】word-breakとoverflow-wrapの使い分け – HTML実践ガイド
「はみ出す文字」にさようなら！`word-break`と`overflow-wrap`の使い分け、今日でマスターしましょうWebサイトを作っていて、「あれ、長い英単語やURLが枠を突き抜けてデザインが崩れちゃった！」なんて経験はありませんか...