只今、PHPを学習しております

(CSS)要素の背景にストライプを適応するrepeating-linear-gradient()

トッド

要素の背景にストライプを適応したいと思ったら、repeating-linear-gradient()を使うと簡単に作ることができますよ。

それでは、早速サンプルを見ていこう。

今回のトピックはサンプルになぞって紹介していきます。

サンプル
ストライプ
.box {
  width: 160px;
  height: 160px;
  margin: 0 auto;
/*ここから*/
  background: repeating-linear-gradient(
    0deg,
    lightcoral 0px,
    lightcoral 10px,
    lightskyblue 10px,
    lightskyblue 20px
  );
/*ここまで*/
  border-radius: 9px;
}

実際に、「ストライプ」を背景に適応させている箇所は、上記内でコメントアウトしている部分になります。

repeating-linear-gradient()について

repeating-linear-gradient() を使用して「ストライプ」を描画するには、角度A色開始位置A色終了位置B色開始位置B色終了位置、をそれぞれ指定する必要があります。

サンプルで表示している要素の領域は 160px x 160px になります。そのうち、2色のストライプが占める領域は20pxです。よって、サンプルでは「ストライプ」の描画を8回繰り返すことで領域全体にストライプが適応されていることになります。

必ずしも、8回ではなく。ストライプを描画する要素の領域に対して自動的に対応してくれるものです。

これが、repeat-と名の付く意味合いですね。

角度

サンプルでは、0deg、のように 数値 x deg を使用して角度を指定していますが、「下から上へ」を表す方法には「to top」と、指定しても同じことを表しています。

その他にも「to top right」、「to left」、「to bottom right」、……のように指定することもできます。

ストライプ

/*ここから*/
  background: repeating-linear-gradient(
    to top right,
    lightcoral 0px,
    lightcoral 10px,
    lightskyblue 10px,
    lightskyblue 20px
  );
/*ここまで*/

上記のように、角度を「to top right指定すれば右上の角に向かうストライプを描画することができ、数値で表した、45deg と同じ意味合いです。

開始位置&終了位置

開始位置と終了位置の組み合わせからなる色(ex.A色とB色)を、ズラして配置することでストライプは構成されています。

ストライプ

/*ここから*/
  background: repeating-linear-gradient(
    0deg,
    lightcoral 0px,
    lightcoral 20px,
    lightskyblue 20px,
    lightskyblue 40px
  );
/*ここまで*/

このように、開始位置&終了位置で指定する数値を大きくしてあげると、ストライプが描画される要素の領域を占める割合が増えることになり、結果的にストライプの太さが変わり、繰り返される数も今回の場合は4回になります。

 


今回は、2色のストライプを例として扱っているので、A、B を用いて説明していますが、C、を後述することで3色のストライプを作成することも可能です。

また、repeating-linear-gradient()を使用した「ストライプ」を表現する方法を知っていれば、チェック柄なども工夫次第で描画することができます。

コメントを残す

メールアドレスが公開されることはありません。