コード・実装

【SCSS】色を便利に調整する

SCSSで色を便利に調整する方法を共有します。

SCSSで色を調整する

【基礎】色を変数で指定する

$main-color: #376db0;

こちらで、scssファイル内で$main-colorを使用すれば、便利です。

明度調節

輝度を上げる

color: lighten( $main-color, 15% );

 

輝度を下げる

color: darken( $main-color, 15% );

 

彩度の調節

彩度を上げる

color: saturate( $main-color, 15% );

 

彩度を下げる

color: desaturate( $main-color, 15% );

 

透明度の調節

50%透明度を下げる

color: transparentize( $main-color, 0.5 );

もしくは

color: rgba( $main-color, 0.5 );

 

色相の変更

color: adjust-hue($main-color, 60deg);

 

色の反転

color: invert($main-color);

 

グレースケールに変更

color: grayscale($main-color);

 

色相の補色(色相環の反対色)に変更

color: complement($main-color);

 

2つのカラーコードの中間色

color: mix(#fff, #000);

 

以上です。

ABOUT ME
WEBクリ開発者
当ブログでは主にWeb制作・HTML・ CSS・SCSS・JavaScript・jQuery・Vue.js・Wordpress・個人開発情報の情報を発信。 WEBデザイナー・コーダー・プログラマー向けのサイトです。 また、個人開発のサービスやアプリのお知らせもさせていただいています。

未経験からでも技術を学べる

Udemy

Udemyとは、100,000以上の講座があるオンライン学習プラットフォームです。主に社会人が対象で、教えたい人が講座を開き、学びたい人が学ぶことができます。

何か新しいプログラミング言語を勉強したい。技術を習得したいという時に、Udemyはおすすめです。

動画学習のため、最初につまづきがちな環境構築も実際の画面で確認しながら、自分で動かすことができます。

 

世界最大級のオンライン学習サイトUdemy

 

MENTA

プログラミングの学習をサポートしてくれる人を探したいのならMENTAがおすすめ。

メンターさんや他のメンティさん(自分と同じようにプログラミングを学習している方々)とやりとりをし、学習を進める形が多いです。

\新規登録で300円割引クーポンプレゼント/プログラミング学習のスキルプラットフォーム【MENTA】