HTML/CSS/JS専門の学習

インラインレイアウトの深淵：line-heightと行ボックスの「見えない計算式」を解き明かすフロントエンド開発の現場で、CSSの仕様書を読み解くことは、ブラウザという名のブラックボックスと対話することに他なりません。特に「インライン要素の...

なぜ「文字だけ」なのに高さが変わるのか？インライン要素とline-heightの深淵な関係フロントエンド開発の現場で、こんな経験はありませんか？「``を並べただけなのに、親要素の高さが微妙にズレる」「`line-height: 1`にしてい...

なぜか隙間ができる…？インライン要素と「line-height」の切っても切れない関係を解き明かすWeb制作を始めたばかりの皆さん、こんにちは。CSSでデザインを整えているとき、「なぜか要素の上下に微妙な隙間ができる」「ボタンの中の文字を上...

テキスト方向の「隔離」と「強制」：bdiとbdoが制御する国際化の深淵Webアプリケーションのグローバル化が当たり前になった今日、我々エンジニアは「左から右へ（LTR）」という暗黙の前提から脱却しなければなりません。しかし、UIを構築する際...

多言語対応の落とし穴：``と``で「文字の方向」を制御するプロの作法フロントエンド開発の現場で、国際化（i18n）対応に直面したとき、多くのエンジニアはまず翻訳ファイルの管理や日付フォーマットに頭を悩ませます。しかし、いざ実装を進めていくと...

こんにちは！フロントエンドの現場を渡り歩いているライターです。Web制作を学んでいると、「HTMLのタグってこんなに種類があるの？」と途方に暮れてしまうこと、ありますよね。特に今回お話しする「bdo」や「bdi」といったタグは、普段の制作で...

ルビ（Ruby）の深淵：ブラウザレンダリングと「意味」の最適化を極めるWebフロントエンドにおいて、``タグほど軽視され、かつ実装の落とし穴が深い要素は他にありません。単に「ふりがなを振るためのタグ」として処理しているなら、それはあなたのア...

ルビ（rubyタグ）を使いこなす：インライン要素の「余白と制約」を正しく理解するフロントエンドの現場で「ルビを振る」というタスクが舞い込んできたとき、多くのエンジニアは一瞬身構えます。単に文字を重ねるだけでなく、ブラウザごとの描画のクセや、...

こんにちは！フロントエンドの現場で日々コードと格闘しているエンジニアです。Webサイトを作っていると、「この漢字、なんて読むんだろう？」と親切心を働かせたくなる瞬間ってありますよね。そんな時に使うのがHTMLの``タグです。でも、このルビ関...

混在する言語の「境界」を制御せよ：BiDi（双方向テキスト）とインライン要素のアーキテクチャWebアプリケーションがグローバル展開を前提とする現代において、多言語対応は「翻訳」だけの話ではない。特にアラビア語やヘブライ語といった右から左へ流...