インライン要素とテキスト装飾（a, span, strong, em, code, time）

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

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

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

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

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

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

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

こんにちは！Web制作の世界へようこそ。HTMLとCSSを学び始めると、最初は「文字を表示させるだけ」で精一杯かもしれませんが、少し慣れてくると「ここをもっと使いやすくしたいな」という欲求が出てくるはずです。今日は、Webサイトの「おもてな...

なぜ「div」や「span」にクリックイベントを貼るのか？――インライン要素のアクセシビリティと堅牢なイベント設計Webフロントエンドの世界で、我々が日常的に行う「要素へのイベント付与」。しかし、セマンティックなマークアップを追求する上級エ...

なぜ「aタグ以外」のクリックイベントは、現場で地雷になりやすいのかフロントエンドの現場で、「とりあえず`span`に`onclick`付けておけば動くでしょ」というコードを見かけることがあります。プロトタイプならまだしも、そのまま本番環境に...