画像を使わないでCSS3のグラデーションでスマートフォンサイトの背景パターンをつくろう

スマートフォンサイトを制作する上で重要となる「最適化」。
PCサイトとは違い、外出先や移動中などに見られる機会が多いスマートフォンサイトでは、できるだけ容量を抑えて通信速度を上げ、サクサクと閲覧できることがもとめられます。

スマートフォンサイト最適化のためには様々な方法がありますが、できるだけ使用する画像の容量を減らすこともその一つです。

今回は、スマートフォンサイト制作に便利な、CSS3のグラデーションを使った背景パターンの作り方を紹介します。

※CSSではスマートフォンサイト向けにwebkitの記述のみを使用しておりますので、サンプルページはスマートフォンのブラウザかSafari、Chromeで閲覧ができます。

CSS3のグラデーションを使ったパターンの作り方

CSS3のグラデーション機能を使うと、様々なグラデーションを作ることができますが、
一見グラデーションには見えないような単色の組み合わせも同様に作ることもできます。

例えば、半分が背景色で、半分が白い単色といった組み合わせもCSS3のグラデーション機能でつくることができます。
また、作った背景色にサイズを指定すれば、半分が白く、半分に背景色の正方形を作ることができます。

こういった一見グラデーションには見えない単色の組み合わせをリピートすることで、
CSS3のグラデーションを使えば画像を使わずにパターンを再現できます。

例として、まず背景色をbackground-colorで指定します。
ここではパターンの背景にしたい色を指定します。

次にbackground-imageの部分にCSS3のグラデーションの記述を加え、半分が白く半分に背景色のグラデーションを作ります。
何故画像ではないのにbackground-imageを使うのかというと、背景色の上にパターンとしてさらにグラデーションを重ねるかたちになるからです。

最後にbackground-sizeを使ってグラデーションの正方形の大きさを設定します。
ここで指定した大きさの正方形はパターンとしてリピートされる1マスの基準になります。

/*ここで背景のベースカラーを指定する*/
background-color: #dddddd;

/*CSS3で、半分が白く半分に背景色のグラデーションを作る*/
background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, #ffffff), color-stop(.5, transparent), to(transparent));
				  
/*グラデーションの正方形の大きさを設定する*/
-webkit-background-size: 10px;

これで半分が白色で半分が灰色の10pxの正方形ができます。

拡大すると以下のようなグラデーションのイメージが作られたことになります。

この正方形はタイル上に繰り替えされるため、結果的に以下のような横ストライプの背景グラデーションが完成します。

CSS3のグラデーションを使えば、斜めにもグラデーションを作ることができます。

さまざまなグラデーションの組み合わせによって、まるで背景画像をリピートさせたようなパターンをつくることができます。

また、背景色やパターンの色指定を変えれば簡単にカスタマイズでき、background-sizeのサイズを変えることで、パターンの大きさを変えることもできます。

CSS3を使って様々な背景パターンを作ろう

横ストライプ

先ほどの横ストライプのグラデーションを実際に使用するとこのような横ストライプができます。
赤枠の部分が1マス分の正方形になります。

応用編として、細かい横ストライプの背景パターンのソースを紹介します。

/*ここで背景のベースカラーを指定する*/
background-color: #dddddd;

/*ここでCSS3のグラデーションをつかってストライプのパターン・色を指定する
（※色を変える場合は#fffffffの部分を変更）*/
	background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, #ffffff), color-stop(.5, transparent), to(transparent));

/*ここでパターンの大きさを指定する
（※ストライプの太さ）*/
-webkit-background-size: 4px;

■横ストライプのサンプルを見る
※スマートフォンからかwebkit系のブラウザでご覧ください。

縦ストライプ

先ほどの横ストライプのグラデーションを応用して、今度はグラデーションの向きを縦にしたストライプを作ります。
赤枠の部分が1マス分の正方形になります。

応用編として、細かい縦ストライプの背景パターンのソースを紹介します。

/*ここで背景のベースカラーを指定する*/
background-color: #dddddd;

/*ここでCSS3のグラデーションをつかってストライプのパターン・色を指定する
（※色を変える場合は#fffffffの部分を変更）*/
background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, #ffffff), color-stop(.5, transparent), to(transparent));

/*ここでパターンの大きさを指定する
（※ストライプの太さ）*/
-webkit-background-size: 4px;

■縦ストライプのサンプルを見る
※スマートフォンからかwebkit系のブラウザでご覧ください。

