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

スポンサーリンク
HTML

【テクニカル・上級編】display: inline-blockの余白問題と解決策 – HTML実践ガイド

幽霊のような「余白」を消し去る:`inline-block`の深淵と、モダンWebにおける最適解フロントエンドの世界で、避けては通れない「厄介な隣人」がいる。それが、`display: inline-block`要素の間に突如として現れる、...
HTML

【実務・中級編】display: inline-blockの余白問題と解決策 – HTML実践ガイド

「なぜそこに隙間が?」`inline-block`の余白問題と、現場で戦うためのスマートな解決策フロントエンド開発の現場で、一度は必ず遭遇する「謎の隙間」。横並びのボタンやナビゲーションアイテムを `display: inline-bloc...
HTML

【入門編】display: inline-blockの余白問題と解決策 – HTML実践ガイド

なぜ並べたはずの要素に「謎の隙間」が?CSSのinline-blockを攻略しようWeb制作を始めたばかりの頃、誰もが一度は「あれ、なんで隙間ができてるの?」と首を傾げる瞬間があります。例えば、ボタンやアイコンを横に並べたくて `displ...
HTML

【テクニカル・上級編】インライン要素におけるレイアウトシフト(CLS)の防止 – HTML実践ガイド

インライン要素のレイアウトシフトを制する:フォント戦略とレンダリングの深淵Webパフォーマンスを極めようとするエンジニアにとって、Core Web Vitalsの「CLS(Cumulative Layout Shift)」は避けられない壁で...
HTML

【実務・中級編】インライン要素におけるレイアウトシフト(CLS)の防止 – HTML実践ガイド

なぜ、あなたのWebサイトは「ガクッ」と動くのか?インライン要素とフォントが引き起こすCLSの正体Webサイトを読み込んでいる最中、読みかけの記事が突然ガクッと下にずれて、クリックしようとしていたボタンが指先から逃げていく――。あの忌々しい...
HTML

【入門編】インライン要素におけるレイアウトシフト(CLS)の防止 – HTML実践ガイド

Webサイトを閲覧していて、「あ、いまボタンが急にガクッとズレた!」とイラッとした経験、ありませんか?あれはレイアウトシフト(CLS)と呼ばれる現象で、Googleも「ユーザー体験を損なうから気をつけようね」とかなり厳しく警告しているポイン...
HTML

【テクニカル・上級編】font-displayプロパティとインラインテキストの表示タイミング – HTML実践ガイド

Webフォントの「一瞬の空白」を制する:font-displayが切り拓くレンダリング最適化の深淵Webフォントの読み込みは、フロントエンド開発における永遠の課題の一つだ。`@font-face`を定義し、期待通りに美しいタイポグラフィが表...
HTML

【実務・中級編】font-displayプロパティとインラインテキストの表示タイミング – HTML実践ガイド

Webフォントの「チラつき」にサヨナラを。font-displayで制御するフォントレンダリングの最前線フロントエンド開発の現場で、一度は頭を悩ませたことがあるはずです。ページを読み込んだ瞬間、テキストが数秒間消えたり、あるいは明朝体からゴ...
HTML

【入門編】font-displayプロパティとインラインテキストの表示タイミング – HTML実践ガイド

Webフォントの「一瞬の空白」にさようなら!font-displayでユーザー体験を磨こうWebサイトを作っているとき、こんな経験はありませんか?「パッとページを開いた瞬間、一瞬だけ文字が消えて、その後ヒョイッと別のフォントに切り替わる……...
HTML

【テクニカル・上級編】CSS Gridにおけるインライン要素のグリッドアイテム化 – HTML実践ガイド

CSS Gridの「匿名グリッドアイテム」という落とし穴:上級エンジニアが知るべきレンダリングの深淵CSS Gridを使いこなしていると自負するエンジニアであっても、ふとした瞬間に「なぜかレイアウトが崩れる」「意図しない余白が生まれる」とい...
スポンサーリンク