第10回 CSS3はここがすごい【プロパティ編2】テーブルレイアウトを卒業しよう

CSS3はここがすごい【プロパティ編2】

全2回で予定していましたが、もう少し続きます。

今回はCSS3から定義されたセレクタをご紹介する予定でしたが、もうちょっとプロパティについて取り扱います。

前回はこちら。

opacity

opacityプロパティは、不透明度を定めるプロパティです。値は、0で完全な透明、1で完全な不透明となります。対象は基本的になんでもOKです。(もちろん目に見える要素が対象です)

使い方はこんな感じ。

<div id="container">
    <div id="box1">
        box1
    </div>
    <div id="box2">
        box2
    </div>
    <div id="box3">
        box3
    </div>
    <div id="box4">
        box4
    </div>
</div>
#container {
    background: url(bg.gif);
    width: 400px;
    height: 200px;
}

#box1,#box2,#box3,#box4 {
    background: #333;
    color:#FFF;
    padding: 12px;
    float: left;
    width: 76px;
    height: 76px;
}
#box1 {
    opacity: 1;
}

#box2 {
    opacity: .7;
}

#box3 {
    opacity: .2;
}

#box4 {
    opacity: 0;
}

Firefox 3でCSS3のopacityプロパティ

Google Chrome 2でCSS3のopacityプロパティ

Safari 4でCSS3のopacityプロパティ

IE8でCSS3のopacityプロパティ

4つのボックスを並べて見え方を比較しています。左から、100%不透明、70%、20%、0%です。中身のテキストも透明になっていることがわかりま す。画像さえも透明にすることができるので、これは使えれば透過pngなんていらなくなる!?のかも。Safariは4のパブリックβを使用しています が、3も対応しています。

text-shadow

text-shadowプロパティは、文字(テキスト)に影をつけることができるプロパティです。CSS2.1では一度廃止となりましたが、3で復活予定 です。いわゆるドロップシャドウの効果が画像なしで実現できる、これまたとても便利そうなプロパティです。たとえばこんな風な使い方がアリガチですね。

<ul>
    <li><a href="#">講座一覧</a></li>
    <li><a href="#">おすすめ</a></li>
    <li><a href="#">アクセス</a></li>
    <li><a href="#">問合わせ</a></li>
</ul>
ul li {
	display: inline;
	border-left: 3px double #333;
}

ul li:last-child {
	border-right: 3px double #333;
}

ul li a {
	padding: 10px;
	color:#CCC;
	text-decoration: none;
}

ul li a:hover {
  text-shadow: #000 1px 1px 1px;
}

Google Chrome 2でCSS3のtext-shadowプロパティ

Safari 4でCSS3のtext-shadowプロパティ

a:hoverのみテキストに影をつけています。

さらにはこんな使い方も出来ます。

<p>Lorem ipsum dolor sit amet, consectetur adipisicing...</p>

p {
    width: 500px;
    padding: 10px;
    font-family: Georgia, "Times New Roman", Times, serif;
    background: #CCC;
    color: #FFF;
    text-shadow: #666 0px -1px, #666 1px 0px, #666 0px 1px, #666 -1px 0px;
}
p:first-letter {
    font-size: 3em;
    line-height: 1;
    float: left;
    margin: 0 .2em 0 0;
    padding: .1em 0;
}

Google Chrome 2でCSS3のtext-shadowプロパティ

Safari 4でCSS3のtext-shadowプロパティ

内側に影をつけて縁取りされたようにしています。

使い方次第ではただのテキストがぐっと読みやすくできそうですね。工夫しがいのありそうなプロパティです。

次回こそCSS3の新セレクタについてご紹介します。

では次回もお楽しみに。(こう鈴木 航 (すずきこう)

次のページは…
CSS3はここがすごい【セレクタ編1】
関連リンク
鈴木 航 (すずき こう)
鈴木 航 (すずき こう)

XHTML、CSSなどのWeb関連技術を得意とする。かぼちゃの煮物が嫌い。

CSS 3分コーディング

RSSフィードで
最新情報を購読