HTML 【テクニカル・上級編】writing-modeとインライン要素の配置 – HTML実践ガイド
縦書きの深淵：`writing-mode`とインライン要素が織りなすレンダリングの罠Webというプラットフォームは、長らく「横書き」という前提に支配されてきました。しかし、日本語の組版や芸術的なレイアウトを追求する際、`writing-mo...
HTML 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` はもう時...
HTML 【入門編】インライン要素のhoverとactive状態のUXデザイン – HTML実践ガイド
こんにちは！Web制作の世界へようこそ。HTMLとCSSを学び始めると、最初は「文字を表示させるだけ」で精一杯かもしれませんが、少し慣れてくると「ここをもっと使いやすくしたいな」という欲求が出てくるはずです。今日は、Webサイトの「おもてな...
HTML 【テクニカル・上級編】インライン要素におけるclickイベントの挙動と注意点 – HTML実践ガイド
なぜ「div」や「span」にクリックイベントを貼るのか？――インライン要素のアクセシビリティと堅牢なイベント設計Webフロントエンドの世界で、我々が日常的に行う「要素へのイベント付与」。しかし、セマンティックなマークアップを追求する上級エ...