[18-5] 水玉、ボーダー、チェック柄を作ろう(background-size)

最終更新日:2017年10月16日  (初回投稿日:2011年08月15日)

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

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

こんなものを作ります↓

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

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

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

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

水玉模様の背景を作ろう

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

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

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

<div id="sample1"><!-- sample --></div>
#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-sizebackground-repeatについては、
【15-1】background関連のプロパティ(1/4)
【15-3】background関連のプロパティ(3/4 background-size)
をご覧ください。

「background-size」について

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

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

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

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

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

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 は、縦横比を維持してボックス全体を覆うサイズにします。
(下のサンプルは拡大率が大きすぎて何だかわからなくなってますけどね)

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)をご覧ください。

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

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

<ul id="stripes">
 <li id="stripe1"></li>
 <li id="stripe2"></li>
 <li id="stripe3"></li>
</ul>
#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 の指定で、立体感も出しています。

<ul id="menuSample">
 <li><a href="#">HOME</a></li>
 <li><a href="#">PROFILE</a></li>
 <li><a href="#">CONTACT</a></li>
</ul>
#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));
	}

次回予告

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

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
09 | 2017/10 | 11
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.