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

スポンサーリンク
HTML

【実務・中級編】見出し階層のバリデーション手法 – HTML実践ガイド

見出し階層の「順序」はなぜ重要か?――アクセシビリティを「義務」から「武器」へ変える設計術現場でコードレビューをしていると、``の直後に突然``が来るようなマークアップを時折見かけます。実装担当者に聞くと「CSSで文字サイズを調整すればいい...
HTML

【入門編】見出し階層のバリデーション手法 – HTML実践ガイド

Webページを「本」として考えよう。見出しタグ(h1-h6)の正しい並べ方、教えます!こんにちは!Web制作の世界へようこそ。HTMLを書き始めると、``や``といった「見出しタグ」に必ず出会いますよね。でも、正直なところ「どれを使っても文...
HTML

【テクニカル・上級編】hrタグのaria-hidden属性の適切な使用 – HTML実践ガイド

`hr`タグと`aria-hidden="true"`:アクセシビリティの「境界線」をどう制御すべきかWebアプリケーションのアーキテクチャを設計する際、私たちはしばしば「セマンティクス」と「視覚的装飾」の間の厄介なトレードオフに直面します...
HTML

【実務・中級編】hrタグのaria-hidden属性の適切な使用 – HTML実践ガイド

「ただの線」に意味を持たせていないか? ``タグと`aria-hidden`の正しい付き合い方フロントエンドの現場で、「デザイン上の区切り線」をどう実装するか。CSSの`border`を使うのか、あるいはセマンティックに``タグを置くのか。...
HTML

【入門編】hrタグのaria-hidden属性の適切な使用 – HTML実践ガイド

その「区切り線」、本当に必要? ``タグをアクセシブルにするための小さな魔法Webサイトを作っていると、記事のセクションを分けたり、ちょっとしたデザインのアクセントとして「横線」を引きたいときがありますよね。そんなときに活躍するのが `` ...
HTML

【テクニカル・上級編】aria-liveによる動的テキストの通知 – HTML実践ガイド

aria-liveの深淵:動的コンテンツのアクセシビリティを「エンジニアリング」するWebフロントエンドの世界において、`aria-live`はしばしば「魔法の属性」として語られる。しかし、現場で複雑な状態管理を抱えるアプリケーションを構築...
HTML

【実務・中級編】aria-liveによる動的テキストの通知 – HTML実践ガイド

「動的テキストの通知」を極める:aria-liveでアクセシビリティの質を一段引き上げるフロントエンド開発の現場で、APIからのレスポンスを画面に反映させたり、バリデーションエラーをリアルタイムで表示したりすることは日常茶飯事です。しかし、...
HTML

【入門編】aria-liveによる動的テキストの通知 – HTML実践ガイド

こんにちは!フロントエンドの世界へようこそ。今日は、Webサイトを「誰にとっても使いやすいもの」にするための、ちょっと魔法のような技術のお話をしますね。HTMLを書いていると、「画面上の文字をJavaScriptで書き換える」という場面によ...
HTML

【テクニカル・上級編】lang属性によるテキストの言語指定 – HTML実践ガイド

言語指定の「作法」を再考する:lang属性がブラウザレンダリングとアクセシビリティに与える不可逆な影響Web開発の現場で、`lang`属性を単なる「SEOのためのオプション」や「翻訳ポップアップを抑制するためのメタ情報」だと考えているなら、...
HTML

【実務・中級編】lang属性によるテキストの言語指定 – HTML実践ガイド

なぜその `lang` 属性を疎かにしてはいけないのか?――アクセシビリティとUXの「見えない土台」を整えるフロントエンドエンジニアの皆さん、日々のコーディングで `lang` 属性を意識していますか?「`` だけ書いておけばOKでしょ?」...
スポンサーリンク