インライン要素とテキスト装飾（a, span, strong, em, code, time）

こんにちは！フロントエンドの世界へようこそ。HTMLやCSSを触り始めたばかりの頃、誰もが一度は「リンクのあの青い下線、なんとかならないの？」とか「もう少しおしゃれな下線にしたいな」と悩むはずです。今日は、そんな「テキストの装飾」に革命を起...

リンクの「意味論」を制御せよ：rel属性によるSEOエンジニアリングの深淵フロントエンドエンジニアがHTMLの `` タグを単なる「画面遷移のトリガー」と見なしているなら、それは大きな誤解だ。`rel` 属性は、ブラウザに対する単なる指示書...

「とりあえず `rel="nofollow"`」を卒業する：検索エンジンと正しく対話するためのリンク戦略フロントエンド開発の現場で、``タグをただの「ページ遷移のための箱」だと思っていませんか？もしあなたが、「検索エンジンに追跡させたくない...

リンクに「責任」を持たせる魔法：rel属性で検索エンジンと賢く付き合おうWebサイトを作っていると、必ずと言っていいほど「リンク」を貼りますよね。自分のブログから参考サイトへ飛ばしたり、あるいはアフィリエイト広告を貼ったり。でも、ちょっと待...

セキュリティの「盲点」を突く：`target="_blank"`と`rel`属性が抱えるアーキテクチャ上の危うさWebアプリケーションのフロントエンドにおいて、`target="_blank"`は単なる「新規タブで開く」というUI上の仕様で...

なぜ今さら `rel="noopener"` なのか？――「別タブ遷移」という小さな穴が招く致命的なリスクフロントエンド開発の現場で、ごく当たり前のように書く ``。新しいタブで外部サイトを開く際に必須のこの属性ですが、実はこれ、何も対策せ...

「別タブで開く」の落とし穴？`target="_blank"`とセキュリティの意外な関係Web制作を始めたばかりの頃、誰もが一度は使うのが「リンクを別のタブで開く」ための `target="_blank"` ですよね。「新しいページに行って...

タイポグラフィを支配せよ：`font-feature-settings` で制御するOpenTypeの深淵Webフロントエンドにおいて、テキストは単なる情報の運び屋ではない。それはUIの品格を決定づける「顔」だ。我々のようなエンジニアが、C...

CSSでタイポグラフィを極める：`font-feature-settings`が変えるデザインの解像度フロントエンドエンジニアとして数年経験を積むと、「デザインカンプの文字間が、ブラウザで再現できない」という、ある種の壁にぶつかるはずです。...

「文字のプロ」の隠し技。`font-feature-settings`でタイポグラフィに魔法をかける方法Web制作を始めたばかりの頃、「なんかフォントが綺麗に見えるサイトと、そうじゃないサイトがあるな」と感じたことはありませんか？実はそれ、...