CSSでつくる透明なボーダーライン

A Web Design Community curated by Chris Coyier.

Transparent Borders with background-clip - CSS-Tricksにおいて、CSSを使って透明なボーダーラインを描画する方法が紹介されている。透過になりそうだが透過にならない記述の説明、それを回避するためのダブルdivテクニック、さらにCSS3で導入されるbackground-clipを使った方法の3つのCSSが紹介されている。簡単に透過ボーダーを実現する方法として参考になる。紹介されているテクニックは次のとおり。

1. ボーダーに透過を指定する

ボーダーに透過を指定した場合 - divの背景に対する透過になっており、divの下までは透過しない

まず最初に考えつく方法が、ボーダーに対して透過の指定をすること。たとえば背景に白を指定して、ボーダーに「border: 20px solid rgba(0,0,0,0.3);」のように透過を指定する。これを描画すると右の図のようになる。期待しているような透過にはならない。これは、ボーダーを透過にしてもそれはその要素の背景に対する透過になっており、その要素を突き抜けての透過にはならないためだ。次にそのまま試用できるHTMLを掲載しておく。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>透過ボーダーデモ その1</title>
  <style type="text/css">
    #transborderbox {
      background-color: white;
      border: 20px solid rgba(0,0,0,0.3);
      position: absolute; top: 100px; left: 80px; text-align: center;
    }
    #title1 { font-size: 250%; display: block; padding: 20px;}
    #title2 { font-size: 150%; display: block; padding: 10px;}
  </style>
</head>
<body>
  <p>15日(米国時間)、IE9の最新版となるIE9 Betaが公開された。Beauty of the Webからダウンロードできるほか、Internet Explorer 9 Beta の各言語のダウンロードから日本語版など英語版以外のIE9 Betaをダウンロードできる。IE9で実現される機能の改善と新機能の実装、標準規約への準拠とHTML5/CSS3、ECMAScript 5の対応は魅力的だ。IE9 Platform Previewが簡単にインストールおよびアンインストールができたこともあって、IE9 BetaをさっそくインストールしたWindows 7やVistaのユーザもいたことだろう。</p>
  <p>しかしここで注意が必要だ。IE9 PPまでは単体のアプリケーションとして提供されていたIE9だが、IE9 Betaからはアップグレードの一部として提供されることになる。つまり、一度IE9をインストールすると、IE8の代わりに動作するようになり、アプリケーションのアンインストールでは元に戻せなくなる。IE9 Betaを試したあとにIE8に戻そうとしても、アンインストールの一覧にはIE9は見つからない。</p>
  <p>しかしIE8へ戻すことは可能だ。アプリケーションをアンインストールするのと同じ要領で、コントロールパネルから「プログラムのアンインストール」を選択。ここで左上に表示される「インストールされた更新プログラムを表示」をクリックする。クリック後に表示される一覧にはWindows Internet Explorer 9という項目がみつかるはずだ。この項目を選択してアンインストールを実行すればいい。</p>
  <p>IE9のアンインストール後にはシステムの再起動を求められるため、そのまま再起動する。メニューに表示される項目はInternet Explorerのままになっているが、実行するとIE8が起動してくることを確認できる。</p>
  <div id="transborderbox"><span id="title1">マイコミジャーナル</span><span id="title2">エンタープライズチャンネル</span></div>
</body>
</html>

2. ダブルdivテクニック

divを入れ子にして、外側のdivを背景透過、内側のdivの背景を白に設定する

Transparent Borders with background-clipではこれを回避する方法としてdivを入れ子にするダブルdivテクニックを紹介している。divを入れ子にし、外側のdivには透過PNG画像を背景画像として使って透過を実現、内側のdivの背景を白に設定することで、透過ボーダーを実現するというものだ。透過PNGファイルを用意するという手間はかかるものの、IE6をのぞく多くのブラウザに適用できる。IE6に対しては透過PNGを使う方法がいくつかあるので、それらを併用すればいい。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>透過ボーダーデモ その2</title>
  <style type="text/css">
    #transborderbox {
      background-image: url(trans.png);
      background-repeat: repeat;
      padding: 20px 20px 20px 20px;
      position: absolute; top: 100px; left: 80px;
    }
    #transborderbox-inside {
      background-color: white;
      text-align: center;
    }
    #title1 { font-size: 250%; display: block; padding: 20px;}
    #title2 { font-size: 150%; display: block; padding: 10px;}
  </style>
