CSSのtransparent（トランスペアレント）で要素を透明にする

transparentは要素を透明にするプロパティです。部分的に透明にする事で下の要素を表示させる事ができます。

非表示ではないため、marginやpaddingなどの余白も含めて常に存在します。

背景色を透明にしたりテキストやborderを透明にする事で、様々なデザインを作る事ができます。

transparent（トランスペアレント）とは

transparentとは要素を透明にするもので、前から実装されているプロパティです。

transparentを指定すると要素の色が完全に透明になりますが、opacityやrgbaの様に透明度を変える事はできません。

他のCSS命令で指定している配色を、部分的にキャンセルする使い方が多いと思います。

transparentで透明にできる要素

transparentで色を透明にできる要素には様々なものがあります。

ボックス要素の背景色やテキストの色、そしてボーダーの色も消す事ができます。

要素は存在する

transparentを指定した要素は色が透明になりますが、display: none;と違い要素自体は存在します。

ですのでmarginやpaddinngなどの余白要素はそのまま反映されます。

transparentで背景色を透明にする

まずは背景色を透明にした例をご紹介しましょう。

特定ボックス要素のみ背景を透明にする

下記のコードは、pタグに背景色を指定し別途classを指定したpタグの背景色をtransparentで透明にした例です。

HTMLソース

<div class="tr1"> <p>テキスト</p> <p>テキスト</p> <p>テキスト</p> </div> <div class="tr1"> <p>テキスト</p> <p class="tp">テキスト（transparent指定）</p> <p>テキスト</p> </div>

CSS

