HTML/CSS/JS専門の学習

インライン要素の「折り返し」で妥協しない。`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 で実現するタイポグラフィの美学フロントエンドの現場で、「リンクの下線がダサい」とデザイナーから突き返された経...

リンクの下線が「ダサい」を卒業する！CSSでタイポグラフィを磨き上げる魔法のテクニックWebサイトを作っていて、「リンクの下線が文字に近すぎて窮屈だな…」とか、「下線が太すぎて野暮ったいな…」と感じたことはありませんか？実は、CSSの標準設...

インラインの「魔境」を制する：vertical-alignの深淵とレンダリングの最適化フロントエンド開発の現場で、CSSの`vertical-align`ほど「なんとなく動くから」という理由で放置され、後々になって致命的なレイアウト崩れを引...

なぜ「vertical-align」は思い通りにならないのか？インライン要素の垂直整列を極めるフロントエンドの現場で「アイコンとテキストを横並びにしたとき、微妙にズレている」という問題に直面したことはありませんか？CSSを触り始めて最初にぶ...