CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSで線形グラデーションを繰り返す方法｜repeating-linear-gradientの使い方

CSSで線形グラデーションを繰り返して表示したい場合は、repeating-linear-gradient()関数を使用します。この関数を使うと、指定したグラデーションのパターンが要素全体に自動的に繰り返され、ストライプ模様などの装飾的な背景を簡単に作成できます。

repeating-linear-gradient()とは

通常のlinear-gradient()関数は、開始色から終了色へ一度だけグラデーションを描画しますが、repeating-linear-gradient()関数はそのパターンを要素全体に繰り返し適用します。各色の位置を指定することで、任意の周期でグラデーションがループする仕組みです。

基本構文

background: repeating-linear-gradient(角度または方向, 色1 位置1, 色2 位置2, ...);

実装例

以下のコードでは、赤・黄・緑のグラデーションパターンを繰り返し表示しています。実際にコードを実行して、動作を確認してみてください。

サンプルコード

<!DOCTYPE html>
<html>
   <head>
      <style>
         #demo {
            height: 100px;
            background: repeating-linear-gradient(red, yellow 30%, green 30%);
         }
      </style>
   </head>
   <body>
      <h2>線形グラデーション</h2>
      <div id = "demo">繰り返し線形グラデーション</div><br>
   </body>
</html>

コードのポイント解説

  • red：開始色として赤を指定しています。
  • yellow 30%：要素の高さ30%の位置まで黄色へ滑らかに変化させます。
  • green 30%：同じ30%の位置で緑に切り替えることで、シャープな境界線を作り出しています。
  • この一連のパターンが、要素の高さ全体にわたって繰り返し描画されます。

まとめ

repeating-linear-gradient()を活用すれば、画像ファイルを使わずにCSSだけで繰り返しパターンの背景を作成できます。ストライプ柄など、軽量でレスポンシブ対応しやすいデザインを実現したい場合に、ぜひ取り入れてみてください。

  1. CSSでスクロールバーを非表示にする方法をわかりやすく解説

    CSSでスクロールバーを非表示にする基本の方法Webページや特定の要素からスクロールバーを非表示にしたい場合、CSSのoverflowプロパティを使うのが最もシンプルな方法です。overflow: hidden;を指定すると、コンテンツが領域からあふれてもスクロールバーが表示されなくなります。実装例<!DOCTYPE html> <html> <head> <style> body { height: 150vh; width: 200vw; overflow: hidden;

  2. CSSで矢印を作成する方法！borderとrotateを組み合わせた4方向矢印の実装テクニック

    CSSでは、画像やアイコンフォント、外部ライブラリに頼らなくても、border（境界線）とtransform: rotate()を組み合わせるだけで、上下左右どの方向の矢印でも簡単に作成できます。境界線でL字型の角を作り、それを回転させるのが基本的な考え方です。 サンプルコード <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>