CSSでチェック柄の背景デザインをするやり方を説明します。
チェック柄のデザインにするために使用するCSSのプロパティや値の使い方、そして画像の上にチェック柄の背景を透過して表現するやり方なども含めて説明します。
CSSでチェック柄の背景デザインにするやり方
はじめに背景デザインをチェック柄にする全体的なCSSの記述と表示を確認しておき、これからどんなやり方をするのか軽く把握しておきます。
body {
box-sizing: border-box;
padding: 0;
margin: 0;
}
.bg_mesh {
position: relative;
width: 100%;
height: 100vh;
background-color: #fff;
}
.bg_mesh::after {
content: "";
position: absolute;
background-image: linear-gradient(90deg, rgba(0, 0, 0, .5) 50%, transparent 50%), linear-gradient(rgba(0, 0, 0, .25) 50%, transparent 50%);
top: 0;
right: 0;
bottom: 0;
left: 0;
background-size: 50px 50px;
}
CSSを使用して背景をチェック柄で透過するやり方では、主に3つのプロパティを使用してチェック柄のデザインにすることができます。
- position
- background-image
- background-size
position:relativeを背景要素に指定して基準要素に、そしてposition:absoluteを背景要素のafter擬似要素に指定して背景要素の上にかぶせます。
background-imageはチェック柄を作るために使用。linear-gradientでカラーをrgba指定することで透過したチェック柄の背景デザインを表現します。
background-sizeはbackground-imageのlinear-gradientで背景にしたチェック柄に対してのサイズを調整するために使用します。
チェック柄にするCSSをあてるHTMLは以下のbody要素内のdiv要素の任意のクラス名です。
<body>
<div class="bg_mesh"></div>
</body>
背景デザインはチェック柄のパターンのうち「ブロックチェック」になるのかと思います。2色の濃淡をつけたデザインパターンです。
先に全体のCSSをみてもらいましたが、チェック柄にする具体的なCSSの使い方を１つずつ解説したので読み進めて理解を深めてみてください。
CSSで背景を表示するHTML
CSSでチェック柄の背景を表示するための要素をHTMLのdivタグでマークアップします。
<body>
<div class="bg_mesh"></div>
</body>
マークアップするdiv要素にはクラス属性で任意のクラス名を付与しておきます。
div要素の任意のクラス名をCSSでクラスセレクタにしてチェック柄の透過背景を指定できるようにしておきます。
background-imageでチェック柄にする
CSSで背景をチェック柄で透過するやり方のうち、チェック柄を作成するやり方についてです。
以下のCSSの中で背景を表示するdiv要素(bg_mesh)にチェック柄の背景をかぶせます。任意のクラス名をつけたbg_meshをクラスセレクタにして、position:relativeを指定することで基準位置にしておきます。
body {
margin: 0;
background: #333;
}
.bg_mesh {
position: relative;
width: 100%;
max-width: 640px;
height: 300px;
background-color: #fff;
margin: 50px auto;
}
position:relative以外のCSSとbodyのCSSは今回のチェック柄にして透過するやり方の説明用に見やすい表示にできるようにしただけの記述です。
次に任意のクラス名をつけた.bg_meshのクラスセレクタに擬似要素のafterを記述したセレクタを作ります。
.bg_mesh::after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: linear-gradient(90deg, rgba(0, 0, 0, .5) 50%, transparent 50%), linear-gradient(rgba(0, 0, 0, .25) 50%, transparent 50%);
background-size: 50px 50px;
}
after擬似要素のcontentは空にしておきます。
そしてafter擬似要素のポジションをposition:absoluteにして、top、right、bottom、leftの値を全て0指定。これでposition:relativeで基準位置にしておいたdiv要素の上にチェック柄の背景が表示できるようになります。
位置が指定できたら.bg_mesh::afterセレクタにはbackground-imagで背景画像を指定できるようにしてliner-gradient()関数でチェック柄と透過の指定をします。
linear-gradient(90deg, rgba(0, 0, 0, .5) 50%, transparent 50%),
linear-gradient(rgba(0, 0, 0, .25) 50%, transparent 50%);
liner-gradientは2つ指定して角度を90degとdegなしの初期値の2つの角度で色と透過の指定をします。
90degとdegなしどちらにもrgbaの値にrgbaカラーコードを指定。そして50%の半分でカラーストップ。
カラーストップした残りの50%には、transparent 50%を指定します。
90degの角度で指定したカラーと透過度が左から右の横方向を担当するチェック柄のカラー。
degを指定しない初期値の角度の方は、カラーと透過度が上から下の縦を担当するチェック柄のカラーです。
ここまでの記述したCSSでブラウザに表示するとチェック柄にする原型で以下の画像のように表示できます。
最後にbackground-size: 50px 50px;と指定して縦横のサイズを適用させます。
background-sizeで縦横のサイズ指定をすると上の画像のようにチェック柄のデザインで表示できれば、CSSで背景をチェック柄で透過するやり方の成功です。
チェック柄にするtransparentがポイント
CSSで背景をチェック柄で透過するやり方の中で、少し理解不足になりそうな部分がtransparentの指定かもしれません。
チェック柄のCSSをいじって遊んでたら地味にチェック柄にデザインする作業の中でtransparentがポイントなんだと思えたのです。
transparentを指定したbackgroun-imageプロパティ内の記述を以下で切り分けました。
background-image:
linear-gradient(90deg, rgba(0, 0, 0, .5) 50%, transparent 50%),
linear-gradient(rgba(0, 0, 0, .25) 50%, transparent 50%);
チェック柄のデザインにしたCSSでliner-gradientは角度、rgbaカラーコード、カラーストップの指定を関数の値として記述します。
このときのtransparentの指定がチェック柄にするポイントなのですが、transparentはliner-gradientの値の中でカラーを透明にする役割を果たしています。
透明度ではなく透明にしてます。
切り分けた上記CSSのliner-gradientなら、背景色を適用する要素の半分(50％)を、rgba(0, 0, 0, .5)のアルファで透明度を指定していますが、残りの50%のカラーはtransparentで透明にしています。
そのため縦横どちらのグラデーションも半分が透明度、残り半分は透明になることで、transparentの透明部分は、背景要素のdivに指定したカラーが適用されるので、いい感じのチェック柄が表現できるということなのです。
CSSで透過したチェック柄の背景に画像をつける
CSSで背景をチェック柄で透過するやり方を基本として覚えると、応用が可能になり、透過したチェック柄の背景で画像を覆う網かけとかメッシュのようなデザインにして、いい感じにすることもできます。
CSSで透過したチェック柄の背景を活用するパターンとして、透過したチェック柄を画像の背景にするやり方を説明します。
<div class="bg_mesh">
<img src="weaver.jpg" alt="">
</div>
まずはHTML側で親要素divの子要素にimgで画像を表示します。CSSでチェック柄の背景デザインにするやり方のときに使用したdiv要素にimgタグを追加しただけです。
.bg_mesh{
position: relative;
width: 100%;
max-width: 640px;
height: auto;
margin: 50px auto;
background-color: #fff;
}
.bg_mesh::after{
content: "";
position: absolute;
background-image: linear-gradient(90deg,rgba(0,0,0,.5) 50% ,transparent 50%),linear-gradient(rgba(0,0,0,.25) 50% ,transparent 50%);
top: 0;
right: 0;
bottom: 0;
left: 0;
background-size: 50px 50px;
}
img{
width: 100%;
vertical-align: top;
}
CSSではimgの親要素(.bg_mesh)のheightを300pxで固定していたのでautoにして画像に合わせて伸縮できるようにします。
そしてHTMLで表示したimgの画像幅を100%で指定。おそらくこの段階で画像の下に少しチェック柄の透過背景が寸足らずになり画像がはみ出します。
imgに対してvertical-align: top;を指定することで、チェック柄の透過背景と画像がキレイに重なります。
ブラウザで表示確認して画像に透過したチェック柄の背景が表示すれば、CSSで透過したチェック柄を画像の背景にするやり方が成功しています。
background-colorで背景を黒透過
次に画像の背景を全体的にうっすら黒で透過します。
.bg_mesh::after{
content: "";
position: absolute;
background-color: rgba(0,0,0,.25);
background-image: linear-gradient(90deg,rgba(0,0,0,.5) 50% ,transparent 50%),linear-gradient(rgba(0,0,0,.25) 50% ,transparent 50%);
top: 0;
right: 0;
bottom: 0;
left: 0;
background-size: 50px 50px;
}
背景をチェック柄にしたafter擬似要素のセレクタ内でbackground-colorの指定を加えます。
そしてrgba()の値にrgbaカラーコードを使用して色と透過度の指定をすると以下のように画像全体を薄い黒で透過できます。
先に指定していたbackground-imageのlinear-gradientでは、背景の半分は透明だったのでbackgroud-colorのrgbaカラーの透過度で背景全体に透過させるというやり方です。
背景画像のサイズ調整でいい感じに仕上げる
最後に背景画像のサイズ調整でいい感じに仕上げます。
background-size: 2px 2px;
背景をチェック柄にしたafter擬似要素のセレクタ内に記述しているbackground-sizeの数値をお好みで調整して仕上げます。
縦方向のサイズと横方向のサイズで調整します。検証ツールでチェック柄の表示の変化を確認しながら調整すると自分好みのいい感じの背景デザインにしやすいです。
上の画像は背景のサイズがbackground-size: 2px 2px;で調整しました。チェック柄なのか分からないくらいの細かいチェック柄のデザインですが、普通に黒透過するよりいい感じに仕上げることができます。
まとめ
CSSで背景をチェック柄で透過するやり方は基本として覚えるようにするといいかと思えます。
基本として覚えたやり方を応用してlinear-gradient()の角度を斜めにしたり、hoverと組み合わせて、マウスが載ったときにチェック柄がひょっこり現れたりなど、あれやこれやと検証フォルダを作成して遊んでみると意外な背景デザインを発見できるかもしれません。
