ストライプ背景の応用で、CSSだけでチェック背景を作ってみる

スポンサーリンク
HTML・CSS

先日、CSSだけでストライプ背景を作ってみることにして記事にしましたが、せっかくなので応用で作れるチェック背景も作ってみようと思います。

ストライプ背景の作り方が基本になっていますので、ストライプ背景の作り方が分からない方は、先にCSSだけでストライプ背景を作ってみるをご確認ください。

チェック背景の作り方

チェック背景を作る場合も、ストライプ背景と同じようにbackground-imageプロパティのrepeating-linear-gradient()を使用します。

但し、ちょっと工夫が必要になりますのでご注意ください。

スタンダードなチェック背景

.standard-check {
  background-image:
    repeating-linear-gradient(
        0deg, 
        transparent 0,transparent 10px,
        #FFAA5A 10px, #FFAA5A 20px),
    repeating-linear-gradient(
        90deg, 
        transparent 0,transparent 10px,
        #FFAA5A 10px,#FFAA5A 20px)
} 

こちらが、スタンダードなチェック背景のCSSになります。
基本的には、ストライプ背景での「横縞」と「縦縞」を両方background-imageプロパティに指定することで、チェック柄にしています。

ストライプ背景のCSSとの違い

チェック背景とストライプ背景のCSSの大きな違いは、透過の指定になります。

transparent 0,transparent 10px

こちらが透過の指定になります。
これは、0pxから10pxまでは透過色を指定していることになります。イメージとしては、以下の図の状態になります。点線部分が透過指定してある部分だと思ってください。

透過色を使用したギンガムチェック

.gingham-check {
  background-image:
    repeating-linear-gradient(
        0deg, 
        transparent 0,transparent 20px,
        #593C8F88 20px, #593C8F88 40px),
    repeating-linear-gradient(
        90deg, 
        transparent 0,transparent 20px,
        #593C8F88 20px,#593C8F88 40px)
}

色の指定の際に、透明度を指定しています。#593C8Fが紫色のカラーコード、88が透明度50%を意味するコードになります。
半透明のストライプを交差させることで、ギンガムチェックのような背景を作成することが出来ます。

8桁で透明度まで指定するカラーコードの16進数は、現在では多くのブラウザが対応していると思うのですが、ちょっとIEに関しての確認だけが出来ていません。
もし表示されるかどうか不安という場合は、RGBで指定すると良いかと思います。

.gingham-check {
  background-image:
    repeating-linear-gradient(
        0deg, 
        transparent 0,transparent 20px,
        rgba(89,60,143,.5) 20px, rgba(89,60,143,.5) 40px),
    repeating-linear-gradient(
        90deg, 
        transparent 0,transparent 20px,
        rgba(89,60,143,.5) 20px,rgba(89,60,143,.5) 40px)
}

こちらはRGBで色指定をし、透明度を50%に指定しています。

16進数のカラーコードをRGBに変換したい場合は、便利なツールがたくさんありますので、そちらから変換してみてください。

 

まとめ

CSSでチェック背景を作るには、透明部分を指定したストライプを重ねる形で実現出来ます。
background-imageプロパティに複数のrepeating-linear-gradient()が指定出来るから可能な方法ですね。

repeating-linear-gradient()やradial-gradient()などをしっかりと理解すれば、アレンジ次第で色々な模様を作ることが出来ます。是非チャレンジしてみてください。

作ってるだけでも意外と楽しいですよ。

タイトルとURLをコピーしました