【HTML/CSS】CSSで斜線ストライプ背景、liner-gradient()をマスター。完全解説。

CSSでは背景にlinear-gradient()関数を用いてグラデーション表現が可能です。

二つ以上の色の間で、連続的な直線の変化から構成される画像を生成します。

developer.mozilla.org

このグラデーションを応用して、色の変化を急にすることで、斜線やストライプの表現ができます。

サンプルのコードなどは調べると他でもたくさん出てくるかと思いますが、どういう仕組みでそうなるのか、すっきり理解できていないという方向けに解説したいと思います。

CSSのliner-gradient()を使用したストライプの作り方

シンプル二色グラデーション

まずは普通のグラデーションを生成してみましょう。

シンプルなブルーとグレーのグラデーションです。

CSSは以下のような感じ。

.grade{
  background-image: linear-gradient(blue, gray);
  width: 100px;
  height: 100px;
}

色を２つ以上指定するだけで間をなめらかに変化するグラデーションが画像として生成されます。生成されるのは画像なのでCSSプロパティはbackground-imageへの指定になることにご注意。background-colorではありません。

２色の変化の地点を指定してくっきり

では次に各色の場所を指定してみます。

縦横100pxの四角形の50px地点まではブルー、51px地点からグレーという風に、それぞれの色と同時にその色の地点を指定しています。

.grade{
  background-image: linear-gradient(blue 50px, gray 51px);
  width: 100px;
  height: 100px;
}

50px地点でのブルーから51px地点でのグレーまでの色の変化する中間地点がないので、グラデーションのはずがくっきりはっきりした二色になるのがおわかりいただけるでしょうか。

これがCSSによるストライプの正体です。

繰り返し背景にしてCSSストライプ完成

あとは好きな色、すきなサイズに調整してあげるだけで自由にストライプができます。

先ほどはpx指定で各色の地点を指定していましたが、％指定にして、background-sizeで生成される背景画像のサイズを調整した方が繰り返し背景として使い勝手がいいと思います。

.grade{
  background-image: linear-gradient(blue 50%, gray 51%);
  background-size: 20px 20px;
  width: 100px;
  height: 100px;
}

縦横20pxのブルーとグレーの四角形のリピートになってる感じですね。 

CSSのliner-gradient()を使用した斜線の作り方

linear-gradient()に角度をつける

先ほどのストライプにさらに、linear-gradient()では単位「deg」で角度を指定することが出来ます。やってみましょう。

二色のグラデーションで45度角度をつけるとこんな感じになっちゃいますね。

色の変化を調整して自然なストライプにする

では三色にしてみたらどうでしょう。

ブルー、グレー、ブルーという三色の変化のグラデーションにしています。

それぞれ49%地点でブルー、50%地点でグレー、51%地点でまたブルーというように指定しています。

ちなみにこの最初と最後のブルーは0%〜49%地点まで、51%〜100%地点までという前後の始点終点を省略した書き方です。

ですので間のグレーの地点と前後のブルーの始点終点は同じ地点を指定しても構いません。四地点の指定をした書き方は以下のような感じです。

.grade{
  background-image: linear-gradient(45deg, blue 49%, gray 49%,gray 51%, blue 51%);
}

ちょっとこれだと線が細いので調整してみましょう。

線は太くなりましたが、四角形の角部分がうまく斜めにつながって見えません。

さらに調整してみましょう。

綺麗になりましたね！これは以下のように繰り返しに適したグラデーションを描いて調整しています。

CSSストライプから斜線作成を流れでまとめ理解 

ちょっと整理してまとめて順を追ってみていくと以下のような流れで理解しやすいかもしれません。

repeating-linear-gradient()関数や色々な背景パターン

繰り返しに適したストライプの作り方としてパーセント指定とbackground-sizeでの調整以外に、px指定の場合はrepeating-linear-gradient()関数も使い勝手がよさそうです。

さらにさらに、以下のサイトでCSSのみでチェックやドット、他にも色々とかなりユニーク色々なパターンの背景のサンプルが掲載されています。

CSSグラデーションで作った背景パターンのサンプル

https://www.nxworld.net/tips/css-gradient-pattern.html

CSSのグラデーションで背景が楽にカスタマイズ出来て便利

いかがだったでしょうか。

ストライプの理解はすんなりいったかと思いますが、斜線は少し工夫が必要で、理解しづらかったかもしれません。

是非一度ご自身でCSSをいじってみると、「ここがこう」と把握しやすいかと思います。

一度理解さえしてしまえばカスタマイズも容易ですし、パターン画像など用意する手間なく簡単楽ちんに、CSSだけでストライプや斜線を使えて便利ですね。

最後までお読みいただいてありがとうございました！

リンク

リンク

今すぐ使えるCSSレシピブック