デジタルマーケティングやデザイン・開発に関する情報やセルリアに関するトピックを更新。
運営メディアのピックアップコンテンツ、外部サイトへの寄稿記事なども公開しています。

ビジネスを成功へと導くWeb制作・インターネット広告・コンサルティング

Search

サイト内検索

【HTML+CSS】背景グラデーションを時間変化させて実装する方法

更新:2023年12月19日 カテゴリ: デザイン・開発

みなさんこんにちは!エンジニアの高澤です! 今回はHTMLとCSSで背景グラデーションを時間変化させて実装する方法について解説したいと思います。

実際の実務で使えるように非常にシンプルなサンプルコードをもとに解説し、コピー&ペーストすれば実装できるように構成されておりますので、よろしければぜひ当記事をお仕事や学習にお役立ていただけましたら幸いです。

完成イメージは下記になります。

See the Pen Untitled by Shota Takazawa (@takazawa) on CodePen.

時間変化させて動く背景グラデーション使う場面

時間変化させて動く背景グラデーションを使う場面はさまざまな場面で考えられます。

  • グラデーションが適切でリッチなウェブサイトを実装するとき
  • ボタンにリッチな表現を加えたいとき
  • ローディング画面の背景などに動くグラデーションを加えたいとき

などさまざまな場面で利用可能です。

時間変化させた背景グラデーションを実装する方法

それでは早速実装方法について解説していきたいと思います!

まず当記事ではサンプルコードを通して背景グラデーションを時間変化させた動きを実装していきたいと思いますが、意外と簡単で少ないコードで実装することができます。

HTMLを記述する

まずはHTMLを記述します。 ここではどんな実装場面でも応用しやすいように最小限のシンプルな構成でHTMLを記述します。

ご覧のとおり、ただclass属性が付与されたdivタグを一つ用意しているだけになります。

たったこれだけです。 あとは応用として、例えばサンプルコード中のclass属性の「gr__box」をボタンのHTMLタグやサイトの背景を構成しているHTMLタグにclass属性として追加していただけますと、このあと解説するCSSを記述した後に動きのある背景グラデーションを表現することができますので、ぜひお試しいただけますと幸いです。

CSSを記述する

次に先ほど記述したdivタグに時間変化させたグラデーションを表現するためのCSSを記述していきます。

上記CSSコードでは、アニメーションのキーフレームを定義しています。 grmoveはアニメーション名を指定しています。

予め動くグラデーションを加えたいHTMLタグにCSSで普通のグラデーション表現を指定しておき、そのグラデーションをキーフレームでbackground-positionプロパティで一定の時間ごとに動かすようにしております。

最後に、下記が完成したイメージです。

See the Pen Untitled by Shota Takazawa (@takazawa) on CodePen.

グラデーションのCSSを自動化するツールについて

当記事で解説しているCSSコードは少ない記述で非常にシンプルですが、そもそもグラデーションを表現するCSSコード自体はエンジニアが自力で記述できるかというと色コードの組み合わせは何万通りとあるので難しいものがあるかと思います。

そんなときに便利なのが下記の「CSS Gradient」というグラデーションのCSSコードを自動生成することができるツールサイトになります。

「CSS Gradient」はこちらから閲覧できます。

非常に使いやすく、お好きな色を設定し調整していただくだけでCSSを自動生成することができます。 生成したらグラデーションのCSSコードをコピーして先ほど解説したサンプルコードのbackgroundプロパティに上書きするかたちでペーストしていただけますと変更できます。

また、上記サイト以外にも多くのグラデーション生成ツールサイトがあるため、もしよろしければ探してご利用してみてください。

まとめ

今回はHTMLとCSSで背景グラデーションを時間変化させて実装する方法を解説いたしました。

当記事でご紹介しているサンプルコードをご確認いただければお分かりかと思いますが、本当に少ないHTMLとCSSのコードで動くグラデーションを実装することができてしまいます。

また応用範囲も広く、グラデーションの表現が適するウェブサイトであれば、ローディング画面やサイト自体の背景だったりボタンなどに簡単に実装することができます。