斜めストライプ

斜めにラインが入ったストライプのパターンです。

正方形の中に、左上に25%のサイズの白い三角形と半分から下に白い斜めの台形を作り、それをリピートさせています。

赤枠の部分が1マス分の正方形になります。

応用編として、細かい斜めストライプの背景パターンのソースを紹介します。

この場合、単純な横や縦のストライプと違うため、サイズ調整によってはストライプのパターンがずれてしまうことがあります。

使用する際は、実際にスマートフォンのブラウザ上で検証しながらサイズ指定を決めましょう。

/*ここで背景のベースカラーを指定する*/
background-color: #dddddd;

/*ここでCSS3のグラデーションをつかってストライプのパターン・色を指定する
（※色を変える場合は#fffffffの部分を変更）*/
background-image: -webkit-gradient(linear, 0 0, 100% 100%,color-stop(.25, #ffffff), color-stop(.25, transparent),color-stop(.5, transparent), color-stop(.5, #ffffff),color-stop(.75, #ffffff), color-stop(.75, transparent),to(transparent));

/*ここでパターンの大きさを指定する
（※数字によってはストライプのグラデーションがずれるので注意）*/
-webkit-background-size: 7px 7px;

■斜めストライプのサンプルを見る
※スマートフォンからかwebkit系のブラウザでご覧ください。

ひし形のタイル上パターン

正方形のひし形をタイル上に並べたチェスのようなパターンです。

正方形の中に、白色の正方形のひし形をつくり、それをタイル上にリピートさせています。

応用編として、細かいひし形の背景パターンのソースを紹介します。

ひし形のサイズを小さくすればドットのようなパターンにも使えます。

/*ここで背景のベースカラーを指定する*/
background-color: #dddddd;

/*ここでCSS3のグラデーションをつかってひし形のパターン・色を指定する
（※色を変える場合は#fffffffの部分を変更）*/
background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #ffffff), color-stop(.25, transparent), to(transparent)),
-webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, #ffffff), color-stop(.25, transparent), to(transparent)),
-webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, #ffffff)),
-webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, #ffffff));

/*ここでパターンの大きさを指定する
（※ひし形の縦と横の大きさです）*/
-webkit-background-size: 6px 6px;

■ひし形パターンのサンプルを見る
※スマートフォンからかwebkit系のブラウザでご覧ください。

チェック状のパターン

十字にクロスした線が並ぶチェック柄のパターンです。

先ほどの縦と横のストライプを合わせて使うことで、下半分と右半分が白色になった正方形をができ、それを繰り返すことで白いラインのチェックが入ったパターンになります。

※こちらのサンプルの画像ではわかりやすくするために、rgbaの色指定を使って横を70%の白色、縦を50%の白色のグラデーションにしました。

応用編として、細かいチェックの背景パターンのソースを紹介します。

/*ここで背景のベースカラーを指定する*/
background-color: #dddddd;

/*ここでCSS3のグラデーションをつかってチェックのパターン・色を指定する
（※色を変える場合は#fffffffの部分を変更）*/
background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, transparent), color-stop(.5, #ffffff), to(#ffffff)),
-webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, transparent), color-stop(.5, #ffffff), to(#ffffff));

/*ここでパターンの大きさを指定する
（※チェックの縦・横の太さ）*/
-webkit-background-size: 5px 5px;

■ひし形パターンのサンプルを見る
※スマートフォンからかwebkit系のブラウザでご覧ください。

CSS3のパターンをつかった応用編

CSS3のパターンを使えば、背景だけでなく、ボタンやタイトル周りなどのちょっとした装飾にも利用できます。

すでにグラデーションを使用しているボタンの上にも、spanタグを使えば、さらに上からCSS3のパターンをつけることができます。

また、CSS3のグラデーションの色指定を#ffffffのような16進数ではなく、rgbaをつかって(255,255,255,0.5)のようにalphaを追加することで、半透明のパターンをうっすらとアクセントに入れることもできます。

■応用編のサンプルを見る
※スマートフォンからかwebkit系のブラウザでご覧ください。

このようにCSS3を使えば単純なグラデーションだけでなく、図形のようなパターンを画像を使わずにコードのみで表現することができます。

容量を抑えつつ、工夫次第でスマートフォンサイトのデザインの幅を広げることができますので、ぜひ試してみてください。

参考サイト

• Checkerboard, striped & other background patterns with CSS3 gradients