HTML 【入門編】aタグのキーボード操作とフォーカス管理 – HTML実践ガイド
「マウスなしでも迷わない！」aタグのフォーカス管理で、誰もが使いやすいWebサイトを作ろうWebサイトを作っているとき、どうしても「マウスでクリックすること」を前提にデザインしてしまいがちですよね。でも、世の中にはマウスを使わずにキーボード...
HTML HTML 【テクニカル・上級編】aタグのrel属性によるセキュリティ対策 – HTML実践ガイド
リンクの「背後」に潜む脅威：`rel="noopener"` がWebの健全性を守る理由フロントエンドのエンジニアとして、私たちは日々パフォーマンスやUXの向上に心血を注いでいます。しかし、どれほど洗練されたアーキテクチャを構築しても、HT...
HTML 【実務・中級編】aタグのrel属性によるセキュリティ対策 – HTML実践ガイド
リンクの「新しいタブで開く」に潜む罠。今すぐ `rel="noopener"` を入れるべき技術的理由フロントエンド開発の現場で、何気なく書いている `` 。これ、実は単なる「リンクを別タブで開く」というUI上の挙動だけを意味しているわけで...
HTML 【入門編】aタグのrel属性によるセキュリティ対策 – HTML実践ガイド
こんにちは！フロントエンドの世界へようこそ。Web制作を始めたばかりの頃って、新しいタグを覚えるたびにワクワクしますよね。今日はそんな皆さんに、「リンクを開く」という何気ない操作に隠された、ちょっと怖いけれど大切なセキュリティの知識をお話し...
HTML 【テクニカル・上級編】content-visibilityによるインライン要素のレンダリング最適化 – HTML実践ガイド
レンダリングを制する者はUXを制す：`content-visibility` で挑むインライン要素の最適化戦略Webアプリケーションのパフォーマンス改善において、我々が長年追い求めてきた「初期表示の高速化」という聖杯。Lighthouseの...
HTML 【実務・中級編】content-visibilityによるインライン要素のレンダリング最適化 – HTML実践ガイド
レンダリングの「さぼり方」を極める：content-visibilityでインライン要素の負荷を削ぎ落とすこんにちは。フロントエンドの現場にいると、「パフォーマンス改善」という言葉が時に重荷に感じられることはありませんか？特に、DOMツリー...
HTML 【入門編】content-visibilityによるインライン要素のレンダリング最適化 – HTML実践ガイド
画面外の要素は「描画しない」という贅沢。`content-visibility`でWebサイトを爆速にする方法こんにちは！フロントエンド開発の世界へようこそ。HTMLを学び始めると、``で文字を囲ったり、``でリンクを貼ったりと、要素をどん...
HTML 【テクニカル・上級編】インライン要素のアクセシビリティとARIAロール – HTML実践ガイド
セマンティクスの虚像を剥ぐ：ARIAロールとインライン要素の「正しい」共存戦略フロントエンドの深淵を覗くエンジニア諸氏なら、一度は直面したはずだ。「なぜ、ボタンに見える``が、スクリーンリーダーには無機質なテキストとして読み上げられるのか？...
HTML 【実務・中級編】インライン要素のアクセシビリティとARIAロール – HTML実践ガイド
インライン要素を「ただの箱」で終わらせない：ARIAで意味を宿すアクセシビリティの作法フロントエンド開発の現場で、デザインカンプを前にして「ここ、CSSで見た目だけ整えればいいか」と``や``を乱用した経験はないでしょうか。正直に言います。...
HTML 【入門編】インライン要素のアクセシビリティとARIAロール – HTML実践ガイド
その「タグ」、本当に伝わっていますか？インライン要素とアクセシビリティのやさしい関係HTMLを書いていると、「とりあえず見た目さえ整えばいいや」と、``タグや``タグをなんとなく使ってしまうこと、ありますよね。実は、そこが「誰にとっても使い...