HTML 【実務・中級編】ruby, rt, rp要素によるルビの構造化 – HTML実践ガイド
なぜ今さら「ルビ」なのか？：HTML構造の正解とブラウザの裏側フロントエンドエンジニアとして、私たちは日々CSSのグリッドやJSのフレームワークと格闘していますが、たまに「日本語の複雑さ」という物理法則に直面します。その代表例がルビ（振り仮...
インライン要素とテキスト装飾（a, span, strong, em, code, time）
HTML HTML 【入門編】ruby, rt, rp要素によるルビの構造化 – HTML実践ガイド
こんにちは！フロントエンドの世界へようこそ。HTMLを書いていると、たまに「漢字の読み方を添えたいな」と思うことはありませんか？例えば、難読な人名や、情緒あふれる文学作品など。そんな時、ただ括弧で囲むだけでは少し味気ないですよね。実はHTM...
HTML 【テクニカル・上級編】dir属性と双方向テキスト（Bidi）の制御 – HTML実践ガイド
言語の壁をコードで制する：`dir`属性とBidi制御が導く堅牢な多言語アーキテクチャWebアプリケーションをグローバルに展開する際、避けて通れないのが「双方向テキスト（Bi-directional text、以下Bidi）」の壁です。英語...
HTML 【実務・中級編】dir属性と双方向テキスト（Bidi）の制御 – HTML実践ガイド
なぜ「左から右」だけでは世界は救えないのか？ `dir`属性とBidi制御で向き合う多言語対応の極意フロントエンド開発の現場で、私たちはつい「Webサイトは左から右（LTR: Left-to-Right）へ流れるもの」という強固な思い込みに...
HTML 【入門編】dir属性と双方向テキスト（Bidi）の制御 – HTML実践ガイド
文字が「右から左へ」流れる！？Web制作で出会う「双方向テキスト」の不思議を解き明かすこんにちは！Web開発の世界へようこそ。HTMLを書き始めると、``タグや``タグなど、おなじみの道具に囲まれて毎日が楽しいですよね。でも、そんなある日、...
HTML 【テクニカル・上級編】lang属性による言語指定とインライン要素のレンダリング – HTML実践ガイド
言語指定の「その一行」がレンダリングを支配する：lang属性の深淵とフロントエンドの最適化Webアプリケーションのフロントエンドにおいて、`lang`属性を単なる「SEOのためのメタデータ」や「アクセシビリティの最低限の作法」と捉えていない...
HTML 【実務・中級編】lang属性による言語指定とインライン要素のレンダリング – HTML実践ガイド
なぜその `lang` 属性を疎かにするのか？ブラウザが「言語」を理解することで得られる真の制御フロントエンド開発の現場で、`` を書くのはもはや息をするのと同じくらい当たり前ですよね。しかし、その先の「インライン要素の中にある `lang...
HTML 【入門編】lang属性による言語指定とインライン要素のレンダリング – HTML実践ガイド
「なんとなく」で終わらせない！lang属性がWebサイトの「言葉のアクセント」を決める理由こんにちは！日々のコーディング、お疲れ様です。HTMLを書き始めた頃、「`lang="ja"` ってとりあえず書くものだよね？」と、おまじないのように...
HTML 【テクニカル・上級編】emとstrongのセマンティックな使い分け – HTML実践ガイド
セマンティクスを再定義する：``と``の境界線から見える「エンジニアリングの品格」Webの標準化が加速する現在、HTMLは単なる「見栄えの箱」ではなく、ブラウザのレンダリングエンジンやアクセシビリティ・ツリー、そして検索エンジンのクローラー...
HTML 【実務・中級編】emとstrongのセマンティックな使い分け – HTML実践ガイド
``と``を「見た目」で選んでいないか？——セマンティックな強調の作法フロントエンド開発の現場で、HTMLのタグ選定について深く議論することは、実はコードの品質を左右する「職人芸」の領域です。さて、皆さんは``と``の使い分けに迷ったことは...