当記事ではコピー&ペーストするだけで実務で使えるサンプルコードを掲載し、繰り返しお使いいただけるようになっておりますので、よろしければお役立ていただけますと幸いです。

更新:2023年12月19日 カテゴリ: デザイン・開発

現状のデジタルマーケティングに課題をお感じですか?

デジタルマーケティング施策やWebサイトの機能・デザイン等を見直される際は、ぜひお声がけください。 貴社のご状況やご要望に合わせ、アクセス解析から数値的な根拠を持って課題点の抽出と改善に向けての施策を無料にてご提案させていただきます。

お問い合わせ

CONTACT

目標を共に背負い、伴走するWebコンサルティング

Web Cusulting & Direction

当社の考えるWebコンサルティングは、目標をクライアントと共に共有し達成へと邁進すること。これは「解決策を示すことが役割である」という従来のコンサルティングの考え方と少し異なるかもしれません。あくまで、コンサルタントは経営者や事業責任者に対し、課題に対して解決につながる施策を示すまで仕事、と言う解釈が一般的でしょう。当社は設立してすぐにWebコンサルティング事業をはじめました。若いメンバー中心、驚かれるような実績もほとんどありませんでした。
そんな私たちが、大きな責任を背負った役職者に対し助言を行い、プロジェクトを成功に導かなければなりません。改善策を示すだけでは足りませんし、なかなか信じてももらえません。そのような中でどうしたらチームの一員として貢献できるのか。もがいた末たどり着いた答えは非常にシンプルでした。
助言だけでなく同時に実践も引き受け、先に成果を出してしまうこと。そうすれば、その実績が信頼に変わり、我々の示す改善策がチームに受け入れられやすくなり良いサイクルが作れます。私たちの中で強く根付いた価値観、「伴走するWebコンサルティング」を心の中心に据えて、クライアントの目標に対して真正面から向き合います。

作るだけではない、ビジネスの芯を捉えるWeb制作・開発

Design & Development

Webサイト制作会社、デザイン会社は日本全国に1万社以上存在します。加えて、最近ではWebサイトを無料で簡単に作れるサービスなども生まれてきました。
Web制作を生業とする企業は今一度事業のあり方を考えなければならない帰路に立たされています。当社もその例にもれず、自分たちのできるWeb制作とは何か、真剣に悩んできました。そしてたどり着いたのが、「ビジネスの芯を捉える」Web制作・開発を提供すること。かっこいいデザイン、印象の残るデザイン、確かにそれらは非常に価値があります。誤解を恐れずに言うならば、我々よりも良いデザインを作る会社はたくさんあるでしょう。我々は広告賞の受賞歴もなければ、アートに精通したクリエイティブディレクターが在籍しているわけでもない。言ってしまえば、最先端のクリエイティブを手掛けるにはまだ経験が浅いのは否めません。
だったら何ができるのか?私たちは、”集客で成果を出す”ことに長けています。創業から5年、クライアントのビジネスで結果を出すことだけを考えてきました。我々にとってデザインは手段。得意のユーザー解析、SEO、広告運用と組み合わせて「ビジネスの芯を捉えた」デザインを創造することで事業成長に繋げていきます。

高速PDCAを実現する、総合的な広告運用

Advertising management

「広告運用代行会社」と聞くと、多くの人はGoogleやYahoo!のリスティング広告をクライアントの代わりに運用する会社というイメージを思い浮かべるのではないでしょうか。それはある種間違いではないのですが、もしかすると時代遅れかもしれません。インターネット広告の種類は多種多様、リスティング広告とほとんど同じ意味とし使われていた「運用型広告」は、実際はリスティング広告以外にも効果的な手法が数多く存在します。加えて、Google広告やYahoo!広告はAIによる運用の簡略化やサポートの充実化が進み、代理店を介さずとも未経験者の運用で一定の効果を挙げられるようにもなっています。広告代理店の存在意義を改めて定義し直さなければなりません。
私たちが考える広告運用代行の価値は「成果を出し続けること」と「成果を出すプロセス、ノウハウをクライアントと共有すること」であると考えています。成果を出し続けるために、当社は多数の広告手法に精通する広告運用コンサルタントを育て、それらを最適なバランスで組み合わせて運用する体制を整備しました。
運用の状況をタイムリーにクライアントと共有しご一緒に課題や改善策を共有することで、長期的に見て価値の高い広告パートナーとしてチームに貢献いたします。

