2025年

[CSS] シンプルで汎用性のあるフォームコントロールのデザイン

input要素, button要素, select要素, textarea要素, progress要素, meter要素といったフォームコントロールの見た目を CSS で整えるのは、昔に比べてずいぶんと簡単になりました。といっても、ブラウザ毎に独自の擬似要素・擬似クラスを使っていたり、変更不可能な部分もあるため、他の要素と比べてスタイルが設定しづらいのは変わりありません。

今回は、これらフォームコントロールをシンプルで統一感のあるデザインにするためのCSSコードを紹介していきます。

NULLなCSS変数によるCSSグリッドレイアウト

JavaScript や PHP といったプログラミング言語には値がないことを意味する NULL というものがあります。この NULL をCSS変数 (カスタムプロパティ) に設定できることを知っていますか?

今回は、NULL なCSS変数を活用したグリッドレイアウトを紹介します。