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

なぜ「たかが言語指定」がWeb制作の命運を分けるのか？lang属性の魔法を解説しますこんにちは！Webの世界に飛び込んだばかりの皆さん、毎日コードと向き合ってお疲れ様です。HTMLを書き始めた頃、「``タグや``タグに`lang="ja"`...

なぜ、あなたのコードブロックは「ただのテキスト」なのか？：セマンティクスとパフォーマンスの深淵フロントエンドの現場において、コード表示は単なる「文字列の羅列」ではありません。しかし、多くのエンジニアが `` をなんとなくの慣習で使い、そこに...

「なんとなく」で終わらせない。``と``のセマンティックな関係と実装の流儀フロントエンドの現場でコードブロックを実装する際、あなたは深く考えずに「とりあえずCSSでスタイルを当てた`div`」で済ませていないだろうか？確かに、見た目だけなら...

そのコード、そのまま載せていませんか？``と``で「伝わる」ソースコード表示術Web制作を学んでいると、自分の書いたコードをブログやポートフォリオで紹介したくなる瞬間が必ずやってきますよね。「自分が苦労して書いたコードを、誰かに見てもらいた...

誰も教えてくれない「pタグの呪い」：マージンの相殺とレイアウト戦略の深淵フロントエンドのアーキテクトとして大規模なシステムを設計していると、CSSの「マージンの相殺（Margin Collapsing）」という仕様は、まるで予期せぬ場所で爆...

なぜ「pタグの上下マージン」で現場のエンジニアは沼るのか？フロントエンド開発の現場で、CSSの「マージン相殺（Margin Collapsing）」ほど、新人から中級者までを悩ませ、時に「ブラウザのバグじゃないか？」と疑わせる仕様はありませ...

なぜか余白が消える？HTMLの「pタグ」と「マージンの相殺」という不思議な現象Web制作を始めたばかりの皆さん、こんにちは！HTMLを書き始めて、まず最初にぶつかる「あれ？」という瞬間。その代表格が、「pタグ（段落）の上下にできる謎の余白」...

可読性は「アクセシビリティ」という名のエンジニアリングだ：コントラスト比最適化の深淵フロントエンドにおいて「色」を語る時、多くのジュニアエンジニアはデザインの美学に終始する。だが、我々のようなテックリードやアーキテクトにとって、テキストコン...

「読める」は正義。WCAG 2.1準拠で見落としがちなコントラスト比の最適解フロントエンドの世界で、デザインカンプを忠実に再現するのはエンジニアの最低限の責務です。しかし、「見た目が同じならOK」という考えだけでは、あとで必ず痛い目を見ます...

「読めない」は、Webサイトにとっての「接客放棄」。今日からできるコントラスト改善のヒントこんにちは！Web制作の世界へようこそ。HTMLを書き始めて、``でタイトルをつけたり、``で文章を並べたりするのはとても楽しいですよね。でも、ふとブ...