マイティーBlog|リスティング広告やWEBマーケティング情報

トップページ ブログ > デザイン > 初心者向け】cssで背景グラデーションを使いこなそう

Mighty Ace Blog

マイティーBlog

デザイン

2021.09.30

初心者向け】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アナリティクス設定項目チェックシート(無料)

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

Googleアナリティクス,アクセス解析でWeb集客分析・改善なら福岡のマイティーエース

リスティング・Googleアナリティクス・ホームページ・ランディングページなど
Webマーケティングのことなら何でもご相談ください

株式会社マイティーエースでは、様々なWeb広告・Webマーケティングなど
お客様に合ったご提案しています。
興味をお持ちいただけた方は、まずは気軽にご相談ください。

あわせて読みたい人気の記事

よく見られている記事

最新記事

BLOG MENU

株式会社マイティーエースのSNSもチェックしてみてください

Copyright (c)2014-2020 MightyAce, inc. All Right Reserved.