株式会社スゴヨク グーグルパートナーバッジ

福岡 SEO対策・ホームページ制作・広告運用代行なら
株式会社スゴヨク

HOME > ブログ > CSSでグラデーションを使う方法

SUGOYOKU BLOG

CSSでグラデーションを使う方法

福岡に拠点を置いているホームページ制作・SEO対策の株式会社スゴヨクです。

今回は、CSSでグラデーションを使う方法についてご紹介していきたいと思います。

グラデーションを使う方法

まず初めに、cssでグラデーションを使うときはbackgroundプロパティを使います。



グラデーションのかけ方

では、グラデーションのかけ方についてご紹介していきます。

線型(直線)

線型(直線)のグラデーションをを使うときは、linaer-gradientを使用します。
それでは、早速使い方を見ていきましょう。

CSS

かっこの中に、色の指定はもちろんできますし、さらに、グラデーションの方向を指定することもできます。

これを、実際に実装してみると以下のようになります。



CSS

上記のように指定することで、左から右へと色が変化していくのがわかると思います。



円形

次に、円形のグラデーションをを使うときは、radial-gradientを使用します。
指定方法は先程の洗浄グラデーションと似ています。

CSS

円形グラデーションでは、中心位置や形状を変化することができます。

これを、実際に実装してみると以下のようになります。



CSS

上記のように指定することで、中心から色が変化していくのがわかると思います。




今回のグラデーションはいかがでしたでしょうか。

いろんな色と組み合わせることで
様々な表現が可能だと考えると
なんだかワクワクしますね!!

HP無料診断

毎月3社様限定SEO対策無料診断

【実践マーケティング手法22選】 無料ダウンロード

マーケティング手法22選

助成金・補助金・融資・M&A等の総合経営支援サービス
「補助金パートナー」

月額定額制で、ホームページやECサイト運用、営業資料・チラシ・DMなどの製作代行から補助金や助成金など資金調達の情報を提供及び申請代行まで一手に支え会社の成長をサポートするコンサルティング型のサービスです。


補助金 お問い合わせ

ワードプレスでSEO対策をするなら【オリテン】

seoで高位置検証済みのオリジナルテンプレート制作
完全オリジナルの自社テンプレートを毎月3社様限定で制作を承っております。

補助金 お問い合わせ

ホームページの事でお困りならこちらから

お見積り・ホームページ制作・運用、広告に関するご質問まで、どんなことでもお気軽にご相談ください。
日・祝日・休業日以外は24時間以内に返信いたします。

スゴヨク ロゴ

TOP

//サムネイルを取得