HTML 【実務・中級編】インライン要素のhoverとactive状態のUXデザイン – HTML実践ガイド
なぜ、その「hover」は安っぽいのか？インライン要素のUXを極めるフロントエンドの現場で、「リンクの色を変えておいて」という要件をそのまま実装して満足していませんか？ぶっちゃけた話をすると、ただ色を変えるだけの `:hover` はもう時...
HTML
HTML HTML 【入門編】インライン要素のhoverとactive状態のUXデザイン – HTML実践ガイド
こんにちは！Web制作の世界へようこそ。HTMLとCSSを学び始めると、最初は「文字を表示させるだけ」で精一杯かもしれませんが、少し慣れてくると「ここをもっと使いやすくしたいな」という欲求が出てくるはずです。今日は、Webサイトの「おもてな...
HTML 【テクニカル・上級編】インライン要素におけるclickイベントの挙動と注意点 – HTML実践ガイド
なぜ「div」や「span」にクリックイベントを貼るのか？――インライン要素のアクセシビリティと堅牢なイベント設計Webフロントエンドの世界で、我々が日常的に行う「要素へのイベント付与」。しかし、セマンティックなマークアップを追求する上級エ...
HTML 【実務・中級編】インライン要素におけるclickイベントの挙動と注意点 – HTML実践ガイド
なぜ「aタグ以外」のクリックイベントは、現場で地雷になりやすいのかフロントエンドの現場で、「とりあえず`span`に`onclick`付けておけば動くでしょ」というコードを見かけることがあります。プロトタイプならまだしも、そのまま本番環境に...
HTML 【入門編】インライン要素におけるclickイベントの挙動と注意点 – HTML実践ガイド
「そのボタン、本当にクリックできますか？」インライン要素にイベントを仕込む時の大切な作法Web制作を学んでいると、ふとこんな場面に出くわしませんか？「この``タグをクリックしたら、メニューを開くようにしたいな」「``タグにクリックイベントを...
HTML 【テクニカル・上級編】role=’presentation’と’none’の使い分け – HTML実践ガイド
セマンティクスの「引き算」という美学：`role="presentation"` と `role="none"` の境界線Webフロントエンドにおいて、セマンティクス（意味論）は単なるアクセシビリティの義務ではありません。それはブラウザのレ...
HTML 【実務・中級編】role=’presentation’と’none’の使い分け – HTML実践ガイド
「装飾のためのタグ」をアクセシビリティの死角にしない：`role="presentation"` と `role="none"` の正しい使い分け現場でコーディングをしていると、「デザインを実現するためだけに、意味のない `span` や ...
HTML 【入門編】role=’presentation’と’none’の使い分け – HTML実践ガイド
画面の裏側で何が起きているの？`role="presentation"`と`none`で「見えないはずのもの」を整理しようこんにちは！フロントエンドの世界へようこそ。HTMLを書いているとき、「この``や``は、ただ見た目を整えるためだけに...
HTML 【テクニカル・上級編】aria-current属性による現在位置の明示 – HTML実践ガイド
「現在地」を正しく伝える：aria-current='page'で実装する堅牢なナビゲーションの深淵Webアプリケーションのナビゲーションにおいて、「今、ユーザーがどこにいるのか」を明示することは、単なるUXの向上という言葉では片付けられな...
HTML 【実務・中級編】aria-current属性による現在位置の明示 – HTML実践ガイド
なぜ「今いる場所」を伝えるのがプロの仕事なのか？ナビゲーション実装の作法フロントエンド開発の現場で、意外と見落とされがちなのが「ナビゲーションの現在地表示」です。CSSでなんとなく色を変えて、「はい、完成」としていませんか？ビジュアルだけで...