目標を共に背負い、伴走するWebコンサルティング

Web Cusulting & Direction

当社の考えるWebコンサルティングは、目標をクライアントと共に共有し達成へと邁進すること。これは「解決策を示すことが役割である」という従来のコンサルティン[続きを表示する]グの考え方と少し異なるかもしれません。あくまで、コンサルタントは経営者や事業責任者に対し、課題に対して解決につながる施策を示すまで仕事、と言う解釈が一般的でしょう。当社は設立してすぐにWebコンサルティング事業をはじめました。若いメンバー中心、驚かれるような実績もほとんどありませんでした。そんな私たちが、大きな責任を背負った役職者に対し助言を行い、プロジェクトを成功に導かなければなりません。改善策を示すだけでは足りませんし、なかなか信じてももらえません。そのような中でどうしたらチームの一員として貢献できるのか。もがいた末たどり着いた答えは非常にシンプルでした。助言だけでなく同時に実践も引き受け、先に成果を出してしまうこと。そうすれば、その実績が信頼に変わり、我々の示す改善策がチームに受け入れられやすくなり良いサイクルが作れます。私たちの中で強く根付いた価値観、「伴走するWebコンサルティング」を心の中心に据えて、クライアントの目標に対して真正面から向き合います。

作るだけでない、ビジネスの芯を捉えるWeb制作・開発

Design & Development

Webサイト制作会社、デザイン会社は日本全国に1万社以上存在します。加えて、最近ではWebサイトを無料で簡単に作れるサービスなども生まれてきました。Web制[続きを表示する]作を生業とする企業は今一度事業のあり方を考えなければならない帰路に立たされています。当社もその例にもれず、自分たちのできるWeb制作とは何か、真剣に悩んできました。そしてたどり着いたのが、「ビジネスの芯を捉える」Web制作・開発を提供すること。かっこいいデザイン、印象の残るデザイン、確かにそれらは非常に価値があります。誤解を恐れずに言うならば、我々よりも良いデザインを作る会社はたくさんあるでしょう。我々は広告賞の受賞歴もなければ、アートに精通したクリエイティブディレクターが在籍しているわけでもない。言ってしまえば、最先端のクリエイティブを手掛けるにはまだ経験が浅いのは否めません。だったら何ができるのか?私たちは、”集客で成果を出す”ことに長けています。創業から5年、クライアントのビジネスで結果を出すことだけを考えてきました。我々にとってデザインは手段。得意のユーザー解析、SEO、広告運用と組み合わせて「ビジネスの芯を捉えた」デザインを創造することで事業成長に繋げていきます。

高速PDCAを実現する、総合的な広告運用

Advertising management

「広告運用代行会社」と聞くと、多くの人はGoogleやYahoo!のリスティング広告をクライアントの代わりに運用する会社というイメージを思い浮かべるのではな[続きを表示する]いでしょうか。それはある種間違いではないのですが、もしかすると時代遅れかもしれません。インターネット広告の種類は多種多様、リスティング広告とほとんど同じ意味とし使われていた「運用型広告」は、実際はリスティング広告以外にも効果的な手法が数多く存在します。加えて、Google広告やYahoo!広告はAIによる運用の簡略化やサポートの充実化が進み、代理店を介さずとも未経験者の運用で一定の効果を挙げられるようにもなっています。広告代理店の存在意義を改めて定義し直さなければなりません。私たちが考える広告運用代行の価値は「成果を出し続けること」と「成果を出すプロセス、ノウハウをクライアントと共有すること」であると考えています。成果を出し続けるために、当社は多数の広告手法に精通する広告運用コンサルタントを育て、それらを最適なバランスで組み合わせて運用する体制を整備しました。運用の状況をタイムリーにクライアントと共有しご一緒に課題や改善策を共有することで、長期的に見て価値の高い広告パートナーとしてチームに貢献いたします。

サイト情報

SITE INFO