0Pricing
CSS Academy · レッスン

グラデーション：線形と放射

linear-gradient()とradial-gradient()で滑らかな色の変化を作成します。

「グラデーション：線形と放射」はCoddyKit上の無料CSS Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはCSS Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 CSS Academyコースには全4レッスンが含まれています。

CSSグラデーションとは

CSSグラデーションは、2色以上の間を変化させる生成画像です（画像ファイルは必要ありません）。background-imageまたはbackgroundショートハンドの値として指定します。

linear-gradient()の基本

線形グラデーションでは、直線に沿って色が変化します。最初の引数で方向を指定し、その後にカラーストップを続けます。

<div class="gradient-demo"></div>

グラデーションの方向：キーワードと角度

方向はキーワードまたは角度で指定できます。

<div class="dir-keyword"></div>
  <div class="dir-45deg"></div>
  <div class="dir-135deg"></div>

複数のカラーストップ

必要な数だけカラーストップを追加できます。各ストップには、位置（長さまたはパーセント）を任意で指定できます。

<div class="stops"></div>

ハードカラーストップ

2つのストップを同じ位置に設定すると、ハードストップを作成できます。これは、色が混ざらずに急に切り替わる指定です。

<div class="hard-stop"></div>

繰り返し線形グラデーション

repeating-linear-gradient()はグラデーションのパターンをタイル状に繰り返し、ストライプやテクスチャを作成します。

<div class="stripes"></div>

radial-gradient()の基本

放射状グラデーションは、中心点から外側に向かって楕円形または円形に広がります。

<div class="radial-demo"></div>

放射状グラデーションの形状とサイズ

グラデーションの形状（circleまたはellipse）と、広がりを指定するキーワードを制御できます。

<div class="radial-circle"></div>
  <div class="radial-ellipse"></div>

放射状グラデーションの位置

形状とサイズの後にat <position>を指定すると、放射状グラデーションの中心を移動できます。

<div class="radial-position"></div>

円錐グラデーション

conic-gradient()は、円グラフのように中心点の周囲で色を回転させます。fromで開始角度を指定し、必要に応じてatで位置を指定します。

<div class="conic-demo"></div>

グラデーションの透明度

グラデーションのカラーストップにtransparentまたはrgba()を使用すると、要素の背景色から滑らかにフェードインまたはフェードアウトできます。

<div class="fade-overlay"></div>

確認問題

中心点から外側に向かって広がるグラデーションを生成するCSS関数はどれですか。

まとめ

線形グラデーションは直線に沿って変化し、放射状グラデーションは外側に向かって広がり、円錐グラデーションは点の周囲を回転します。ストライプにはハードストップを使用します。すべてのグラデーション関数はbackground-imageの値であり、外部ファイルなしで画像を生成します。

よくある質問

「グラデーション：線形と放射」レッスンは無料ですか？

はい。「グラデーション：線形と放射」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、CSS Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 CSS Academyコースには全4レッスンが含まれています。

「グラデーション：線形と放射」で何を学びますか？

linear-gradient()とradial-gradient()で滑らかな色の変化を作成します。 ブラウザで直接実行するハンズオンコードでCSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

CSS Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのCSS Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。

「グラデーション：線形と放射」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このCSS Academyレッスンでコードを書いて実行できますか？

はい。すべてのCSS Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. 色の値：名前、16進数、RGB、HSL
  2. 背景色と背景画像
  3. グラデーション：線形と放射
  4. 不透明度とRGBAの透明度
← CSS Academyに戻る