Webデザイナーブログから学ぶホームページ制作

CSSの機能を活用することで、ホームページやアプリケーションのテキスト（文字）に鮮やかなグラデーション効果を与えることができます。テキスト（文字）のグラデーションは、視覚的な魅力を高め、デザインに活気を与える素晴らしい手法です。
テキスト（文字）をグラデーションにさせたい場合は、HTMLとCSSのみで設定することができます。
CSSで設定する場合は、「background」プロパティや「background-image」プロパティに「linear-gradient」関数を使うことでテキスト（文字）をグラデーションに指定することができます。

今回は、CSSでテキスト（文字）をグラデーションにする方法を解説します。

テキスト（文字）をグラデーションにする場合は「linear-gradient」関数を基準にして複数のコードを組み合わせて配置します。「-webkit-background-clip」プロパティと「-webkit-text-fill-color」プロパティを組み合わせて配置することでテキスト（文字）をグラデーションにする設定を実装できます。

「linear-gradient」関数は、線形グラデーションを指定する要素です。

「linear-gradient」関数は、「グラデーションの角度または方向」「開始色」「途中色」「終了色」の値を記述します。値を記述する際は、カンマ（ , ）区切りで指定します。
グラデーションの角度または方向の値の指定方法は、「45deg」などの角度を指定する方法と「to right」のように左から右へと方向を指定する方法があります。
背景に関するすべてを指定する値は「カラー名」「16進数カラーコード」「RGB」「HSL」などの値を指定することができます。 また、「-webkit-background-clip」の値に「text」を指定して、「-webkit-text-fill-color」の値に透明(transparent)を指定して組み合わせることで実装できます。

background: linear-gradient(グラデーションの角度または方向, 開始色, 途中色, 終了色); 
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

.box1 {
  display: inline-block;
  font-size: 28px;
  font-family: "Roboto", sans-serif;
  font-weight: bold;
  margin:0 auto 5%;
  background: linear-gradient(90deg, #58c6ff 0%, #076ad9 40%, #ff3bef 80%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.box2 {
  display: inline-block;
  font-size: 28px;
  font-family: "Roboto", sans-serif;
  font-weight: bold;
  margin:0 auto 5%;
  background: linear-gradient(270deg, #58c6ff 0%, #076ad9 40%, #ff3bef 80%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.box3 {
  display: inline-block;
  font-size: 28px;
  font-family: "Roboto", sans-serif;
  font-weight: bold;
  margin:0 auto 5%;
  background: linear-gradient(0deg, #58c6ff 0%, #076ad9 40%, #ff3bef 80%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.box4 {
  display: inline-block;
  font-size: 28px;
  font-family: "Roboto", sans-serif;
  font-weight: bold;
  margin:0 auto 5%;
  background: linear-gradient(180deg, #58c6ff 0%, #076ad9 40%, #ff3bef 80%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.box5 {
  display: inline-block;
  font-size: 28px;
  font-family: "Roboto", sans-serif;
  font-weight: bold;
  margin:0 auto 5%;
  background: linear-gradient(5deg, #1bad07 30%, #fdee00 50%, #fd001e 70%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.box6 {
  display: inline-block;
  font-size: 28px;
  font-family: "Roboto", sans-serif;
  font-weight: bold;
  margin:0 auto 5%;
  background: linear-gradient(90deg, #8c7537 0%, #dbb00b 45%, #fde79d 70%, #dbb10c 85%, #bc7f04 90% 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

「repeating-linear-gradient」関数は、反復線形グラデーションを指定する要素です。

「repeating-linear-gradient」関数は、「グラデーションの角度または方向」「開始色 位置」「途中色 位置」「終了色 位置」の値を記述します。値を記述する際は、カンマ（ , ）区切りで指定します。
グラデーションの角度または方向の値の指定方法は、「45deg」などの角度を指定する方法と「to right」のように左から右へと方向を指定する方法があります。
背景に関するすべてを指定する値は「カラー名」「16進数カラーコード」「RGB」「HSL」などの値を指定することができます。 また、「-webkit-background-clip」の値に「text」を指定して、「-webkit-text-fill-color」の値に透明(transparent)を指定して組み合わせることで実装できます。

※ストライプのグラデーションは「repeating-linear-gradient」関数で指定します。

.box7 {
  display: inline-block;
  font-size: 28px;
  font-family: "Roboto", sans-serif;
  font-weight: bold;
  margin:0 auto 5%;
  background: repeating-linear-gradient(45deg, #ffb8d4, #ffb8d4 10px, #fc67a2 0, #fc67a2 20px);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

「linear-gradient」関数は、線形グラデーションを指定する要素です。

「linear-gradient」関数は、「グラデーションの角度または方向」「開始色」「途中色」「終了色」の値を記述します。値を記述する際は、カンマ（ , ）区切りで指定します。
グラデーションの角度または方向の値の指定方法は、「45deg」などの角度を指定する方法と「to right」のように左から右へと方向を指定する方法があります。
背景に関するすべてを指定する値は「カラー名」「16進数カラーコード」「RGB」「HSL」などの値を指定することができます。 また、「-webkit-background-clip」の値に「text」を指定して、「-webkit-text-fill-color」の値に透明(transparent)を指定して組み合わせることで実装できます。 「animation」関数と「@keyframes」を組み合わせてアニメーションを実装いたします。

※アニメーションは「animation」関数で指定します。

.box8 {
  display: inline-block;
  font-size: 28px;
  font-family: "Roboto", sans-serif;
  font-weight: bold;
  background-image: linear-gradient(45deg, #7e6b37 0%, #e8dbb8 50%, #eec148 90%);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation-name: gradationTextAnimation;
  animation-duration: 8s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes gradationTextAnimation{
    0%{
        background-position: 0 0;
    }
    50%{
        background-position: 100% 0;
    }
    100%{
        background-position: 0 0;
    }
}

CSSはWebデザインにおいて重要な役割を果たします。テキストをグラデーションにすることで、見栄えの良い効果を与えることができます。
CSSを使用してテキストにグラデーション効果を加えることで、ホームページにおいて魅力的な効果を実現することができます。線形グラデーションやラジアルグラデーションを使い、色や方向をカスタマイズすることで、自分のホームページに個性的なデザインを加えることができます。ただし、ブラウザの互換性に注意しながら適切なコーディングを行いましょう。さまざまな要素にテキストグラデーションを応用することで、魅力的なホームページを作り出しましょう。