[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
CSS3を使ってグラデーションを作るとき、IEの場合はIE独自のfilterを用います。
IE5.5以上で有効なので、ほぼもれなく対応できます。
filter: progid:DXImageTransform.Microsoft .gradient(GradientType=0,startColorstr='#ffffffff', endColorstr='#ffdddddd');GradientTypeが【引数】で、startColorstrは【開始の色】、endColorstrは【終了の色】です。
引数「GradientType」は、縦方向のグラデーションなら【0】、横方向のグラデなら【1】をいれます。
色の番号は通常の6ケタに、2ケタ加えた8ケタです。
最初の２桁は色の透明度の指示です。
00（透明）〜FF（不透明）。
【#FFFFFFFF】なら、【FF（不透明）】＋【FFFFFF（白）】という意味になります。
Webkit系（Chrome、Safari）の
background: -webkit-gradient(linear, center top, center bottom, from(#FFFFFF), to(#DDDDDD));や
mozilla系（Firefox）の
background: -moz-linear-gradient(top, #FFFFFF, #DDDDDD);と一緒に使えば、既存のブラウザはほぼ対応できます。
まずCSS Button Generatorへアクセスしましょう。
プレビューは最上部に表示されますよ。まずカラーセットを選んで、グラデーションを調整しましょう。その後横幅や縦幅などのサイズ調整、影をカスタマイズしたりしてお好みのボタンを作りましょう。最下部にCSSのコードが表示されるのであとはコピペして完了ですね。CSSでボタンを作りたいときはぜひ活用してみましょう。
こういうケースで、画像をうまく中央寄せするには、以下のようにします。
div p img{
display:block;
margin:auto;
}
z-indexプロパティは、位置指定されている要素の重なり順序を指定する際に使用します。通常、HTMLのソースコードでは、後の方に記述した要素の方がより手前に表示されます。z-indexプロパティを指定した要素は、数字が小さいほど奥へ、大きいほど手前に表示されます。これをスタックレベル(stack level)と言います。
divなどのブロックレベル要素でボックスを入れ子にした際に、positionプロパティで static以外の値が指定されている場合、それぞれの要素はレイヤー状（アニメのセル画のような状態）に重なっているため、親要素の幅や高さに関係なく好きな所に配置出来ます。背景色や、背景画像を指定している場合に、思わぬ所で要素が隠れてしまったり、見た目に不都合が生じる場合もあります。z-indexプロパティは、それを回避するためのものです。
