初心者向け】cssで背景グラデーションを使いこなそう

基本・斜め向き・2等分を練習してみよう！

まずは基本の書き方から

グラデーションは「background」プロパティに「linear-gradient」で値を指定するだけで簡単に設定可能です。

.box {
background: linear-gradient(#47d1f3, #7df6b6);
}

斜め向きのグラデーション

「○○deg」指定で角度調節可能です！値は正の数から負の数まで指定できます。

.box {
background: linear-gradient(-135deg,#47d1f3, #7df6b6);
}

2等分のグラデーション

「0%~50%まで」と「50%~100%まで」で指定することで縦半分に2色背景を作ることが出来ます。

.box {
background: linear-gradient(90deg, #47d1f 0%, #47d1f3 50%, #7df6b6 50%, #7df6b6 100%);
}

正しい効果測定は、正しい計測設定から！Googleアナリティクス設定項目チェックシート（無料）

Googleアナリティクスは、適切な初期設定を行って初めて、解析に役立つデータを計測できます。 正しい効果測定を行う上で、必要な設定項目のチェックシートをご用意しました。