テキストコンテンツの基本（p, h1-h6, hr, pre）

見出しタグは「装飾」ではない。HTMLアウトラインから考えるWebの骨格設計フロントエンドの現場でコードレビューをしていると、未だに「見た目の文字サイズ」を基準に見出しレベル（h1-h6）を選んでいるコードを見かけることがあります。「この箇...

Web制作の入り口に立った皆さん、こんにちは！HTMLを学び始めると、``や``といった「見出しタグ」に必ず出会いますよね。「とりあえず文字を大きくしたいからh1を使う」なんて、最初は誰でも通る道です。でも、実はこの見出しタグたち、Webサ...

DOMの「お節介」を許すな：p要素の包含関係が引き起こすレンダリングの深淵フロントエンドの深淵を覗き込むとき、多くのエンジニアが「ブラウザの柔軟性」という名の甘美な罠に足をすくわれます。特に、HTMLのセマンティクスにおいて最も頻繁に遭遇し...

なぜその「pタグ」に「div」を入れるのか？HTMLの構造とブラウザの深層心理フロントエンドの現場でコードレビューをしていると、時折見かけるのが「p要素の中にdiv要素やリスト要素が鎮座している」という光景です。「いや、見た目はCSSでどう...

その``タグ、実は「おひとりさま専用」かも？HTMLの「包含関係」というルールのお話Web制作を始めたばかりの頃、誰しも一度はこんな経験をするのではないでしょうか。「あれ、CSSで文字を中央寄せにしようと思って、``タグの中に``を入れてみ...

マージンの相殺は「悪」か？——ブラウザエンジンから読み解くレイアウトの深淵フロントエンドの現場において、`p`要素や`h1`〜`h6`要素の間に発生する「マージンの相殺（Margin Collapsing）」ほど、新人エンジニアを混乱させ、...

なぜ「マージンが消える」のか？CSSマージンの相殺という“仕様”と向き合うフロントエンド開発の現場で、一度は必ず壁にぶつかる現象があります。それが「マージンの相殺（Margin Collapsing）」です。「pタグとh2タグを並べたのに、...

「あれ、隙間が足りない？」HTMLの『マージンの相殺』という少し不思議な現象のお話Webサイトを作り始めたばかりの頃、誰もが一度はこんな経験をするはずです。「見出しと文章の間に、もっとたっぷり余白をとりたいのに、CSSで指定した通りにならな...

title属性という「魔の福音」：アクセシビリティとUXの境界線フロントエンドの深淵を覗く諸君、今日もブラウザのレンダリングパイプラインと格闘していることだろう。さて、今回取り上げるのはHTMLの基本中の基本、`title`属性だ。多くの初...

その「title属性」、本当に必要ですか？アクセシビリティの落とし穴と正しい使いどころフロントエンド開発の現場で、ふと手が止まる瞬間はないでしょうか。「ここに補足情報を入れたいけど、どう実装するのが一番スマートか？」と。そんな時、つい手が伸...