takato(@n8takato)です!
cssで透明にする方法を知りたい
この記事は上記の課題に向けて作成しています。
webサイトを制作していると要素を透明にすることが度々あります。
cssでは簡単に要素を透明にすることが出来ます。
この記事ではcssで要素を透明にする方法を紹介します。
この記事を読むメリット
- cssで要素を透明にする方法がわかる
この記事を書いた人
この記事を書いた僕はこんな人です!
- 都内制作会社でwebデザイナー・webディレクターとして勤務
- webデザイナー3年、webディレクター1年目
- web制作現場で学んだことを発信している人
CSSで要素を透明にする3つの方法
早速cssで要素を透明にする方法を紹介します。
cssで透明にする方法は3通りあります。
cssで要素を透明にする3つの方法
- opacityプロパティ
- rgbaの指定
- transparentの指定
それぞれ説明していきます。
opacityプロパティ
1つ目は「opacityプロパティ」を使う方法です。
opacityプロパティは指定した要素とその子要素を透明にすることが出来ます。
コードの記述方法
opacity:数字;
数字は0〜1まで入力出来、0に近いほど透明になります。
実際にopacityプロパティを使った例
opacity:0;
opacity:0.2;
opacity:0.4;
opacity:0.6;
opacity:0.8;
opacity:1;
左上は数値が0なので完全に透明になり見えなくなりました。
また、指定したクラスの子要素も透明になります。
※文章も同様に半透明になっていますよね。このように「opacity」は子要素も半透明になるのが特徴です。
使用したHTMLコード
<div class="test">
<div class="test01">
<p>opacity:0;</p>
</div>
<div class="test02">
<p>opacity:0.2;</p>
</div>
<div class="test03">
<p>opacity:0.4;</p>
</div>
<div class="test04">
<p>opacity:0.6;</p>
</div>
<div class="test05">
<p>opacity:0.8;</p>
</div>
<div class="test06">
<p>opacity:1;</p>
</div>
</div>
使用したcssコード
.test01 {
opacity:0;
}
.test02 {
opacity:0.2;
}
.test03 {
opacity:0.4;
}
.test04 {
opacity:0.6;
}
.test05 {
opacity:0.8;
}
.test06 {
opacity:1;
}
rgbaの指定
2つ目は「rgbaを指定」する方法です。
rgbaの「a」はアルファ値というもので透明度を指定出来ます。
コードの記述方法
<!--背景を透明にする場合-->
background-color:rgba(0,0,255,0);
<!--文字を透明にする場合-->
color:rgba(0,0,255,0);
一番最後の数字が透明度の値です。0に近づくほど透明になります。
実際にrgba指定を使った例
opacity:0;
opacity:0.2;
opacity:0.4;
opacity:0.6;
opacity:0.8;
opacity:1;
上記のように背景色が半透明になりました。
「opacityプロパティ」との違いは子要素に影響が無いという点です。
※「opacityプロパティ」は子要素の文字も透明になっていましたが「rgba指定」は指定した箇所のみ透明になります。
「rgbaの指定」は部分的に透明にする際に適してます。
使用したHTMLコード
<div class="test">
<div class="test01">
<p>opacity:0;</p>
</div>
<div class="test02">
<p>opacity:0.2;</p>
</div>
<div class="test03">
<p>opacity:0.4;</p>
</div>
<div class="test04">
<p>opacity:0.6;</p>
</div>
<div class="test05">
<p>opacity:0.8;</p>
</div>
<div class="test06">
<p>opacity:1;</p>
</div>
</div>
使用したcssコード
.test01 {
background-color:rgba(229,229,229,0);
}
.test02 {
background-color:rgba(229,229,229,0.2);
}
.test03 {
background-color:rgba(229,229,229,0.4);
}
.test04 {
background-color:rgba(229,229,229,0.6);
}
.test05 {
background-color:rgba(229,229,229,0.8);
}
.test06 {
background-color:rgba(229,229,229,1);
}
transparentの指定
3つ目は「transparentを指定」する方法です。
カラー設定に「transparent」を追加すると透明になります。
「transparent」は半透明の設定は出来ません。完全な透明になります。
コードの記述方法
<!--背景を透明にする場合-->
background-color:transparent;
<!--文字を透明にする場合-->
color:transparent;
実際にtransparent指定を使った例
transparent
カラー設定
カラー設定
カラー設定
カラー設定
カラー設定
1番目のみ「transparent」を指定したので背景が透明になっています。
「transparent」は「opacity:0;」と同じ状態です。
完全に透明にしたい場合は「transparent」を使用してください。
使用したHTMLコード
<div class="test">
<div class="test01">
<p>opacity:0;</p>
</div>
<div class="test02">
<p>opacity:0.2;</p>
</div>
<div class="test03">
<p>opacity:0.4;</p>
</div>
<div class="test04">
<p>opacity:0.6;</p>
</div>
<div class="test05">
<p>opacity:0.8;</p>
</div>
<div class="test06">
<p>opacity:1;</p>
</div>
</div>
使用したcssコード
.test01 {
background-color:transparent;
}
.test02 {
background-color:rgba(229,229,229);
}
.test03 {
background-color:rgba(229,229,229);
}
.test04 {
background-color:rgba(229,229,229);
}
.test05 {
background-color:rgba(229,229,229);
}
.test06 {
background-color:rgba(229,229,229);
}
CSSで透明にするのは簡単!
最後にまとめです。
cssで要素を透明にする方法は3通りあります。
- opacityプロパティ
- rgbaの指定
- transparentの指定
それぞれ特徴があるので使い分けてください。