</head>
<body>
  <p>15日(米国時間)、IE9の最新版となるIE9 Betaが公開された。Beauty of the Webからダウンロードできるほか、Internet Explorer 9 Beta の各言語のダウンロードから日本語版など英語版以外のIE9 Betaをダウンロードできる。IE9で実現される機能の改善と新機能の実装、標準規約への準拠とHTML5/CSS3、ECMAScript 5の対応は魅力的だ。IE9 Platform Previewが簡単にインストールおよびアンインストールができたこともあって、IE9 BetaをさっそくインストールしたWindows 7やVistaのユーザもいたことだろう。</p>
  <p>しかしここで注意が必要だ。IE9 PPまでは単体のアプリケーションとして提供されていたIE9だが、IE9 Betaからはアップグレードの一部として提供されることになる。つまり、一度IE9をインストールすると、IE8の代わりに動作するようになり、アプリケーションのアンインストールでは元に戻せなくなる。IE9 Betaを試したあとにIE8に戻そうとしても、アンインストールの一覧にはIE9は見つからない。</p>
  <p>しかしIE8へ戻すことは可能だ。アプリケーションをアンインストールするのと同じ要領で、コントロールパネルから「プログラムのアンインストール」を選択。ここで左上に表示される「インストールされた更新プログラムを表示」をクリックする。クリック後に表示される一覧にはWindows Internet Explorer 9という項目がみつかるはずだ。この項目を選択してアンインストールを実行すればいい。</p>
  <p>IE9のアンインストール後にはシステムの再起動を求められるため、そのまま再起動する。メニューに表示される項目はInternet Explorerのままになっているが、実行するとIE8が起動してくることを確認できる。</p>
  <div id="transborderbox"><div id="transborderbox-inside"><span id="title1">マイコミジャーナル</span><span id="title2">エンタープライズチャンネル</span></div></div>
</body>
</html>

上のサンプルではtrans.pngという透過PNGファイルを用意して使っている。灰色をベースに透過させたPNGデータで1ピクセルx1ピクセルのサイズで用意して、リピートさせて背景を透過させている。

3. CSS3 background-clipを使う

CSS3 background-clipを使ってボーダーの透過がそのまま要素の背景を突き抜けていくようにしている

1つ目の方法の方が記述としてはシンプルだ。この方法のままボーダーを透過にする方法がCSS3で策定が進められているbackground-clipを使うことだとTransparent Borders with background-clipで紹介されている。background-clipは背景の対象をどこまでにするかを指定するプロパティ。border-boxは従来と同じ、padding-boxであればボーダーの内側まで、content-boxであればコンテンツの描画領域まで、ということになる。つまり、background-clipにpadding-boxを指定すれば、思惑どおりボーダーの透過がそのまま要素を突き抜けて下の要素まで透過することになる。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>透過ボーダーデモ その3</title>
  <style type="text/css">
    #transborderbox {
      -moz-background-clip: padding;
      -webkit-background-clip: padding;
      background-clip: padding-box;
      background-color: white;
      border: 20px solid rgba(0,0,0,0.3);
      position: absolute; top: 100px; left: 80px; text-align: center;
    }
    #title1 { font-size: 250%; display: block; padding: 20px;}
    #title2 { font-size: 150%; display: block; padding: 10px;}
  </style>
</head>
<body>
  <p>15日(米国時間)、IE9の最新版となるIE9 Betaが公開された。Beauty of the Webからダウンロードできるほか、Internet Explorer 9 Beta の各言語のダウンロードから日本語版など英語版以外のIE9 Betaをダウンロードできる。IE9で実現される機能の改善と新機能の実装、標準規約への準拠とHTML5/CSS3、ECMAScript 5の対応は魅力的だ。IE9 Platform Previewが簡単にインストールおよびアンインストールができたこともあって、IE9 BetaをさっそくインストールしたWindows 7やVistaのユーザもいたことだろう。</p>
  <p>しかしここで注意が必要だ。IE9 PPまでは単体のアプリケーションとして提供されていたIE9だが、IE9 Betaからはアップグレードの一部として提供されることになる。つまり、一度IE9をインストールすると、IE8の代わりに動作するようになり、アプリケーションのアンインストールでは元に戻せなくなる。IE9 Betaを試したあとにIE8に戻そうとしても、アンインストールの一覧にはIE9は見つからない。</p>
  <p>しかしIE8へ戻すことは可能だ。アプリケーションをアンインストールするのと同じ要領で、コントロールパネルから「プログラムのアンインストール」を選択。ここで左上に表示される「インストールされた更新プログラムを表示」をクリックする。クリック後に表示される一覧にはWindows Internet Explorer 9という項目がみつかるはずだ。この項目を選択してアンインストールを実行すればいい。</p>
  <p>IE9のアンインストール後にはシステムの再起動を求められるため、そのまま再起動する。メニューに表示される項目はInternet Explorerのままになっているが、実行するとIE8が起動してくることを確認できる。</p>
  <div id="transborderbox"><span id="title1">マイコミジャーナル</span><span id="title2">エンタープライズチャンネル</span></div>
</body>
</html>

CSS3に対応したブラウザが普及することで、background-clipを使った透過ボーダーの実現も増えていくことになるとみられる。ただし今のところ、ChromeやSafariなどWebKit系のブラウザには問題があり、ボーダーを指定してもうまく描画できない。こうしたブラウザにも対応するには、しばらくはダブルdivテクニックを採用した方がいい。


Chrome 7開発版 - ダブルdivテクニックはうまく描画される	ボーダーの描画が思惑どおりにならない。透過するようになっても、ボーダーの描画は見込み違いのまま

Transparent Borders with background-clipではbackground-clipに関係したプロパティとしてbackground-originも紹介している。背景に画像を指定する場合、どこを開始ポイントにするか指定するもので、こちらもbackground-clipと同じく、border-box、padding-box、content-boxが指定できる。