CSS3大接近

第2回 OpacityとRGBa実践テクニック

この記事を読むのに必要な時間:およそ 5 分

実践テクニック: 透明度の別な考え方

透明度を指定するということは,背景色が透けるということです。ただ別な考え方をすると色を薄くすると考えられます。例えば先述の「シンプルな透明度の設定」のサンプルにおいて,透明度を40%にすれば背景の白が透けて画像が白っぽく見えます。これを利用するとナビゲーションのロールオーバーを記述する際に,ロールオーバー時の背景色を透明度で簡単に指定できます。このテクニックでは背景した際の色を入力する必要がなくメンテナンス性を向上させることが可能です。

RGBaプロパティバリューを利用したナビゲーションはコードをシンプルてるメリットがあります。

リスト11 ロールオーバーするナビゲーション(HTML⁠⁠:sample-rgba-navigation.html

<ul>
  <li><a href="" title="">ホーム</a></li>
  <li><a href="" title="">ボストンの観光地</a></li>
  <li><a href="" title="">ボストンのホテル</a></li>
  <li><a href="" title="">ボストンの食事</a></li>
  <li><a href="" title="">ボストンの地図</a></li>
</ul>

リスト12 ロールオーバーするナビゲーション(CSS⁠⁠:sample-rgba-navigation.html

html {
  font: normal normal normal 12px/1.5 Verdana, Osaka, sans-serif;
}

a {
  text-decoration: none;
}

ul li {
  display: inline;
  float: left;
}

ul li a {
  display: block;
  padding: 10px 15px;
  background-color: rgba(65, 89, 104, .9);
  color: #f7f7f7;
}

ul li a:hover {
  background-color: rgba(65, 89, 104, .5);
  color: #fff;
}

RGBaプロパティバリューをサポートしているブラウザで次のように表示されます。

図7 ロールオーバーするナビゲーションの表示結果(通常時)

図7 ロールオーバーするナビゲーションの表示結果(通常)

図8 ロールオーバーするナビゲーションの表示結果(ロールオーバー時)`

図8 ロールオーバーするナビゲーションの表示結果(ロールオーバー時)

立体感のあるナビゲーション

さらに一手間をかけ,テキストに前回の特集で紹介したtext-shadowプロパティをかけると,立体感のあるデザインを実現できますsample-rgba-navigation02.html⁠。

図9 テキストにtext-shadowプロパティをかけて立体感を演出

図9 テキストにtext-shadowプロパティをかけて立体感を演出

実践テクニック:RGBaを0から1へ戻す

RGBaプロパティバリューとOpacityプロパティは透明度を指定し透明にするというプロパティです。しかし逆に透明度を戻すという不透明度を指定するという,逆の考え方を実践すると広がりのあるデザインを実現できます。

例えば,:hoverと組み合わせ,:hover時にマスクがかかったような状態のにデザインを作り出すことができます。また,positionプロパティを効果的に利用して,3次元で要素を配置することもポイントです。

リスト13 RGBaを0から1へ戻すサンプル(HTML⁠⁠:sample-rgba-image-text02.html

<ul>
  <li>
  <img src="images/boston-sunset.jpg" alt="写真 ボストンの夕焼け" title="ボストンの美しい夕焼けの写真" />
  <em>Merry Christmas !! <br />Happy holidays for Gihyo readers !!</em>
  </li>
</ul>

リスト14 RGBaを0から1へ戻すサンプル(CSS⁠⁠:sample-rgba-image-text02.html

html {
  font: normal normal normal 12px/1.5 Verdana, Osaka, sans-serif;
}

ul {
  position: relative;
  border: 1px solid #f7f7f7;
}

ul li {
  list-style-type: none;
}

ul li em {
  position: absolute;
  display: block;
  width: 460px;
  height: 335px;
  top: 0px;
  left: 40px;
  padding: 20px;
  font-family: Baskerville, 'Goudy Old Style', Palatino, 'Book Antiqua', serif; /*フォントを少しクリスマスの雰囲気に*/
  font-size: 40px;
  color: rgba(247, 247, 247, 0); /*透明度を0に指定して,透明に指定*/
  background-color: rgba(0, 0, 0, 0); /*背景色も予め0に指定して,透明に指定*/
}

ul li em:hover {
  color: rgba(247, 247, 247, 1); /*透明度を1に指定して,完全に不透明に指定*/
  background-color: rgba(0, 0, 0, 0.6); /*背景色を60%*/
}

RGBaプロパティバリューをサポートしたブラウザでは,次のように表示されます。

図10 RGBaの透明度を0から1へ戻すサンプルの表示結果(通常時)

図10 RGBaを0から1へ戻すサンプルの表示結果(通常時)

図11 RGBaを0から1へ戻すサンプルの表示結果(:hover時)

図11 RGBaを0から1へ戻すサンプルの表示結果(:hover時)

以上のように,OpacityプロパティとRGBaプロパティバリューを利用することで,ウェブサイトを立体的にみせたり,ナビゲーションのロールオーバーにみせたりと,意外と様々なことができることが分かります。まずは自分でOpacityやRGBaなどCSS3を使ってみて,もっとCSSを楽しんでみましょう。

次回は,いよいよtransformを詳しく説明したいと思います。

著者プロフィール

菊池崇(きくちたかし)

ActLink株式会社にてプロデューサー,allWebクリエイター塾ではXHTML+CSS,microformatsの講師。また,11月に行われたWeb Directions Eastのプロデューサーでもありmicroformats japanの代表。

バックナンバー

CSS3大接近