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

線形グラデーション円形グラデーション の記事で「ベンダープレフィックスはもう不要」としていますが、 このページは、ベンダープレフィックス( -moz- と -webkit- )を残しています。

と言うのは、このページの
縞模様(たて縞、よこ縞、ななめ縞)
タータンチェック
は、Firefox(moz系)と Chrome(webkit系)で、ベンダープレフィックス無しで非表示に。linear-gradient の ぼけ足の無いグラデーションのみベンダープレフィックス無しでエラーになります。(2016年2月も同じ症状です)

部分的にベンダープレフィックスを残すのも話がややこしいため、このページは ベンダープレフィックスを全部残すことに致します。

「ベンダープレフィックスが残ったままだと、いずれエラーになる」との情報もあったため、ホントにエラーになるか、しばらく様子を見てみたいと思います。笑。

というわけで、★ソースをコピペで使う場合は、ご自分で不要と思われるベンダープレフィックスを削除してください。よろしくお願い致します。(2015年2月22日)

投稿時(2011年8月)から、線形・円形(放射)グラデーションの構文が変更されているため、
このページは全面変更しました。(2013年11月14日追記)

今回はこんなものを作ります↓

CSS3のグラデーションの応用で「水玉模様・縞模様」を作り、
それをCSS3の新プロパティ「background-size」小さくしてタイリングさせます。

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

★メモ★
グラデーションを指定するCSSプロパティは、厳密には「background-image」です。
「background」は「ショートハンドプロパティ」と言われるもので、複数のプロパティの値をまとめて記述することができます。
この記事は、ショートハンドプロパティ background で円形や線形のグラデーションを作り、それを小さくするために「background-size」プロパティを使っています。
「background-size」プロパティも、もちろんショートハンドプロパティ background でまとめることができますが、ちょっとややこしいので このように分けて書きました。

「background-image」については、
【15-1】background関連のプロパティ(1/4)をご覧ください。
「background-size」については、
【15-3】background関連のプロパティ(3/4 background-size)をご覧ください。
「backgroundのショートハンド」については、
【15-5】backgroundのショートハンド まとめをご覧ください。

水玉模様の背景を作ろう

●まずは円形グラデーションの応用で、ただの正円を描いてみよう

グラデーションの色の切り替えを工夫すると、このように正円を描けます。
上のサンプルのCSSの指定は下記。ベンダープレフィックスは不要かと思われます。適宜削除して使用してください)

