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

なぜその「下線」は読みづらいのか？CSS `text-decoration` の深淵に触れるフロントエンドの現場で、「デザインカンプ通りに下線を引いたのに、なぜか文字と重なって汚く見える」という経験はありませんか？デザイナーがこだわったタイ...

こんにちは！フロントエンドの現場で日々コードと格闘しているエンジニアです。Webサイトを作っていると、リンクに下線を引いたり、終わったタスクに打ち消し線を入れたりといった「テキストの装飾」は避けて通れませんよね。特にインライン要素（`a`タ...

インライン要素の「不可解な余白」を制する：ブラウザのレンダリングモデルと物理的制約の克服Web開発の現場で、私たちは日々「ピクセル単位の完璧さ」を求められます。しかし、CSSでどれだけ精緻にレイアウトを組んでも、なぜかインライン要素同士の間...

インライン要素の「謎の隙間」を葬る：レイアウト崩れを防ぐプロの作法フロントエンド開発の現場で、コーディング中にこんな経験はないだろうか。「デザインカンプ通りに横並びのボタンを配置したはずなのに、なぜかボタン同士の間に数ピクセルの隙間が空いて...

「なぜか隙間ができる…」HTMLのインライン要素、その正体は「改行」だった！Web制作を始めて少し慣れてくると、誰もが一度はこんな「謎の現象」に頭を抱えます。「CSSで余白なんて指定していないのに、なぜか要素の間に微妙な隙間ができる…！」横...

インライン要素の「垂直配置」という深淵：`vertical-align` と `line-height` が織りなすレンダリングの機微フロントエンドの現場において、`vertical-align` ほど「なんとなく動くから」という理由で放置...

なぜ「あのアイコン」は微妙に浮いて見えるのか？：vertical-alignとフォントの深淵フロントエンドの現場で、一度はこんな経験がないだろうか。「隣り合うテキストとアイコン、CSSで`vertical-align: middle`を当て...

こんにちは！フロントエンドの世界へようこそ。HTMLを書き始めると、必ず一度はぶつかる壁があります。そう、「なぜか要素が微妙にズレる問題」です。テキストの中にアイコンを入れたり、``タグで一部だけ色を変えたりしたとき、「あれ？なんか上に浮い...

インライン要素の「呪縛」を解く：レンダリングエンジンとレイアウトアルゴリズムの深淵フロントエンドの深淵を覗くとき、多くのエンジニアが最初に直面し、そして最後まで苦しめられるのが「インライン要素の挙動」だ。``や``、``といった要素が持つ、...

「インライン要素って何だっけ？」で終わらせない。レイアウトの解像度を上げるdisplayの深淵フロントエンドの現場で、「なぜかここだけ隙間ができる」「思った通りの高さにならない」という壁にぶつかったことはありませんか？その原因の多くは、実は...