CSSを書くときにクラス名を適当に書いてませんか？ 正直、クラス名はなんでもスタイルが当たればコーディングはできますが、CSS設計の一つであるBEMを取り入れることで、管理しやすく読みやすいCSSを書くことができます。 […]

Webサイトで、スクロールに合わせて要素が表示されるアニメーションを見かけたことはありませんか？ こうした演出はJavaScriptで実装されることが多いですが、Scroll-driven Animations を使えば […]

画面切り替えにアニメーションを付けたいとき、 CSSでアニメーションを設定 transform で移動や拡大を制御 JavaScriptで表示切り替え …と、意外とやることが多くなりがちです。 特に、 一覧 → 詳細 サ […]

Webサイトを制作していると、 見出しの改行位置が微妙… レスポンシブでバランスが崩れる… そんなときに便利なのが text-wrap: balance です。 h2 { text-wrap: balance; } たっ […]

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

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

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

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