本記事では、CSSで要素を透明・半透明にする方法について解説しています。
HTML/CSSの学習におすすめ書籍
1冊ですべて身につくHTML&CSSとWebデザイン入門講座
メリット
- HTMLとCSSの基本が体系的に学べる
- Webデザインの基本が学べる
- 1つのWebサイトを作りながら学べる
ポチップ
先輩くんAmazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ！
後輩ちゃん初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね！
全プログラマー必見！
変数名/関数名にもう悩まない！
変数名/関数名にもう悩まない！
リーダブルコード
メリット
- 美しいコードが書けるが自然と書けるようになる
- 他の開発者が理解しやすいコードになる
著:Dustin Boswell, 著:Trevor Foucher, 解説:須藤 功平, 翻訳:角 征典
¥2,640 （2023/07/23 02:48時点 | Amazon調べ）
ポチップ
目次
要素を透明・半透明にする
要素を透明・半透明にするにはopacityプロパティを使用します。
opacity: 0~1;opacityプロパティに設定できる値は0〜1の数値です。0は完全なる透明を表し、1は完全なる不透明を表します。つまり、0に近い値を設定すれば要素は透明に近い半透明になり、1に近い値を設定すれば要素は不透明に近い半透明になります。
<div class="wrapper">
<div class="content0">opacity:0</div>
<div class="content1">opacity:0.1</div>
<div class="content2">opacity:0.2</div>
<div class="content3">opacity:0.3</div>
<div class="content4">opacity:0.4</div>
<div class="content5">opacity:0.5</div>
<div class="content6">opacity:0.6</div>
<div class="content7">opacity:0.7</div>
<div class="content8">opacity:0.8</div>
<div class="content9">opacity:0.9</div>
<div class="content10">opacity:1</div>
</div>div.wrapper{
display:flex;
flex-wrap:wrap;
}
div:not(.wrapper){
display:flex;
align-items:center;
justify-content:center;
width:150px;
height:100px;
background:skyblue;
}
.content0{
opacity:0;
}
.content1{
opacity:0.1 ;
}
.content2{
opacity:0.2;
}
.content3{
opacity:0.3;
}
.content4{
opacity:0.4;
}
.content5{
opacity:0.5;
}
.content6{
opacity:0.6;
}
.content7{
opacity:0.7;
}
.content8{
opacity:0.8;
}
.content9{
opacity:0.9;
}
.content10{
opacity:1;
}