.tr1{ margin-bottom: 20px; width: 100%; background-color: #f1f1fd; } .tr1 p{ background-color: #a4a4fd; } .tr1 p.tp{ background-color: transparent; }

サンプル

この様にベースとなる土台には#f1f1fd、そしてpタグには#a4a4fdの背景色が付いています。

.tpを付けたpタグに「transparent」が設定されていますので、背景色#a4a4fdがキャンセルされます。

その結果.tpの付いたpタグは下地である「#f1f1fd」の色が見えている訳です。

transparentでテキストを透明にする

次はあまり用途はありませんが、テキストを消した事例をご紹介しましょう。

特定テキストを透明にする（非表示ではない）

HTMLソース

先ほどと同様の事例で、今度は別のクラス名を設定します。

<div class="tr1"> <p>テキスト</p> <p class="tp2">テキスト（transparent指定）</p> <p>テキスト</p> </div>

CSS

…ここまで前回と同じ .tr1 p.tp2{ color: transparent; }

サンプル

この事例ではtp2のテキスト色を「transparent」にしているので、背景色は#a4a4fdが反映されていますが、文字だけが見えていませんね。

display:none;と違って見えていないだけでテキスト自体は存在しており、マウスで選択する事もできます。

要素を部分的に透明にしてデザインを実現

基本的に透明にする場合は、その下にある要素を表に出す事に特化されるものと言えます。

単に見えなくするだけであれば、あえてそこに置く意味がありませんからね。

そのため要素が複数重なる状況に置いて要素を部分的に透明にし、デザインの一環として使われる場合が多いといえます。

隠しテキスト判定に注意

上の様にテキストを意図的に透明にする場合、その明確な理由が必要になります。

テキストを見えなくしているのは「隠しテキスト」とも言えるからです。

意図が見えないまま乱用すると、検索サイト側からペナルティを受ける可能性がありますので注意しましょう。

transparentでborder枠を透明にする

transparentを使った三角形の作り方

今回はtransparentで部分的にborder色を透明にする事で、三角形を作る方法を紹介します。

要素の上下左右にくっつくborderを、transparentで部分的に透明にするのがコツです。

HTMLソース

<div class="triangle-up1"></div>

CSS

.triangle-up { width: 0px; height: 0px; border-left: solid 50px transparent; border-right: solid 50px transparent; border-bottom: solid 100px red; }

サンプル

この赤い三角形はborder-bottomの色（red）部分のみが三角形に見えた状態です。

本当は左右のborderも存在しているのですが、transparentで透明になっているため見えません。

borderとcontentsの関係から三角形の作り方を解説

今回三角形は、border部分（左と右と下）だけで構成されています。

borderは本来コンテンツ枠の周りにできるものですが、今回はwidth・height共に0pxにしているのでコンテンツ枠は表示されません。

と言ってもわかりにくいでしょうから、あえてコンテンツ部分を少し表示させてみましょう。

コンテンツ枠を20px見せたサンプル

CSS

.triangle-up1 { width: 100px; height: 100px; border-top: solid 40px green; border-left: solid 40px pink; border-right: solid 40px blue; border-bottom: solid 40px red; }

上記はあえてwidth・heightを100pxとし、40pxのborderが四方を囲っているサンプルです。

各ボーダーに上は緑、左はピンク、右はブルー、下にredの色が付いています。

横幅100pxのうち左右のborderが40px×2で80pxを使っているので、残り20pxのコンテンツ枠が白く見えています。

高さの方も同様に上下のborderに80px使われていますね。

box-sizingによる判定

本記事の環境では、要素のサイズ（width・height）内に「borderサイズ」までが含まれます。

それはCSSの全体設定で、box-sizing: border-box;の指定をしているためです。

これによりコンテンツのサイズは常に、borderとpaddingの枠幅が差し引かれたサイズになります。

CSS

.triangle-up2 { width: 100px; height: 100px; border-top: solid 50px green; border-left: solid 50px pink; border-right: solid 50px blue; border-bottom: solid 50px red; }

上の様に幅と高さをそれぞれ100pxにし、borderを50pxにした場合、要素内のコンテンツ幅と高さはborderだけで100px全て使い切ってしまいますね。

サンプル

この様にborderで埋め尽くされ、中のコンテンツ枠は見えなくなります。三角形はこの状態を利用している訳です。

最終的に、下のborder-bottomの赤だけを見せて三角形を実現します。

左右のborderをtransparentで透明に

まずは上のborderを取った状態が下のサンプルです。

最後に左右のborderを透明にすればborder-bottomのみの赤が残り、上向きの三角形が出来上がるという訳です。

最初の完成版のCSSではwidth・heightは0pxにしていますが、この状態でもborderは指定px分だけ表示されます。

完成版ではborder-bottomを100pxに調整しています。

borderを半透明にする場合の注意

borderは造形時にtransparentで完全に透明にする以外に、rgba()でアルファ値を入れて半透明にする場合もあります。

これによりborderの枠線が透けて、その下にある要素が見える訳ですね。

アルファ値を入れてもborderが透明にならない

余談ですが、borderにアルファ値を入れてもすぐ透明にはなりません。

例えば以下サンプルではborder: 20px solid rgba(0, 0, 0, 0.3);と設定していますが、透明になっていない事がわかりますよね。

HTMLソース

<div class="tr3"> <p>ここに説明文章が入ります。ここに説明文章が入ります。ここに説明文章が入ります。ここに説明文章が入ります。ここに説明文章が入ります。ここに説明文章が入ります。ここに説明文章が入ります。ここに説明文章が入ります。ここに説明文章が入ります。ここに説明文章が入ります。ここに説明文章が入ります。ここに説明文章が入ります。ここに説明文章が入ります。ここに説明文章が入ります。ここに説明文章が入ります。ここに説明文章が入ります。ここに説明文章が入ります。ここに説明文章が入ります。ここに説明文章が入ります。ここに説明文章が入ります。</p> <div class="lightbox1"> <h4>Transparent Borders</h4> </div> </div>

CSS

.lightbox1 { background: white; border: 20px solid rgba(0, 0, 0, 0.3); ←透明の設定 -webkit-border-radius: 40px; -moz-border-radius: 40px; border-radius: 40px; padding: 10px; width: 200px; text-align: center; position: absolute; top: 10px; left: 100px; }

半透明になっていないサンプル

上記の様にborder（グレー部分）の下に重なる文字が見えていません。

borderが透明になっていない理由

これはborder自体は確かに半透明になっているのですが、「要素自体の背景」がborderの下まで敷かれている事が原因です。

サンプルのbackgound:は「white」になっていますよね。

この白がborderの下まで広がっているため、borderが透明にならず（グレー色）下にある文章部分が見えないのです。

border自体を半透明にする方法

これは比較的簡単に解消できます。CSSに一行追加するだけです。

.lightbox2 { background: white; background-clip: padding-box; ←追加 border: 20px solid rgba(0,0,0,0.3); border-radius: 40px; padding: 10px; width: 200px; text-align: center; position: absolute; top: 10px; left: 100px; }

これを追記すると背景色が及ぶ範囲がpaddingまでで終了し、その外側にあるborder部分までは及ばなくなります。

透明になったサンプル

このようにborder部分に透けて文章が見える様になります。

background-clip：どこまで背景を敷き詰めるか

background-clipは、ボックスモデルのどの部分までを指定して背景を表示するかをコントロールできるプロパティです。

今回はpadding-boxを選択しましたが、border-boxにするとborderの枠位置まで背景が及びます。

変更前と同じ状態ですね。

content-boxとした場合はborderおよびpadding領域までは背景色に含まれません。

応用編：テキストを透明にして実現するテクニック

マウスオーバー時にテキストにグラデーションを掛ける

これはtransparentの応用編でテキストを透明にして実現します。

よくリンクテキストにマウスを合わせると色が付きますよね。通常はブルー系などでしょうか（本記事では赤ですが）。

このマウスオーバー時のアクションで、文字に単色ではなくグラデーションを掛ける事ができます。

HTML

<div class="tr2"> <p><a href="#">マウスオーバー時テキストに左から右へとグラデーションが掛かります。</a></p> </div>

CSS

.tr2 a { color: #007db5; font-weight: 900; } .tr2 a:hover { background: linear-gradient(90deg, #ff8a00, #e52e71); -webkit-background-clip: text; color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

サンプル

テキストなのでわかりにくいかも知れませんが、左端のオレンジから右端の紫へとグラデーションが掛かっています。

仕組みと解説

まずはリンク自体に、linear-gradientで線形のグラデーションの背景をつけます。

この時グラデーションはテキストではなく背景としてボックス形状に掛かります。

背景をテキスト形状に切り取る「-webkit-background-clip: text;」

次に設置した背景をリンクテキストの形状に切り取ります。

これが「-webkit-background-clip: text;」の部分です。

この時点でテキスト自体と、その「テキスト形状に切り取ったグラデーション」のみが残ります。

テキストをtransparentで透明にする

その上でcolor: transparent;でテキスト自体を透明にすれば、先ほど切り取ったテキスト形状の背景のみが残るという訳です。

テキスト自体にグラデーションを掛けるのではなく、背景にグラデーションをつけてそれをテキストの形に切り取り、切り取った要素だけを表示しているのです。

一押し人気コーナー紹介