HTML 【テクニカル・上級編】aタグのtarget属性とrel属性によるセキュリティ – HTML実践ガイド
その `target="_blank"`、あなたのサイトのセキュリティとパフォーマンスを蝕んでいないか？フロントエンドのアーキテクチャを設計する際、些細な属性一つがシステム全体の堅牢性に直結することは珍しくありません。特に `` タグの `...
HTML HTML 【実務・中級編】aタグのtarget属性とrel属性によるセキュリティ – HTML実践ガイド
`target="_blank"`の裏側に潜む罠：なぜ我々は`rel="noopener noreferrer"`を書き続けるのかフロントエンドの現場で、外部サイトへのリンクを新しいタブで開くために `target="_blank"` を書...
HTML 【入門編】aタグのtarget属性とrel属性によるセキュリティ – HTML実践ガイド
「新しいタブで開く」その裏側で起きていること――Webサイトを守るための小さな守護神のお話Webサイトを作っていると、リンクをクリックしたときに「今のページは残したまま、新しいタブで別のページを開いてほしいな」と思うこと、ありますよね。そん...
HTML 【テクニカル・上級編】aタグの基本構文とhref属性 – HTML実践ガイド
なぜ今さら `` タグなのか？：Webの原初を支える「リンク」の深淵フロントエンドの深淵に身を置く我々にとって、`` タグは空気のような存在だ。しかし、この「どこにでもあるタグ」を深く掘り下げると、ブラウザのレンダリング・パイプラインからH...
HTML 【実務・中級編】aタグの基本構文とhref属性 – HTML実践ガイド
リンクの「本質」を理解する：なぜ今、改めて `` タグを語るのかフロントエンドの世界に足を踏み入れて数年、「`` タグくらい書けるよ」という声が聞こえてきそうです。確かに、ブラウザに `href` を渡せばページは遷移する。しかし、Webと...
HTML 【入門編】aタグの基本構文とhref属性 – HTML実践ガイド
Web制作の世界へようこそ！HTMLという「Webの設計図」を学び始めたばかりの皆さん、こんにちは。今日は、WebサイトをWebサイトたらしめる、いわば「Webの心臓部」とも言える``タグ（アンカータグ）についてお話しします。これがないと、...
HTML 【テクニカル・上級編】インライン要素の概念とCSS表示モデル – HTML実践ガイド
インライン要素という「深淵」：ブラウザのレイアウトエンジンと戦うための設計哲学フロントエンドの世界で、`display: inline`という概念を「単なるテキストを並べるためのもの」と軽視しているなら、それは巨大なシステムの設計において爆...
HTML 【実務・中級編】インライン要素の概念とCSS表示モデル – HTML実践ガイド
なぜ「インライン要素」でハマるのか？CSS表示モデルを再定義するフロントエンドの現場で、CSSの挙動に頭を抱える瞬間といえば、大抵決まって「インライン要素の余白」か「高さが効かない問題」です。新人の頃は「とりあえず `display: bl...
HTML 【入門編】インライン要素の概念とCSS表示モデル – HTML実践ガイド
HTMLの「インライン要素」って何？Webページの「文章」を整える魔法を紐解こうWeb制作を学び始めると、必ずと言っていいほど「ブロック要素」と「インライン要素」という言葉に出会いますよね。「``はブロックで、``はインライン…」なんて教科...
HTML 【テクニカル・上級編】h1-h6要素のコンテンツモデル – HTML実践ガイド
見出し要素の「暗黙の制約」をハックする：HTML見出しタグのコンテンツモデルとエンジニアリング的責務フロントエンドのアーキテクトとして、私たちは日々セマンティクスとDOMのパフォーマンスの狭間で戦っています。HTMLの `` から `` ま...