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

文字のデザインを「魔法」のように変える！CSSの `text-transform` と `font-variant` を使いこなそうWeb制作を始めたばかりの頃、こんなふうに思ったことはありませんか？「英語の文章を全部大文字でカッコよく見せ...

タイポグラフィの解像度を上げる：letter-spacingとfont-kerningの深淵Webアプリケーションの品質は、往々にして「ピクセル単位の執着」によって決まる。特にタイポグラフィは、ユーザーがインターフェースと対峙する際に最も長...

タイポグラフィの解像度を上げる：letter-spacingとfont-kerningの「正しい」制御術フロントエンドエンジニアの仕事は、単にデザインをコードに落とし込むことではありません。ブラウザという名の「出力装置」の特性を理解し、デザ...

Web制作の世界へようこそ！HTMLやCSSを触り始めると、最初は「文字を出すこと」だけで精一杯ですよね。でも、少し慣れてくると「なんだか文字が窮屈だな」「もっと洗練された印象にしたいな」という、“デザインの欲”が湧いてくるはずです。今日は...

活字の美学とブラウザの妥協点：`text-underline-position` でタイポグラフィの解像度を一段引き上げるWebフロントエンドにおいて、テキストの「下線」はCSSの黎明期から続く一種の呪縛だ。特に日本語のWebサイトにおいて...

なぜあなたの引いた「下線」は、文字を切り刻んでしまうのか？Web制作の現場で、デザインカンプに忠実なコーディングを求められたとき、誰もが一度は「リンクの下線（text-decoration）」と「ディセンダ（文字のベースラインからはみ出る部...

Web制作の現場に足を踏み入れたばかりの皆さん、こんにちは！HTMLとCSSを学び始めると、誰もが一度は「あれ？ 思った通りに表示されないな」と頭を抱えるポイントに出会いますよね。その一つが、「テキストの下線（アンダーライン）」と「アルファ...

ブラウザのデフォルトに抗う：text-decorationの深淵と、その先にあるアーキテクチャの話フロントエンドの現場において、`text-decoration`を「ただの下線」として扱うのは、もはや卒業すべきフェーズです。CSSは非常に強...

脱・デフォルトの下線。CSSで魅せる「洗練された」テキスト装飾の極意フロントエンド開発の現場で、デザイナーから「リンクの下線をもう少し上品にしたい」「テキストと下線の隙間を調整して」といった要望を受け、頭を抱えた経験はないだろうか。昔なら ...

下線（アンダーライン）はもう古い？CSSで「一歩先行く」テキスト装飾をマスターしようWeb制作を始めたばかりの頃、誰もが一度は「リンクの下線って、どうしていつも同じ太さで同じ色なんだろう？」と疑問に思ったことがあるはずです。デフォルトの `...