CSSでグラデーションを使う方法
福岡に拠点を置いているホームページ制作・SEO対策の株式会社スゴヨクです。
今回は、CSSでグラデーションを使う方法についてご紹介していきたいと思います。
グラデーションを使う方法
まず初めに、cssでグラデーションを使うときはbackgroundプロパティを使います。
グラデーションのかけ方
では、グラデーションのかけ方についてご紹介していきます。
線型(直線)
線型(直線)のグラデーションをを使うときは、linaer-gradientを使用します。
それでは、早速使い方を見ていきましょう。
【CSS】
|
|
セレクタ{ background: linear-gradient(いろが変わっていく方向、開始色、終了食); } |
かっこの中に、色の指定はもちろんできますし、さらに、グラデーションの方向を指定することもできます。
これを、実際に実装してみると以下のようになります。
【CSS】
|
|
div{ background: linear-gradient(90deg,#ed7a94,#e7c0f7); } |
上記のように指定することで、左から右へと色が変化していくのがわかると思います。
円形
次に、円形のグラデーションをを使うときは、radial-gradientを使用します。
指定方法は先程の洗浄グラデーションと似ています。
【CSS】
|
|
セレクタ{ background: radial-gradient(形状や中心位置、開始色、終了食); } |
円形グラデーションでは、中心位置や形状を変化することができます。
これを、実際に実装してみると以下のようになります。
【CSS】
|
|
div{ background: linear-gradient(90deg,#ed7a94,#e7c0f7); } |
上記のように指定することで、中心から色が変化していくのがわかると思います。
今回のグラデーションはいかがでしたでしょうか。
いろんな色と組み合わせることで
様々な表現が可能だと考えると
なんだかワクワクしますね！！
ちょこっとメンターサービス
HP無料診断
【実践マーケティング手法２２選】 無料ダウンロード
助成金・補助金・融資・M＆A等の総合経営支援サービス
「補助金パートナー」
月額定額制で、ホームページやECサイト運用、営業資料・チラシ・DMなどの製作代行から補助金や助成金など資金調達の情報を提供及び申請代行まで一手に支え会社の成長をサポートするコンサルティング型のサービスです。
ワードプレスでSEO対策をするなら【オリテン】
seoで高位置検証済みのオリジナルテンプレート制作
完全オリジナルの自社テンプレートを毎月3社様限定で制作を承っております。
