HTML 【テクニカル・上級編】spanタグのセマンティックな中立性と役割 – HTML実践ガイド
``という名の「無」と向き合う：DOMツリーの最適化とセマンティックの境界線フロントエンドのコードベースをレビューしていると、時折「``の過剰摂取」とも呼ぶべき光景に出くわす。デザインを再現するために、あるいはCSSのセレクタを当てるためだ...
HTML HTML 【実務・中級編】spanタグのセマンティックな中立性と役割 – HTML実践ガイド
``という「無のキャンバス」と、セマンティックな矜持フロントエンドの現場で、もっともよく見かける、そしてもっとも安易に使われがちなタグは間違いなく `` でしょう。「とりあえずデザインを当てたいから `` で囲む」。この思考プロセス、一度は...
HTML 【入門編】spanタグのセマンティックな中立性と役割 – HTML実践ガイド
HTML界の「透明な梱包材」？ ``タグの正しい使い方と心構えWeb制作を始めたばかりの皆さん、こんにちは！HTMLを書き始めると、必ずと言っていいほど出会うのがこの``タグですよね。「とりあえず文字の色を変えたいから``で囲もう」「横並び...
HTML 【テクニカル・上級編】aタグのdownload属性によるファイルダウンロード制御 – HTML実践ガイド
リンクの「ダウンロード化」という罠：download属性の深淵と、上級エンジニアが避けるべき実装の落とし穴Web開発の現場において、単なる「画面遷移」ではなく「ファイルのダウンロード」を強制したいという要求は、要件定義の初期段階で必ずと言っ...
HTML 【実務・中級編】aタグのdownload属性によるファイルダウンロード制御 – HTML実践ガイド
「ブラウザで開いちゃう問題」をスマートに解決する：aタグのdownload属性を極める現場でよくある「PDFや画像を表示するんじゃなくて、強制的にダウンロードさせたい」という要件。これ、意外と落とし穴が多いんですよね。「サーバーサイドで`C...
HTML 【入門編】aタグのdownload属性によるファイルダウンロード制御 – HTML実践ガイド
「ブラウザで開いちゃう問題」を解決！aタグのdownload属性でファイルをスマートに渡す方法Webサイトを作っていると、「PDFや画像ファイルをリンク先に設定したのに、クリックするとブラウザの中でそのまま開いちゃう…」という悩みにぶつかる...
HTML 【テクニカル・上級編】aタグのアクセシビリティとARIAラベル – HTML実践ガイド
リンクの「アクセシビリティ」は、単なるマナーではなく「アーキテクチャの品格」である「Read More」や「詳細はこちら」といったリンクテキストが、全ページに氾濫している光景を想像してほしい。デザイン重視のUIではよくある話だが、視覚障害を...
HTML 【実務・中級編】aタグのアクセシビリティとARIAラベル – HTML実践ガイド
リンクテキストの「罠」：なぜ「こちら」と書くのが罪深いのかフロントエンドの現場で、デザイナーから上がってきたデザインカンプを見て「あ、ここにリンクがあるな」と思い、脊髄反射で `こちら` とコーディングしてしまった経験はありませんか？実は、...
HTML 【入門編】aタグのアクセシビリティとARIAラベル – HTML実践ガイド
リンク先は「どこ」ですか？アクセシビリティから考える「親切なリンク」の作り方Webサイトを作っていると、必ずと言っていいほど登場する``タグ。「ここをクリック！」とか「詳細はこちら」といったリンク、よく見かけますよね。でも、実はこれ、「目が...
HTML 【テクニカル・上級編】aタグのキーボード操作とフォーカス管理 – HTML実践ガイド
「Tabキーを制する者はUXを制す」——aタグのフォーカス管理と、その先にあるアクセシビリティの深淵フロントエンドの現場において、``タグを単なる「リンク」と捉えているうちは、まだジュニアの域を出ないと言わざるを得ません。我々が構築するWe...