ウェブデザインに一貫性と統一感を持たすためには、設計段階でCSS変数 (CSSカスタムプロパティ) を定義しておき、イレギュラーな値を極力使用しないというアプローチが良いかと思います。
今回は、個人的に定義しているCSS変数を紹介してみようと思います。
2025年
CSSのコンテナクエリで position: fixed の扱い方が変わった件
「最強の剣なのに呪われている」みたいなコンテナクエリの呪縛が、いつの間にか解けていたのでシェアしたいと思います。
[CSS] remを使用したline-heightのベストプラクティス
ウェブページの行の高さ・行間を良い感じに制御したいと考えたとき、難しいと感じるのは私だけでしょうか。そんな私が行き着いた2025年現在の line-height のベストプラクティスを紹介します。
[CSS] シンプルで汎用性のあるフォームコントロールのデザイン
input要素, button要素, select要素, textarea要素, progress要素, meter要素といったフォームコントロールの見た目を CSS で整えるのは、昔に比べてずいぶんと簡単になりました。といっても、ブラウザ毎に独自の擬似要素・擬似クラスを使っていたり、変更不可能な部分もあるため、他の要素と比べてスタイルが設定しづらいのは変わりありません。
今回は、これらフォームコントロールをシンプルで統一感のあるデザインにするためのCSSコードを紹介していきます。
NULLなCSS変数によるCSSグリッドレイアウト
JavaScript や PHP といったプログラミング言語には値がないことを意味する NULL というものがあります。この NULL をCSS変数 (カスタムプロパティ) に設定できることを知っていますか？
今回は、NULL なCSS変数を活用したグリッドレイアウトを紹介します。