HTML 【入門編】インライン要素の垂直方向の配置（vertical-align） – HTML実践ガイド
CSSの「vertical-align」でハマる人へ。なぜ思った通りに動かないのか、その正体を紐解こうWeb制作を始めたばかりの頃、誰もが一度は「あれ？ `vertical-align: middle;` を指定したのに、全然真ん中に来ない...
インライン要素とテキスト装飾（a, span, strong, em, code, time）
HTML HTML 【テクニカル・上級編】インライン要素のアクセシビリティとARIAロール – HTML実践ガイド
インライン要素のセマンティクスを再考する：ARIAロールが引き起こす「見えない地雷」を解体するフロントエンドの深淵に潜り込むほど、私たちは「HTMLとは何か」という問いに直面する。`` や `` でUIを構築することは、もはや現代のフロント...
HTML 【実務・中級編】インライン要素のアクセシビリティとARIAロール – HTML実践ガイド
なぜその「ただのspan」がアクセシビリティを殺すのか —— インライン要素とARIAの正しい関係現場でコードレビューをしていると、未だに「とりあえずspanで囲んでクリックイベントを貼る」という実装によく出くわします。「動けばいい」という...
HTML 【入門編】インライン要素のアクセシビリティとARIAロール – HTML実践ガイド
「ただの飾り」に意味を宿す。インライン要素とARIAロールで、Webに「優しさ」を実装しようこんにちは！フロントエンドの世界へようこそ。HTMLを書き始めると、`` や `` といったインライン要素にたくさん出会いますよね。「とりあえず文字...
HTML 【テクニカル・上級編】非推奨要素の歴史的変遷と現代的代替案 – HTML実践ガイド
意味論の復権：``や``が辿った数奇な運命と、現代のフロントエンド・アーキテクチャにおける最適解Web開発の現場で、ふとHTMLのソースを眺めているとき、「なぜ今さら``や``を使っているのか」と頭を抱えたことはないだろうか。CSSによるス...
HTML 【実務・中級編】非推奨要素の歴史的変遷と現代的代替案 – HTML実践ガイド
「その `` タグ、本当に必要？」——意味論と装飾を分かつ、現代のHTML作法フロントエンド開発の現場で、ふとコードを見返したときに「あれ、なんでここ `` なんだっけ？」と立ち止まったことはありませんか？HTMLを書き始めた頃、「太字にし...
HTML 【入門編】非推奨要素の歴史的変遷と現代的代替案 – HTML実践ガイド
こんにちは！フロントエンドの現場で日々コードと格闘しているエンジニアです。HTMLを学び始めると、必ずと言っていいほど「あれ？ `` タグと `` タグって何が違うの？」「どっちを使えばいいの？」という疑問にぶつかりますよね。実はこれ、We...
HTML 【テクニカル・上級編】フォント読み込みとFOIT/FOUT対策 – HTML実践ガイド
フォント読み込みの「深淵」——FOIT/FOUTを制し、レンダリングの静寂を実装するWebパフォーマンスの最適化において、多くのエンジニアが「画像」や「JavaScriptのバンドルサイズ」に目を奪われる中、真の熟練者が最後に直面し、そして...
HTML 【実務・中級編】フォント読み込みとFOIT/FOUT対策 – HTML実践ガイド
Webフォントの「一瞬の空白」を制す：FOIT/FOUT対策の現場的解法フロントエンド開発の現場で、ふと自社サイトをリロードした際、一瞬だけ文字が消えたり、あるいはガクッとフォントが切り替わったりする現象に遭遇したことはないだろうか。「あ、...
HTML 【入門編】フォント読み込みとFOIT/FOUT対策 – HTML実践ガイド
Webサイトを開いた瞬間、「あれ、文字が消えた？」の正体。フォント表示の舞台裏を解説しますWebサイトを作っていて、ふとブラウザを更新したとき。一瞬だけ文字が消えたり、最初は普通のフォントで表示されていたのに、コンマ数秒後に急にシュッと別の...