ほんっとにはじめての HTML5 と CSS3

今回は、グラデーションの応用編です。
CSSのグラデーションで「水玉」や「ボーダー柄」を作り、それをCSSの新プロパティ background-size でタイリングさせます。

使用する CSSプロパティ	background background-size

こんなものを作ります↓

1. 水玉模様の背景を作ろう
   1. 円形グラデーションの応用で「正円」を描く
   2. 「正円」をリピートして水玉模様にしよう
2. 「background-size」について
3. 縦、横、斜めの縞模様の背景を作ろう
4. 縞模様を組み合わせてタータンチェック柄を作ろう
5. 応用でボタンとか作ってみた

● 2017年10月：この記事には ベンダープレフィックス（-webkit- などの接頭辞）を使っていましたが、不要と判断し削除しました。また、サンプルや本文を一部書き直しました。

● 2013年11月：初回投稿時（2011年8月）から、linear-gradient, radial-gradient の構文が変更されたため、ページは全面書き直しました。

★メモ★
グラデーションは「background-imageプロパティ」で指定しますが、この記事は、ショートハンドプロパティ「background」で書いている部分もあります。
「ショートハンドプロパティ」とは、複数のプロパティの値をまとめて記述できるプロパティ。
background-image や backgroundのショートハンドについては、
●background-image【15-1】background関連のプロパティ（1/4）
●backgroundのショートハンド【15-5】backgroundのショートハンド まとめ
をご覧ください。

水玉模様の背景を作ろう

水玉模様は、まずは「正円」を作り、それを「小さく」して「タイリング」します。

円形グラデーションの応用で「正円」を描く

グラデーションの色の切り替えで、ぼけ足が無いようにすれば、正円を描けます。

HTMLはこちら。

<div id="sample1"><!-- sample --></div>

CSSはこちら。

#sample1 {
	margin:1em 0;
	width: 160px;
	height:160px;
	background:radial-gradient(circle farthest-side, #f69, #f69 50%, #ff9 52%, #ff9); 
	}

中心点から50%のところまでピンク（#f69）、52%のところから最後までを黄色（#ff9）と指定しているので、グラデーションのぼけ足がほとんど無いので、ただの円に見えるんです。
きっかり同じ位置（上のサンプルなら 50%のところ）で色を切り替えるとジャギーが出ます。ほんの数％ぼけ足を作れば、アンチエイリアスがかかったように見えます。

「正円」をリピートして水玉模様にしよう

background-sizeプロパティを使います。

#sample2 {
	margin:1em 0;
	width: 160px;
	height:160px;
	background:radial-gradient(circle farthest-side, #f69, #f69 45%, #ff9 55%, #ff9);
	background-size: 20px 20px;
	}

background-size: 20px 20px は、背景のイメージ（background-image）を天地左右20ピクセルにするという指定です。
これだけで自動的にタイリングされます。background-repeatプロパティのデフォルト値が「repeat（繰り返し描画）」だからです。

background-size や background-repeatについては、
●【15-1】background関連のプロパティ（1/4）
●【15-3】background関連のプロパティ（3/4　background-size）
をご覧ください。

「background-size」について

background-sizeプロパティは「background-image」のサイズを指定します。

↓この gif画像を背景画像にして「background-size」でサイズ変更してみます。
画像の原寸は 200×200px です

サイズを「数値」で指定するなら、「幅、高さ」の順で、ピクセル、％などの単位を付けて指定します。

#value1 {
	text-align:center;
	margin:1em 0;
	width:100%;
	line-height:60px;
	background: url(image/image.gif);
	background-size: 20px 20px;
	}

background-size:contain は、縦横比を維持して画像全体を表示しタイリングします。

#value2 {
	text-align:center;
	margin:1em 0;
	width:100%;
	line-height:60px;
	background: url(image/image.gif);
	background-size: contain;
	}

background-size:cover は、縦横比を維持してボックス全体を覆うサイズにします。
（下のサンプルは拡大率が大きすぎて何だかわからなくなってますけどね）

#value3 {
	text-align:center;
	margin:1em 0;
	width:100%;
	line-height:120px;
	background: url(image/image.gif);
	background-size: cover;
	}

background-sizeプロパティの詳細は、
【15-3】background関連のプロパティ（3/4　background-size）をご覧ください。

縦、横、斜めの縞模様の背景を作ろう

線形グラデーションの応用で、縞模様を作ってみましょう。

HTMLはこちら。

<ul id="stripes">
 <li id="stripe1"></li>
 <li id="stripe2"></li>
 <li id="stripe3"></li>
</ul>

CSSはこちら。

#stripes {
	margin:1em 0;
	padding:0
	}
#stripes li {
	display:inline-block;
	margin:0 20px 0 0;
    width: 150px;
    height: 150px;
	list-style: none;
	background:#ff9;
	}
#stripes li#stripe1 {  /*縦じま*/
	background: linear-gradient(to right, #6CF, #6CF 50%, #FF9 50%, #FF9);
    background-size: 15px 15px;
	}
#stripes li#stripe2 {  /*横じま*/
	background: linear-gradient(#6cf, #6cf 50%, #ff9 50%, #ff9);
	background-size: 15px 15px;
	}
