[CSS]スクリプトや画像を使用しないで、さくさく動作するニュースボックスを実装するチュートリアル

省スペースにぴったり！　複数のパネルをマウスホバーで表示を切り替えるニュースボックスを実装するスタイルシートを紹介します。

CSS3 Easy Newsbox

[ad#ad-2]

対応ブラウザはIE6/7/8/9, Firefox, Chrome, Safari, Operaとのことで、CSS3対応ブラウザでもっとも期待通りに表示されます。
※当方のIE6では期待通り動作しませんでした。

下記はCSS3対応ブラウザ：Firefox4でのキャプチャです。
角丸、ドロップシャドウ、グラデーションが適用されています。

デモページ：Firefox4で表示

右側の各ラベルをマウスホバーすると、それに対応した写真画像が表示されます。

ニュースボックスはCSS3非対応のブラウザでも動作します。

デモページ：IE7で表示

IE7では、角丸やドロップシャドウやグラデーションは適用されませんが、各パネルの切り替え表示には対応しています。

[ad#ad-2]

ニュースボックスの実装

HTML

各パネルはa要素で実装されており、div要素で内包します。

<div id="newsbox">
<a href="#link1" title="Rafael Nadal" class="b1"><span><strong>Rafael Nadal</strong>Der Sandplatzkönig und die Nr.1 der Welt!</span><img src="box1.jpg" width="256" height="192" alt=""/></a>
<a href="#link2" title="Novak Djokovic" class="b2"><span><strong>Novak Djokovic</strong>Der Serbe mit einer der längsten Siegesserien der Open Era.</span><img src="box2.jpg" width="256" height="192" alt=""/></a>
<a href="#link3" title="Roger Federer" class="b3"><span><strong>Roger Federer</strong>16. Grand Slam Siege und der wohl beste aller Zeiten.</span><img src="box3.jpg" width="256" height="192" alt=""/></a>
</div>

CSS

パネルは写真画像以外は一切画像を使用せず、スタイルシートで実装します。

#newsbox {width:500px; height:192px; overflow:hidden; position:relative;  background:url(box0.jpg) no-repeat;  box-shadow:1px 2px 2px 2px #666;  -webkit-box-shadow:1px 2px 2px 2px #666; -moz-border-radius:15px; margin:30px auto;}
#newsbox a {outline:none; text-decoration:none;}
#newsbox a span {position:absolute; z-index:1; width:214px; height:55px;  padding:5px 15px; color:#333; left:256px; background:#f5f5f5; background:-moz-linear-gradient(top,#f5f5f5,#c0c0c0); background:-webkit-linear-gradient(top,#f5f5f5,#c0c0c0);}
#newsbox a strong {text-transform:uppercase; display:block;}
#newsbox a.b1 span {margin-top:0px;} 
#newsbox a.b2 span {margin-top:65px;}
#newsbox a.b3 span {margin-top:130px;}
#newsbox a img {display:none; position:absolute; border:none;}
#newsbox a:hover img, #newsbox a:focus img {display:block;}
#newsbox a:hover span, #newsbox a:focus span {background:#d60000; background:-moz-linear-gradient(top,#d60000,#970000); background:-webkit-linear-gradient(top,#d60000,#970000); left:230px; width:222px; padding:5px 25px 5px 25px; color:#fff; border-top-left-radius:1500px; border-bottom-left-radius:1500px;}