HTML 【実務・中級編】多言語対応におけるテキストコンテンツの設計 – HTML実践ガイド
「横書きが世界標準」という思い込みを捨てよ：多言語対応のHTML/CSS設計、その泥臭い現場の話フロントエンドの現場で「多言語対応」と聞くと、多くのエンジニアはまず「翻訳ファイルをどう管理するか」というJSONの設計に頭を悩ませます。しかし...
HTML HTML 【入門編】多言語対応におけるテキストコンテンツの設計 – HTML実践ガイド
世界中の人々に届くWebサイトを作りたい！ そう思ったとき、真っ先にぶつかる壁が「言葉の壁」……だけじゃないんです。実は、文字の「向き」や「カタチ」という、もっと手強い壁が立ちはだかっています。今日は、HTMLとCSSを使って、世界中のどん...
HTML 【テクニカル・上級編】印刷時におけるテキストコンテンツの最適化 – HTML実践ガイド
印刷という「死の淵」からWebアプリケーションを救う：ブラウザエンジンの挙動を制御するCSS設計Webフロントエンドの世界において、「印刷用スタイル（`@media print`）」は往々にして軽視される。しかし、バックオフィス系SaaSや...
HTML 【実務・中級編】印刷時におけるテキストコンテンツの最適化 – HTML実践ガイド
Webの常識は紙の非常識。フロントエンドエンジニアが避けて通れない「印刷スタイル」の極意モダンなWeb開発において、`display: flex`や`grid`を駆使したレスポンシブ対応は日常茶飯事ですが、意外と忘れ去られがちなのが「印刷」...
HTML 【入門編】印刷時におけるテキストコンテンツの最適化 – HTML実践ガイド
こんにちは！Web制作の世界へようこそ。HTMLとCSSを学び始めると、どうしても「ブラウザでどう見えるか」ばかりを気にしがちですよね。でも、プロの現場では「紙に印刷されたとき」の美しさまで気配りできるかどうかが、一人前かどうかの分かれ道だ...
HTML 【テクニカル・上級編】p要素内のインライン要素のネスト制限 – HTML実践ガイド
HTMLの「p要素」に潜む深淵 —— インライン・ネストの制約をアーキテクチャの視点から紐解くフロントエンドの深淵を覗くとき、私たちはしばしば「なぜHTMLの仕様はこれほどまでに制約だらけなのか」という問いに突き当たります。特に `p` 要...
HTML 【実務・中級編】p要素内のインライン要素のネスト制限 – HTML実践ガイド
なぜ``の中に``を入れてはいけないのか？―DOMの「暗黙の修正」という名の爆弾フロントエンド開発の現場で、ふとコードレビューをしていると時折見かける光景があります。``タグの中に、つい安易に``や``を突っ込んでしまうミスです。「ブラウザ...
HTML 【入門編】p要素内のインライン要素のネスト制限 – HTML実践ガイド
こんにちは！フロントエンドの世界へようこそ。HTMLを書き始めると、必ずと言っていいほど「あれ？ ここにこれって置いていいんだっけ？」と迷う瞬間がやってきますよね。特に、一番よく使う ``（段落）タグ。この中身、実は意外と「ルール」が厳しい...
HTML 【テクニカル・上級編】空のp要素やhr要素の扱いとアクセシビリティ – HTML実践ガイド
なぜ我々は「空のp要素」という技術的負債を抱え込むのか：アクセシビリティと描画エンジンの深淵モダンなWeb開発の現場において、CSSの余白調整（`margin`や`gap`）に苦しむジュニア層が、救いを求めるようにHTMLに挿入する「空の`...
HTML 【実務・中級編】空のp要素やhr要素の扱いとアクセシビリティ – HTML実践ガイド
「余白のために `` を書く」のは、もう終わりにしよう。現場でコードレビューをしていると、今でもたまに見かける光景があります。要素と要素の間に「ちょっとした余白」が欲しいからといって、`` を連打したり、意味のない `` をレイアウト調整の...