CSSを用いたWebアイテム構築　リンクの装飾(1)－CSSで文字列を彩る：試行錯誤編

Chapter 4：CSSで多彩な表現をさせよう

もっとカッコ良くしてみよう

　さて、fig.5にも示した現在のWebアイテムを見てみましょう。文字だけよりそれらしくはなりましたが、どうも味気ないと言うか殺風景と言うか…。いきなり全てのパラメータを書いてないので仕方ないのですが、｢単に緑色の長方形に白と黄色の文字列を置いただけ｣という印象は否めません。
　では、文字の調整は後回しにして、背景、つまりボタン本体をカッコ良くしてみましょう。立体的だとボタンらしいですし、グラデーションを付けてのっぺらぼうな色合いも変えましょう。このあたり、以前はイメージを使うしかなかったんですが、CSSが多様になったおかげでテキストのみで色々な視覚効果が実現出来るようになったんです。
　ただし、残念ながらこれらは今のところIE(Internet Explorer)では無効です。IE10では認識するようになるそうですから、IEユーザーはそれまで待ちましょう…というのもありですが、可能ならFirefoxやSafariやChromeで、実際に試してみてください。｢webcss001.css｣に以下の青色部分を追記してください。

*{
	margin:0;
	padding:0;
	list-style:none;
	border:none;
}

/* ウィンドウ全体の体裁 */
body{
	font-family: "ＭＳ Ｐ明朝","ＭＳ 明朝",Times New Roman,arial,helvetica,serif;
	font-size: 14px;
	text-align: left;
	text-decoration: none;
	background: #ffffe0;
	color: #000000;
}

/* Webアイテムの背景 */
div.item01 {
	width: 96px;
	height: 48px;
	background: #00a000;

	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0,160,0,1)), to(rgba(0,48,0,1)));
	background: -moz-linear-gradient(top, rgba(0,160,0,1), rgba(0,48,0,1));
	background: -o-linear-gradient(top, rgba(0,160,0,1), rgba(0,48,0,1));
	background: linear-gradient(top, rgba(0,160,0,1), rgba(0,48,0,1));
	-webkit-box-shadow: 0 2px 12px rgba(0,0,0,.5);
	-moz-box-shadow: 0 2px 12px (rgba(0,0,0.5));
	box-shadow: 0 2px 12px #000;

}

/* Webアイテムの文字(日本語) */
span.text-jp {
	color: #ffffff;
}

/* Webアイテムの文字(アルファベット) */
span.text-en {
	color: #ffff00;
}

fig.6：CSSソースを追加したwebsample001.htmlを表示させた様子

　では、これまでどおりの順序でブラウザで表示させてみましょう。fig.6のようになると思います。入力が面倒なソースを追加した甲斐あって、グラデーションがついて立体的になってかなりカッコ良くなりました。パラメータを書きだしておきます。

｢background: -webkit-linear-gradient(～)｣：背景色にグラデーションを付ける。webkit系ブラウザ(Safari,Chrome)専用。
fromからtoで指定した色へ、直線的に(linear)、上から下へ(0% 0%, 0% 100%)グラデーションさせる。
｢background: -moz-linear-gradient(～)｣：背景色にグラデーションを付ける。Mozilla系ブラウザ(Firefox)専用。
fromからtoで指定した色へ、上から(top)下へ直線的にグラデーションさせる。
｢background: -o-linear-gradient(～)｣：背景色にグラデーションを付ける。Opera専用。
fromからtoで指定した色へ、上から(top)下へ直線的にグラデーションさせる。
｢background: linear-gradient(～)｣：背景色にグラデーションを付ける。共通書式(予定)。
fromからtoで指定した色へ、上から(top)下へ直線的にグラデーションさせる。

CSSを用いたWebアイテム構築

リンクの装飾(1)－CSSで文字列を彩る：試行錯誤編－

written by Moonstone

Chapter 4：CSSで多彩な表現をさせよう