前回は、@layer を使うことで「CSSの優先順位をグループ単位で管理できる」ことを解説しました。 今回はその続きとして、 *HTML側でも layer 属性は使える * CSSファイルをレイヤーごとに分ける方法 * […]

「CSSを修正したのに、なぜかデザインが反映されない…」「仕方ないから !important で強制適用しちゃえ！」CSSを書いている人なら、誰もが一度はこんな経験ありますよね。 これまでは、CSSの適用順を決めるために […]

WEBサイトでよく見る「ボタンを押すと出てくる案内画面（ダイアログ）」。 これまではJavaScriptをたくさん書かないとスムーズに動かせませんでしたが、今は最新のCSSだけで驚くほど簡単に、作れるようになりました。 […]

入力フォームで発生した不具合 Reactで郵便番号の入力フォームを実装した際、iOS（Safari）＋日本語キーボード（かな）で入力すると、数値が重複して表示される不具合が発生しました。 例 入力 表示 4 → 4 46 […]

JavaScriptには「バブリング」という概念があります。 イベントを登録した際に、意図していない要素まで反応してしまうことがあるため、バブリングの仕組みを理解しておくことが重要です。 この記事では、バブリングの概要と […]

Webサイトのボタンを少し目立たせたいときに便利なのが、CSSのグラデーションです。今回は、サイトで使えるボタンのグラデーション設定方法を、シンプルなコード例と一緒に紹介します。 CSSグラデーションとは？ CSSグラデ […]

スマートフォンでフォームに入力しようとしたとき、テキスト入力欄が突然拡大されたり、画面がぐっと寄ってしまった経験はありませんか？ 特にiPhoneではよく知られている挙動ですが、Androidでも一部のブラウザーや機種に […]

イベント委譲とは イベント委譲とは、子要素それぞれにイベントを登録するのではなく、親要素1つにイベントを登録し、どの要素が操作されたかをevent.target などを使って判定する仕組みです。 テーブル表やリストなどで […]