HTML 【入門編】aria-liveによる動的テキストの通知 – HTML実践ガイド
こんにちは！フロントエンドの世界へようこそ。今日は、Webサイトを「誰にとっても使いやすいもの」にするための、ちょっと魔法のような技術のお話をしますね。HTMLを書いていると、「画面上の文字をJavaScriptで書き換える」という場面によ...
HTML HTML 【テクニカル・上級編】lang属性によるテキストの言語指定 – HTML実践ガイド
言語指定の「作法」を再考する：lang属性がブラウザレンダリングとアクセシビリティに与える不可逆な影響Web開発の現場で、`lang`属性を単なる「SEOのためのオプション」や「翻訳ポップアップを抑制するためのメタ情報」だと考えているなら、...
HTML 【実務・中級編】lang属性によるテキストの言語指定 – HTML実践ガイド
なぜその `lang` 属性を疎かにしてはいけないのか？――アクセシビリティとUXの「見えない土台」を整えるフロントエンドエンジニアの皆さん、日々のコーディングで `lang` 属性を意識していますか？「`` だけ書いておけばOKでしょ？」...
HTML 【入門編】lang属性によるテキストの言語指定 – HTML実践ガイド
なぜ「たかが言語指定」がWeb制作の命運を分けるのか？lang属性の魔法を解説しますこんにちは！Webの世界に飛び込んだばかりの皆さん、毎日コードと向き合ってお疲れ様です。HTMLを書き始めた頃、「``タグや``タグに`lang="ja"`...
HTML 【テクニカル・上級編】preタグとcodeタグの組み合わせによるコード表示 – HTML実践ガイド
なぜ、あなたのコードブロックは「ただのテキスト」なのか？：セマンティクスとパフォーマンスの深淵フロントエンドの現場において、コード表示は単なる「文字列の羅列」ではありません。しかし、多くのエンジニアが `` をなんとなくの慣習で使い、そこに...
HTML 【実務・中級編】preタグとcodeタグの組み合わせによるコード表示 – HTML実践ガイド
「なんとなく」で終わらせない。``と``のセマンティックな関係と実装の流儀フロントエンドの現場でコードブロックを実装する際、あなたは深く考えずに「とりあえずCSSでスタイルを当てた`div`」で済ませていないだろうか？確かに、見た目だけなら...
HTML 【入門編】preタグとcodeタグの組み合わせによるコード表示 – HTML実践ガイド
そのコード、そのまま載せていませんか？``と``で「伝わる」ソースコード表示術Web制作を学んでいると、自分の書いたコードをブログやポートフォリオで紹介したくなる瞬間が必ずやってきますよね。「自分が苦労して書いたコードを、誰かに見てもらいた...
HTML 【テクニカル・上級編】pタグの上下マージンとマージンの相殺 – HTML実践ガイド
誰も教えてくれない「pタグの呪い」：マージンの相殺とレイアウト戦略の深淵フロントエンドのアーキテクトとして大規模なシステムを設計していると、CSSの「マージンの相殺（Margin Collapsing）」という仕様は、まるで予期せぬ場所で爆...
HTML 【実務・中級編】pタグの上下マージンとマージンの相殺 – HTML実践ガイド
なぜ「pタグの上下マージン」で現場のエンジニアは沼るのか？フロントエンド開発の現場で、CSSの「マージン相殺（Margin Collapsing）」ほど、新人から中級者までを悩ませ、時に「ブラウザのバグじゃないか？」と疑わせる仕様はありませ...
HTML 【入門編】pタグの上下マージンとマージンの相殺 – HTML実践ガイド
なぜか余白が消える？HTMLの「pタグ」と「マージンの相殺」という不思議な現象Web制作を始めたばかりの皆さん、こんにちは！HTMLを書き始めて、まず最初にぶつかる「あれ？」という瞬間。その代表格が、「pタグ（段落）の上下にできる謎の余白」...