2026-08

スポンサーリンク
HTML

【実務・中級編】text-orientationによる文字の向きの制御 – HTML実践ガイド

縦書きの「美」を制御する:`text-orientation`で英数字を操る極意フロントエンドの現場で「縦書きレイアウト」を実装することになったとき、多くのエンジニアが最初に直面する壁。それが「英数字が横倒しになって読みづらい」という問題で...
HTML

【入門編】text-orientationによる文字の向きの制御 – HTML実践ガイド

「縦書き」のWebサイト、作ってみませんか?`text-orientation`で文字の向きを魔法のように操る方法Webサイトといえば、左から右へ読む「横書き」が当たり前ですよね。でも、雑誌の特集や日本的な情緒を表現したいとき、ふと「縦書き...
HTML

【テクニカル・上級編】writing-modeとインライン要素の配置 – HTML実践ガイド

縦書きの深淵:`writing-mode`とインライン要素が織りなすレンダリングの罠Webというプラットフォームは、長らく「横書き」という前提に支配されてきました。しかし、日本語の組版や芸術的なレイアウトを追求する際、`writing-mo...
HTML

【実務・中級編】writing-modeとインライン要素の配置 – HTML実践ガイド

縦書き(writing-mode)の深淵:インライン要素と「論理的」レイアウトの正解Webフロントエンドの世界で、`writing-mode: vertical-rl` を触ったことはあるだろうか?「ああ、日本語の縦書きね。簡単でしょ」と高...
HTML

【入門編】writing-modeとインライン要素の配置 – HTML実践ガイド

こんにちは!フロントエンドの世界へようこそ。Web制作を始めたばかりの頃、「縦書き」という壁にぶつかって頭を抱えたことはありませんか?「普通の文章ならスイスイ書けるのに、いざ縦書きにしようとすると、なんだか文字が横に倒れたり、意図しない場所...
HTML

【テクニカル・上級編】インライン要素のフォーカス管理とアウトライン制御 – HTML実践ガイド

アウトラインの「殺害」が招く、アクセシビリティという名の技術的負債フロントエンドの世界には、古くから語り継がれる「禁忌」がある。その筆頭が、CSSにおける `outline: none;` の無差別な適用だ。かつて、デザイナーから「ブラウザ...
HTML

【実務・中級編】インライン要素のフォーカス管理とアウトライン制御 – HTML実践ガイド

「outline: none」の誘惑と、その先にあるアクセシビリティの落とし穴フロントエンドの実務において、UIデザインの細部を調整しているとき、ふと「デフォルトのフォーカスリングが邪魔だな」と感じることはありませんか? デザイナーから上が...
HTML

【入門編】インライン要素のフォーカス管理とアウトライン制御 – HTML実践ガイド

「消しちゃダメ!」キーボード操作を支える「アウトライン」の優しいお話こんにちは!Web制作の学び、順調に進んでいますか?HTMLを書いているとき、``タグや``タグを触っていると、キーボードの「Tab」キーで移動したときに、周りにぼんやりと...
HTML

【テクニカル・上級編】インライン要素のhoverとactive状態のUXデザイン – HTML実践ガイド

インライン要素の「触感」を再考する:CSS擬似クラスとブラウザエンジンの深層フロントエンド開発において、``タグや``などのインライン要素に施すインタラクションデザインは、しばしば「単なるCSSの装飾」として軽視されがちだ。しかし、Webア...
HTML

【実務・中級編】インライン要素のhoverとactive状態のUXデザイン – HTML実践ガイド

なぜ、その「hover」は安っぽいのか?インライン要素のUXを極めるフロントエンドの現場で、「リンクの色を変えておいて」という要件をそのまま実装して満足していませんか?ぶっちゃけた話をすると、ただ色を変えるだけの `:hover` はもう時...
スポンサーリンク