#samp1 {
	background: -moz-radial-gradient(circle farthest-side, #F69, #F69 50%, #FF9 50%, #FF9);  
	background: -webkit-radial-gradient(circle farthest-side, #F69, #F69 50%, #FF9 50%, #FF9);
	background: radial-gradient(circle farthest-side, #F69, #F69 50%, #FF9 50%, #FF9); 
}

中心点から50%のところまでピンク(#F69)、50%のところから最後までを黄色(#FF9)と指定しているので、グラデーションのぼけ足が無いので、ただの円に見えるという理屈です。

●これをリピートして水玉模様にしよう
ここで今日のテーマのCSSプロパティ「background-size」を使います。

上のサンプルのCSSの指定は下記。ベンダープレフィックスは不要かと思われます。適宜削除して使用してください)

#samp2 {
	background: -moz-radial-gradient(circle farthest-side, #F69, #F69 50%, #FF9 50%, #FF9);  
	background: -webkit-radial-gradient(circle farthest-side, #F69, #F69 50%, #FF9 50%, #FF9);
	background: radial-gradient(circle farthest-side, #F69, #F69 50%, #FF9 50%, #FF9); 
	-moz-background-size: 15px 15px;
	-webkit-background-size: 15px 15px;
	background-size: 15px 15px;
}

「background-size」を15px 15pxにしています。天地左右を15ピクセルにしてタイリングするという指定です。
サンプルのボックスサイズは1辺150pxにしてますので、1辺に10個タイリングされます。

「background-size」について

ここで「background-size」についてまとめておきます。
「background-size」は「background-image」のサイズを指定するCSS3の新しいプロパティです。
今回のようなグラデーションのほか、背景画像も指定できます。

←この画像をCSSで背景に指定し
「background-size」でサイズ変更してみますよ。

【数値で指定】
 ここでは20px 20px で指定
「幅、高さ」の順で、ピクセルなどの単位、%のほか、autoでも指定できます。 値を1つしか指定しなかったら、高さはautoになります。

【contain】
「contain」は、縦横比を維持して画像全体を表示しタイリングします。

【cover】
「cover」は、縦横比を維持して画像を1つだけでボックス全体を覆うサイズにします。
(←欠けすぎてなんだかわからんですけど。
 上部がちょこっと見えてるところです)

上の3つのサンプルのCSSの指定は下記。

#value18-5 { /*数値で指定*/
	background: url(image/110716.gif) ;
	background-size: 20px 20px;
}
#contain18-5 { /*contain*/
	background: url(image/110716.gif) ;
	background-size: contain;
}
#cover18-5 { /*cover*/
	background: url(image/110716.gif) ;
	background-size: cover;
}

「background-size」についての詳細は、
【15-3】background関連のプロパティ(3/4 background-size)をご覧ください。

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

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

上のサンプルのCSSの指定は下記。

ul.samples li.samp3 { /*たて縞*/
	background: -moz-linear-gradient(left, #6CF, #6CF 50%, #FF9 50%, #FF9);
	background: -webkit-linear-gradient(left, #6CF, #6CF 50%, #FF9 50%, #FF9);
	background: linear-gradient(left, #6CF, #6CF 50%, #FF9 50%, #FF9);
	-moz-background-size: 15px 15px;
	-webkit-background-size: 15px 15px;
	background-size: 15px 15px;
}
ul.samples li.samp4 { /*よこ縞*/
	background: -moz-linear-gradient(top, #6CF, #6CF 50%, #FF9 50%, #FF9);
	background: -webkit-linear-gradient(top, #6CF, #6CF 50%, #FF9 50%, #FF9);
	background: linear-gradient(top, #6CF, #6CF 50%, #FF9 50%, #FF9);
	-moz-background-size: 15px 15px;
	-webkit-background-size: 15px 15px;
	background-size: 15px 15px;
}
ul.samples li.samp5 { /*ななめ縞*/
	background: -moz-linear-gradient(left top, #6CF, #6CF 25%, #FF9 25%, #FF9 50%,
		#6CF 50%, #6CF 75%, #FF9 75%,#FF9);
	background: -webkit-linear-gradient(left top, #6CF, #6CF 25%, #FF9 25%, #FF9 50%,
		#6CF 50%, #6CF 75%, #FF9 75%,#FF9);
	background: linear-gradient(left top, #6CF, #6CF 25%, #FF9 25%, #FF9 50%,
		#6CF 50%, #6CF 75%, #FF9 75%,#FF9);
	-moz-background-size: 20px 20px;
	-webkit-background-size: 20px 20px;
	background-size: 20px 20px;
}

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

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

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

たて縞とよこ縞の組み合わせで、タータンチェックも出来ちゃいます。
前に線形グラデーションのときにやった「透明度」の指定も使ってますよ。

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

上のサンプルのCSSの指定は下記。
長くて複雑に見えるけど、読んでもらえれば、今までの応用だとわかるはず。

#samp6 {
	background-color: #F93;
    
	background-image:
	-moz-linear-gradient(top, 
	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%), 
	-moz-linear-gradient(left, 
	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-image:
	-webkit-linear-gradient(top, 
	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%), 
	-webkit-linear-gradient(left, 
	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-image:
	linear-gradient(to bottom, 
	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%), 
	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%);

	-moz-background-size: 50px 50px;
	-webkit-background-size: 50px 50px;
	background-size: 50px 50px;
}

要点です。

  1. 最初に「background-color: #F93;」でボックスの背景をオレンジ色(#F93)にしています。
  2. rgba による透明度の指定を使って、黒(RGB 0,0,0)の縞を透明度0.5(50%透明度)で描いています。
  3. transparent」という指定がはじめて出てきますが、これは透明なスペースを作ります。
     例えば「transparent 30%, transparent 33%,」で、開始点から30%の地点から33%の地点まで透明にします。
    このように、黒の半透明の帯+透明スペースを繰り返して縞模様を作ります。
  4. 「background-image:」に、縦縞と横縞を「,」で区切って2つ連続して指定しています。
    これで、透明度を指定した黒の縞模様の交差した部分が濃くなって見えます。
  5. 最後にこれらを「background-size」でタイリングして、タータンチェックのように見せてるってわけです。

タータンチェック柄のためだけにコレ書くんだったら、GIFファイルリピートした方が早いね。
でもまあ、上のソースをコピペして、好きに色や幅などを変えて活用してみてくださいね。

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

で、今日の水玉のパターンでボタンとか作ってみましたよ〜。
線形グラデの rgba による透明度の指定で、ボタンのテクスチャも表現しています。

CSSソースはこちら。ベンダープレフィックスは不要かと思われます。適宜削除して使用してください)

ul.menusample li.samp7 {
    float: left;
    margin: 0px 10px 1em 0;
    width: 180px;
    height: 45px;
	list-style: none;
	-webkit-border-radius: 22px;
	-moz-border-radius: 22px;
	border-radius: 22px;
	-webkit-box-shadow: 0px 0px 20px #000 inset;
	-moz-box-shadow: 0px 0px 20px #000 inset;
	box-shadow: 0px 0px 20px #000 inset;
	background-color:#0A0;
	background-image: -moz-radial-gradient(circle farthest-side, #080, #080 50%, 
			transparent 50%, transparent);
	background-image: -webkit-radial-gradient(circle farthest-side, #080, #080 50%, 
			transparent 50%, transparent);
	background-image: radial-gradient(circle farthest-side, #080, #080 50%, 
			transparent 50%, transparent);
	-moz-background-size: 15px 15px;
	-webkit-background-size: 15px 15px;
	background-size: 15px 15px;
}
ul.menusample li.samp7 a {
	text-align:center;
	line-height: 45px;
	font-size:20px;
	font-weight:bold;
	color:#FFF;
	display:block;
	background: -moz-linear-gradient(top, 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));
    background: -webkit-linear-gradient(top, 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));
	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));
}
ul.menusample li.samp7 a:hover {
	color:#FC6;
	background: -moz-linear-gradient(top, rgba(255,255,255,0.3), rgba(255,255,255,0));
	background: -webkit-linear-gradient(top, rgba(255,255,255,0.3), rgba(255,255,255,0));
	background: linear-gradient(to bottom, rgba(255,255,255,0.3), rgba(255,255,255,0));
	text-decoration:none;
}

次回予告

この記事の投稿日は「2011.08.15」になっていますが、2013年11月に構文を全て書き換えました。
さらに2015年2月に、ベンダープレフィックスについての考察を書き加えました。

さて次回からはHTML要素に戻って、「テキストのためのHTML要素」を見て行きます。
これまでやったことがあるテキストのための要素は、<span><br>などです。
他にもたくさんテキスト用の要素があります。便利なのでぜひ利用していきましょう。

次回はまず「ルビ」を表す <ruby>要素をやってみましょう。
読めない漢字に小さく仮名をふる、あのルビですよ。
IE5以降でXHTML1.1から使えるようになった、比較的新しいHTML要素です。

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

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

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

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

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

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

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
02 | 2017/03 | 03
- - - 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.