#stripes li#stripe3 {  /*ななめじま*/
    background: linear-gradient(to right bottom, #6cf, #6cf 24%, #ff9 26%, #ff9 49%,
		#6cf 51%, #6cf 74%, #ff9 76%,#ff9);
	background-size: 20px 20px;
	}

先ほどの「水玉模様」と、原理はまったく同じ。
線形グラデーションの色の切替えで、ぼけ足無しにして「background-size」で小さくしてタイリングしています。

ななめ縞だけ、色の切り替えを1回でなく3回やってます。
それはこんな↓単純な理由です。

ななめ縞だけは、色の切り替えをきっちり「25、50、75％」でなく「24％と26％、49％と51％、74％と76％」にして、少しだけぼけ足をつけています。
これは「水玉模様」のときと同じく「アンチエイリアス」の効果のため。きっちり色を切るとジャギーが出てしまうので。

縞模様を組み合わせてタータンチェック柄を作ろう

たて縞とよこ縞の組み合わせで、タータンチェックも出来ちゃいます。
色の「透明度」も指定できる rgba() という色指定方法も使います

背景にオレンジ色（#f93）を敷いておき、そこに黒（ rgba(0,0,0,1) ）の透明度をいろいろ変えた「しま模様」をタイリングしています。

タータンチェックをつくる理屈はこんなかんじです↓

#tartan {
	margin:1em 0;
	width:150px;
	height:150px;
	background-color:#f93; /*背景色はオレンジ色*/
	background-image:
	linear-gradient(to bottom,  /*横じま*/
	rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.5) 30%, transparent 30%, transparent 33%,   /* transparent = 透明色*/
	rgba(0,0,0,0.5) 33%, rgba(0,0,0,0.5) 40%, transparent 40%, transparent 80%,
	rgba(0,0,0,0.3) 80%, rgba(0,0,0,0.3) 96%, transparent 96%, transparent 100%), /*「,」で複数切り替え*
    linear-gradient(to right,  /*縦じま*/
	rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.5) 30%, transparent 30%, transparent 33%,
	rgba(0,0,0,0.5) 33%, rgba(0,0,0,0.5) 40%, transparent 40%, transparent 80%,
	rgba(0,0,0,0.3) 80%, rgba(0,0,0,0.3) 96%, transparent 96%, transparent 100%);
	background-size: 50px 50px;  /*小さくしてタイリング*/
	}

「transparent」は「透明色」。ところどころ透明色にして縞模様を作っています。

また、background-image は複数指定可能です。「,（カンマ）」で区切って複数指定します（10行目の末）

background-imageプロパティについては、
【15-1】background関連のプロパティ（1/4）をご覧ください。

応用でボタンとか作ってみた

今日の水玉のパターンでボタンとか作ってみました。
線形グラデーションの rgba の指定で、立体感も出しています。

• HOME
• PROFILE
• CONTACT

HTMLはこちら。

<ul id="menuSample">
 <li><a href="#">HOME</a></li>
 <li><a href="#">PROFILE</a></li>
 <li><a href="#">CONTACT</a></li>
</ul>

CSSはこちら。

#menuSample {
	padding:0;
	margin:1em 0;
	}
#menuSample li {
	list-style: none;
	display:inline-block;
	padding:0;
	margin:0 10px 0 0;
    width: 30%;
    height: 44px;
	border-radius: 22px;
	box-shadow: 0px 0px 20px #000 inset;
	background-color:#0a0;
	background-image: radial-gradient(circle farthest-side, #080, #080 50%, 
			transparent 50%, transparent);
	background-size: 15px 15px;
	}
#menuSample li a {
	text-align:center;
	line-height: 44px;
	font-size:20px;
	font-weight:bold;
	color:#fff;
	display:block;
	background: linear-gradient(to bottom, rgba(255,255,255,0.5), rgba(255,255,255,0.4) 50%, 
			rgba(255,255,255,0.1) 54%, rgba(255,255,255,0));
	text-decoration:none;
	}
#menuSample li a:hover {
	color:#fc6;
	background: linear-gradient(to bottom, rgba(255,255,255,0.3), rgba(255,255,255,0));
	}

次回予告

次回は「ベンダープレフィックス」について触れておこうと思います。
新しい仕様が出ると、ブラウザを作っている組織ごとに実装するので、その実装の過程で「ベンダープレフィックス」付きで指定する場合があります。

関連記事

• （ちょっとメモ）HTML5で廃止される要素一覧
• [23] b要素、i要素、small要素も まだ使えます
• [22] HTML5の新要素 mark を使ってみよう
• [21] 重要性を示す strong要素 と強調を示す em要素を使い分けよう
• [20] 上付き文字と下付き文字を使おう（sup, sub）
• [19] テキストにルビをつけてみよう（ruby, rt, rb, rp, rtc）
• （ちょっとメモ）CSS の ベンダープレフィックス について
• [18-5] 水玉、ボーダー、チェック柄を作ろう（background-size）
• [18-4] 円形（放射）グラデーションを作ろう (radial-gradient)
• [18-3] テキストにシャドウをつけよう（text-shadow）
• [18-2] 要素にシャドウをつけよう（box-shadow）
• [18-1] 要素を角丸にしよう（border-radius）
• [17-6] メインコンテンツを表す main要素
• [17-5] ヘッダーの header、フッターの footer、連絡先の address要素
• [17-4] ナビゲーションのセクションを表す nav要素