CSS

テーマカラーを管理していこう

ページ全体のトーンをそろえてバランスの取れた配色にしてきます。

  • 色相の統一
  • ボタンの配置

色相の統一

・ CSS 変数を使って、全体のテーマカラーを自由に変えるという仕組みを作ってみましょう。以前作った架空のサイトを色相を統一していくために改造してみます。

・全体的に緑っぽいホームページを作りたい場合はhslで彩度を固定しておくといいです。あとは彩度と明度で調節します。

・今回は背景を明度を高めにして見やすくhsl(100, 40%, 95%);で指定していきます。

・文字色を低くして濃い目に作っていきます。h1, p, aに対してhsl(100, 35%, 55%);と指定すればいい感じになりました。

ボタンの配置

・ボタンも以前作ったものを再利用し色だけ彩度を固定し背景濃いめで作っていきます。バックグラウンドカラーをhsl(100, 50%, 50%);に指定してみます。

-広告-

 

 






-CSS