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

英語圏のWebデザインで「右端のガタつき」に悩むあなたへ：hyphensプロパティの正しい作法Webフロントエンドの世界で、日本語の組版は比較的楽です。なぜなら、基本的に「どこでも改行できる」という強烈な仕様があるからです。しかし、英語をは...

こんにちは！フロントエンドの現場で日々コードと格闘しているライターです。Webサイトを作っていて、「英語の長い単語だけ、なぜか右端からはみ出してしまう……」「そこだけ不格好な空きができてしまう」なんて経験はありませんか？実はそれ、Webデザ...

インライン要素の「折り返し」という深淵：レイアウト崩壊をコードで制圧するフロントエンドの現場において、「長いURLや英単語がコンテナを突き破ってレイアウトを破壊する」という問題は、もはや古典的ですらあります。しかし、それを「なんとなく`wo...

インライン要素の「折り返し」で妥協しない。`word-break` と `overflow-wrap` の正しい使い分けフロントエンド開発の現場で、地味ながらも「なぜかデザインが崩れる」「URLが親要素を突き抜けていく」というトラブルに遭遇...

なぜその「長い単語」はレイアウトを突き破るのか？CSSで制御する文字折り返しの魔法Webサイトを作っていると、たまに「やってしまった！」という瞬間がありませんか？せっかく綺麗に組んだレイアウトなのに、ユーザーが入力した長いURLや、英単語の...

インライン要素の「余白」を制する：レンダリングの深淵とホワイトスペースの制御Webフロントエンドの世界において、最も直感的でありながら、最もエンジニアを悩ませる「罠」の一つが、インライン要素間の「謎の隙間」です。``, ``, ``, ``...

なぜ「インライン要素の間に謎の隙間」ができるのか？HTMLとwhite-spaceの深淵な関係フロントエンドの現場で、こんな経験はありませんか？「`display: inline-block` で並べたボタンの間に、CSSで指定していない1...

なぜか生まれる「謎の隙間」の正体。インライン要素と仲良くなるための処方箋Web制作を始めたばかりの頃、誰もが一度はこんな現象に頭を抱えます。「HTMLでボタンやリンクを横並びにしただけなのに、なぜか微妙に隙間ができる……」「ソースコードで改...

下線の美学：`text-underline-offset` と `text-decoration-thickness` が変えるWebのタイポグラフィWebエンジニアリングにおいて、「下線（underline）」ほど軽視され、かつ実装におい...

下線は「ただ引く」時代じゃない。text-underline-offset と text-decoration-thickness で実現するタイポグラフィの美学フロントエンドの現場で、「リンクの下線がダサい」とデザイナーから突き返された経...