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

リンクの下線が「ダサい」を卒業する！CSSでタイポグラフィを磨き上げる魔法のテクニックWebサイトを作っていて、「リンクの下線が文字に近すぎて窮屈だな…」とか、「下線が太すぎて野暮ったいな…」と感じたことはありませんか？実は、CSSの標準設...

インラインの「魔境」を制する：vertical-alignの深淵とレンダリングの最適化フロントエンド開発の現場で、CSSの`vertical-align`ほど「なんとなく動くから」という理由で放置され、後々になって致命的なレイアウト崩れを引...

なぜ「vertical-align」は思い通りにならないのか？インライン要素の垂直整列を極めるフロントエンドの現場で「アイコンとテキストを横並びにしたとき、微妙にズレている」という問題に直面したことはありませんか？CSSを触り始めて最初にぶ...

なぜかズレる…！CSSの「vertical-align」で、テキストとアイコンを美しく整列させる魔法Web制作を始めたばかりの頃、誰もが一度は「あれ？なんでこれ、微妙に上に浮いてるの？」という壁にぶつかりますよね。特に、テキストの横に小さな...

インラインレイアウトの深淵：line-heightと行ボックスの「見えない計算式」を解き明かすフロントエンド開発の現場で、CSSの仕様書を読み解くことは、ブラウザという名のブラックボックスと対話することに他なりません。特に「インライン要素の...

なぜ「文字だけ」なのに高さが変わるのか？インライン要素とline-heightの深淵な関係フロントエンド開発の現場で、こんな経験はありませんか？「``を並べただけなのに、親要素の高さが微妙にズレる」「`line-height: 1`にしてい...

なぜか隙間ができる…？インライン要素と「line-height」の切っても切れない関係を解き明かすWeb制作を始めたばかりの皆さん、こんにちは。CSSでデザインを整えているとき、「なぜか要素の上下に微妙な隙間ができる」「ボタンの中の文字を上...

テキスト方向の「隔離」と「強制」：bdiとbdoが制御する国際化の深淵Webアプリケーションのグローバル化が当たり前になった今日、我々エンジニアは「左から右へ（LTR）」という暗黙の前提から脱却しなければなりません。しかし、UIを構築する際...

多言語対応の落とし穴：``と``で「文字の方向」を制御するプロの作法フロントエンド開発の現場で、国際化（i18n）対応に直面したとき、多くのエンジニアはまず翻訳ファイルの管理や日付フォーマットに頭を悩ませます。しかし、いざ実装を進めていくと...

こんにちは！フロントエンドの現場を渡り歩いているライターです。Web制作を学んでいると、「HTMLのタグってこんなに種類があるの？」と途方に暮れてしまうこと、ありますよね。特に今回お話しする「bdo」や「bdi」といったタグは、普段の制作で...