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

タイポグラフィの深淵へ：`font-variant`で実現する「プロのこだわり」現場でデザインカンプを実装していると、ふとデザイナーから「ここの数字だけ、少し上品にしたいんだよね」とオーダーされることはないでしょうか。あるいは、「見出しのス...

Webサイトに「品格」を。font-variantでタイポグラフィを自在に操ろうこんにちは！Web制作の世界に飛び込んだ皆さん、毎日お疲れ様です。HTMLタグを覚え、CSSで色を塗る楽しさを知ると、次に気になってくるのが「文字の美しさ」です...

下線を極める：`text-decoration`の深淵と、ブラウザレンダリングを支配する設計思想Webフロントエンドにおいて「下線を引く」という行為は、CSS初学者が最初に学ぶことの一つだ。しかし、上級エンジニアである我々にとって、それは単...

モダンCSSでアンダーラインを「デザイン」する：text-decorationの深淵フロントエンドの現場で、「リンクのアンダーラインをもう少し細く、色を薄くしたい」というデザイナーからの要望に、`border-bottom`を使って四苦八苦...

こんにちは！フロントエンドの世界へようこそ。HTMLでリンクや強調を作るとき、「``タグを使って下線を引いたら、なんだかダサくなってしまった…」なんて経験はありませんか？あるいは、「リンクの青い下線、もう少しおしゃれにできないかな？」とモヤ...

インラインレイアウトの深淵：`line-height`が支配するCSSの「見えない高さ」を制御するWebアプリケーションのUI実装において、`line-height`ほど「なんとなく」で扱われ、かつ深刻なレイアウト崩壊の温床となるプロパティ...

なぜ「インライン要素の高さ」で事故が起きるのか？ CSSの深淵を覗くフロントエンドの現場で、「なぜかボタンの高さが数ピクセルずれる」「行間を変えただけなのにレイアウトが崩れた」という経験、一度はありますよね。CSSのレイアウトを語る上で、F...

なぜか隙間ができる？「line-height」とインライン要素の不思議な関係を紐解くWeb制作を始めたばかりの頃、誰もが一度は「あれ、なんで画像やテキストの周りに謎の隙間ができるの？」と頭を抱えた経験があるはずです。CSSで `height...

レイアウトを破壊する「静かなる破壊者」たち：`word-break` と `overflow-wrap` の深淵WebアプリケーションのUI設計において、最も神経を逆なでするバグの一つが「想定外のテキストによるレイアウト崩れ」だ。ユーザーが...

なぜ、その「長い英単語」はレイアウトを破壊するのか？：`word-break` と `overflow-wrap` の正しい使い分けフロントエンドの現場で、一度は頭を抱えたことがあるはずです。動的に生成されるユーザー名、やたらと長いURL、...