スタイルシート: 2007年7月アーカイブ

画像のボタンをロールオーバーで変化させる時は２つボタンをつくる必要がありますが、このCSSならボタンは１つで足りてしまいます。

画像の輝度を上げる
■html
<a href="http://blog.webcreativepark.net">
<img src="./tor.gif" alt="to-R"/>
</a>

■css
a:hover img{
opacity:0.8;
filter: alpha(opacity=80);
}

ロールオーバー時にimg要素のopacityプロパティを使い不透明度を下げます。
IEはopacityプロパティに対応していない為、filterを使い不透明度を下げます。

IE・Firefox・Opera・Netscape・Safari対応
CSS Opacity設定
filter: alpha(opacity=25);
-moz-opacity:0.25;
opacity:0.25;

■IE
alpha(opacity=透明度);
100が100％となる。25％の場合は、25

■Firefox・Netscape
-moz-opacity:.透明度;
1.0が100％となる。25％の場合は、.25

■Opera・Safari
opacity:透明度;
1.0が100％となる。25％の場合は、.25

CSS3.0からは、opacity:透明度;の設定ですべてのブラウザで表示可能になるらしい。

メリット
・CSSにより画像を一元管理できるので、メンテナンスが容易になる
・Javascriptをオフにしている環境でも動作する

デメリット
・音声ブラウザで画像の情報が読み上げられない
・CSSオン・画像非表示という環境で何も表示されない
・CSSの指定によって、古いブラウザでは表示が異なる場合がある

ウノウラボさんで「 水平方向のナビゲーションの作り方」の記事を発見しました。
この方法はパン屑リストに応用できそうですね。
基本中の基本なのでしっかり覚えておきたい。

ウノウラボ

毎回毎回レイアウトを作るのも面白いが、そろそろ作業効率の事を考えてテンプレートを作り始めよう。まずはスタンダードな2カラムレイアウトから！
metaタグから〜

< title >title< /title >
< meta http-equiv="Content-Style-Type" content="text/css" >
< meta http-equiv="Content-Script-Type" content="text/javascript" / >
< meta name="description" content="description" / >
< meta name="keywords" content="keywords" / >
< meta name="robots" content="all" / >
< meta name="revisit-after" content="7 days" / >
< meta http-equiv="Pragma" content="no-cache" / >
< meta http-equiv="Cache-Control" content="no-cache" / >
< meta http-equiv="imagetoolbar" content="no" / >
< link rel="stylesheet" type="text/css" href="" media="screen" >
< link rel="stylesheet" type="text/css" href="" media="print" >
< script type="text/javascript" language="javascript" src="" >< /script >