岐阜ホームページ制作 アイ・ラボ

いきなりですが、Twitterはやってますか?

このTwitter、ブラウザによって見え方が違いますよね?

このプレビューの違い、Google ChromeとIE8のスクリーンショットでご紹介します。

 

まずはChromeです。

次にIE8

いかがでしょう、わかりますか?

まずは角丸。Chromeだとボックスの角が丸くなっていますが、IE8では四角のままです。(IE9では角丸になっていると思います。)

次にツィートエリアと右側ボックスの間の影。(これもIE9では影が付いていると思います。)

最後に文字の影。「新しいツィートが◯件あります。」というお知らせのテキスト。Chromeでは影がついていてエンボスされたように見えますが、IE8では影がありません。(IE9でも影はないと思います。)

このプレビューの違いはChromeなどのWebkit系ブラウザがCSS3を完全サポートしているため。

CSS3では下のボタンのようなPhotoShopかAIで作ったような表現も可能なのです。

具体的にCSSで紹介します。

まずは簡単なところから。角丸の表現です。

このボタンを作ってみます。

ボックスのCSSです。

width:		200px;
height:		40px;
border:		1px	solid	#555;
border-radius: 5px/5px;
background:	#4bf;

とりあえず見やすいように罫線を入れて見ました。[border]の指定の部分です。

角丸は[border-radius]で指定します。この指定では4つの角を一括で支持しています。

4つの角をそれぞれ指定する場合はそれぞれの値をスペース又はタブで区切って記述します。

値が1つの場合………すべての角
値が2つの場合………左上と右下の角  右上と左下の角
値が3つの場合………左上  右上と左下  右下
値が4つの場合………左上  右上  右下  左下

サンプルでは5pxが/(スラッシュ)によって分けられています。これは楕円の角丸を表現するときに使います。左側が横方向の半径、右側が縦方向の半径です。今回のサンプルの場合、スラッシュを使う必要はないのですがわかりやすくするため敢えて使いました。

 

次に文字に影を入れてみましょう。

対応しているのはIE以外のほとんどのブラウザ(Chrome、Safari、FireFox、Opera。IEは10以降で対応するかも)です。

これはテキストのCSSで指定します。

まずはボックスの指定。今回は周りの罫線を取ります。

width:		200px;
height:		40px;
border-radius:	5px;
background:	#4bf;

今回は[border-radius]の指定でスラッシュを外しました。

次にテキストの指定です。

font-size:	11pt;
color:		#fff;
text-shadow: -1px -1px 0px #333;

文字の影は[text-shadow]で指定しています。

数値+影の色で指定しますが、数値の意味は下記のとおりです。

数値の意味………右方向への移動  下方向への移動  ぼかす範囲

今回の指示では左に1px、上に1px移動させていますのでマイナスをつけて移動方向を指示しています。

 

今度はボックスに影をつけてみます。IE8では影は表示されませんので注意。

ボックスのCSSを見てみましょう。

width:		200px;
height:		40px;
border:		2px	solid	#8df;
border-radius:	5px;
background:	#4bf;
box-shadow: #ccc 2px 2px 2px 2px;
-moz-box-shadow: #ccc 2px 2px 2px 2px;
-webkit-box-shadow: #ccc 2px 2px 2px 2px;

[border]の指定がありますがサンプル4の伏線ですw

ボックスの影は[box-shadow]で指定しますが、内容の説明の前に。

同じ[box-shadow]でも頭に[-moz-][-webkit-]が付いたものが2行追加されています。

これはそれぞれ、FireFox、Safari・ChromeのWebkit系ブラウザでのみ対応する指定方法です。

CSS3ではブラウザ独自の指定方法が用意されていて、それぞれ頭に[-moz-][-webkit-]をつけて指定します。(IEでも専用のCSSがあり[-ms-]をつけて指定します。但し、この指定方法はW3Cの推奨外で、Varidate CSSでチェックするとエラーを返しますので要注意です。)

さてパラメータの内容。

影の色  右方向への移動  下方向への移動  ぼかしの範囲  ぼかしの拡大  inset

サンプルのCSSでは元ボックスの影を『右下に2pxづつ移動させた位置に周りを2pxぼかした元の大きさより上下左右2pxづつ大きな#ccc色の影』をつけたということになります。

最後の[inset]ですがボックスの内側に影を付ける場合に指定します。

 

最後はいよいよクライマックスw

ボックスにグラデーションを付けてアクアっぽいボタンを作ってみます。

CSSを書いてみます。今回は線状のグラデーションの指示をします。(円状は別の機会に。)

尚、このままではアクアっぽいボタンにはなりません。もう一手間は宿題ということでw

width:		400px;
height:		40px;
border:		2px	solid	#8df;
border-radius:	5px;
background: #4df;
background: -moz-linear-gradient(top, #6df, #cef 50%, #4bf);
background: -webkit-gradient(linear, left top, left bottom, from(#6df), 
 color-stop(0.5, #cef), to(#4bf));
box-shadow:		#999 2px 2px 2px 2px;
-moz-box-shadow:	#999 2px 2px 2px 2px;
-webkit-box-shadow:	#999 2px 2px 2px 2px;

[background]が3つ有ることに注意して下さい。

グラデーションに対応しているブラウザはFireFoxとWebkit系、Chrome・Safariです。

このため1行目でIEなどに対応するベタ塗りの色を指定しておいて、2行目から本来のグラデーション指体を記述していきます。

まずはFireFox向け。

FireFoxの場合は[-moz-linear-gradient]で線状のグラデーションであること指定し()内にグラデーションの開始位置や色などを指定します。

-moz-linear-gradient(開始位置 角度, 開始色 位置, 終了色 位置 )

角度と位置は省略できますが、途中色を支持する場合はその色がどの位置に来るのか指示して上げる必要があります。

サンプルではtop(上)から#6dfという色でグラデーションが始まって、途中50%の位置、真ん中で#cefという色になり最後#4bfという色で終わると言った指示になっています。

さて、これをアクアっぽくするには?

次にWebkit系の場合。

Webkitでは[-webkit-gradient]でグラデーションであることを宣言し、()内でグラデーションの種類(線状か円状か)・開始位置・終了位置・開始色・終了色と言った順で指示していきます。

-webkit-gradient(linear(線状), 開始位置, 終了位置, from(開始色), to(終了色))

from ~ to ~ なんてまるで英語の構文のようですがw

サンプルでは『左上から左下へ』という指示になっていますがこの『左』を省略することは出来ませんので注意。

逆に言えば『右上から右下へ』と言った指示をしても同様の結果が得られます。『左上から右下へ』これは斜めのグラデーションになるので注意。

さて、Webkit系では途中の色をfromとtoの間に挿入してやることで複雑なグラデーションに対応します。

color-stop(途中色の位置, 色の指定),

この指示をfromとtoの間に入れるのです。サンプルでは#6deで始まり#4bfで終わるグラデーションの間に、0.5(中央)の位置に#cefの色がくるように支持されています。複雑なグラデーションの場合は[color-stop()]をいくつも設定すればより複雑なグラデーションが表示できるというわけです。

 

それでは最後に実際にどう表示されるか見てみましょう。当然ながらChrome・SafariのWebkit系、またはFireFoxでアクセスして下さい。

サンプル

追記:2011年10月12日

Operaでもグラデーションに対応していることがわかりました。

当社サイトもCSSを書き換えましたが、Operaでの対応方法を追記しておきます。

基本、FireFoxと同じです。

-0-linear-gradient(開始位置 角度, 開始色 位置, 終了色 位置 )