CSS を使用した不透明度遷移
CSS とも呼ばれるカスケーディング スタイル シートは、HTML や XHTML などのマークアップ言語と共に Web ページのスタイルを設定できる言語です。 CSS はスタイリングのためのさまざまな属性を提供し、それらを CSS ファイルまたは HTML または XHTML ファイル内に追加できます。
opacity 属性
CSS が提供する属性の 1つに opacity があります。 不透明度は、画像、形状、またはコンテンツなどの要素の透明度です。
以下の構文を使用して、要素に不透明度を追加できます。
構文：
Opacity: value
ここで、値は、その要素にどの程度の透明度を与える必要があるかを示します。 0 から 1 の間の 10 進数値として指定する必要があります。
0 は要素が完全に透明であることを意味し、1つは完全に表示されます。 これら 2つの数値の間の任意の値を指定して、透明度を増減できます。
たとえば、要素に半透明が必要な場合は、値として 0.5 を割り当てることができます。 わずかに見える要素が必要な場合は、0.2 または 0.3 を指定できます。
かろうじて透明な要素が必要な場合は、0.8 または 0.7 を使用できます。
Opacity: 0.5;
transition 属性
要素にトランジションを与える必要がある場合、CSS で transition 属性を使用できます。 この属性にはいくつかのプロパティがあります。
transition-delay |
移行を遅らせる必要がある場合は、これが必要なプロパティです。 |
transition-duration |
このプロパティは、トランジションが完了するまでにかかる時間を指定します。 |
transition-property |
このプロパティは、遷移効果によってどの CSS プロパティが影響を受けるかを記述します。 |
transition-timing-function |
このプロパティを使用して、遷移を高速化または低速化できます。 |
この記事では、CSS を使用して要素に不透明度遷移を追加する方法について説明します。 opacity および transition 属性を使用する必要があります。
2つの例を取り上げます。 最初の例として、要素としてボタンを作成し、不透明度の遷移を追加します。
2 番目の例では、画像とテキストに不透明度の遷移を追加します。
CSS を使用してボタンに不透明度遷移を追加する
まず、HTML を使用してボタンを作成します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>Opacity Transition</title>
</head>
<body>
<!-- creating the button -->
<div>
<button class="btn">Click Here</button>
</div>
</body>
</html>
上記のコードのように、btn というクラスを持つボタンを作成しました。
ボタンのスタイル
次に、CSS を使用してボタンにいくつかのスタイルを追加しましょう。 この例では、以下のスタイルをボタンに追加します。
- 青色の背景。
- フォントの色は白、サイズは 30px です。
- 1 ピクセルの境界線とその半径として 10 ピクセル。
- 10px のパディング。
.btn{
background-color: blue;
color: white;
font-size: 30px;
border: 1px;
border-radius: 10px;
padding: 10px;
}
これで、ボタンのスタイル設定が完了しました。
不透明度遷移を追加
それでは、以下のようにボタンに不透明度の遷移を追加しましょう。
.btn:hover{
opacity: 0.5;
transition-duration: 1s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>Opacity Transition</title>
</head>
<body>
<!-- creating the button -->
<div>
<button class="btn">Click Here</button>
</div>
</body>
</html>
hover セレクターは、CSS が提供する疑似クラス タイプのオプションです。 カーソルを要素の上に移動すると、要素を選択できます。
上記のコードのように、ボタンの上にカーソルを合わせると、不透明度の値として 0.5 を指定しているため、ボタンは半分透明になります。 トランジションをより明確に表示するために、トランジション期間として 1 秒を指定しました。
ボタンにカーソルを合わせると、以下のように半分の青色になります。
完全な CSS コード:
/* Styling the button */
.btn{
background-color: blue;
color: white;
border: 1px;
border-radius: 10px;
font-size: 30px;
padding: 10px;
}
/* Adding opacity transition */
.btn:hover{
opacity: 0.5;
transition-duration: .25s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>Opacity Transition</title>
</head>
<body>
<!-- creating the button -->
<div>
<button class="btn">Click Here</button>
</div>
</body>
</html>
CSS を使用して画像とテキストに不透明度遷移を追加する
画像とテキストを挿入する
画像とテキストに不透明度遷移を追加してみましょう。 まず、以下のコード チャンクのように、HTML を使用して画像を挿入する必要があります。
<img class="img" src="/img/DelftStack/logo.png" alt="alternatetext">
画像の下にテキストを配置できます。
<p class="text">This is a picture</p>
HTML コードは次のようになります。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>Opacity transition</title>
</head>
<body>
<div>
<!-- Inserting an image -->
<img class="img" src="/img/DelftStack/logo.png" alt="alternatetext">
<!-- Inserting a text -->
<p class="text">This is a picture</p>
</div>
</body>
</html>
画像とテキストにスタイルを追加する
いくつかのスタイルを追加して、プロセスを明確に把握できます。
/* Styling the image */
.img{
width:25%;
display: block;
margin-left: auto;
margin-right: auto;
}
/* Styling the text */
.text{
text-align: center;
font-size: 20px;
margin-left: 45%;
margin-right: 45%;
}
ここでは、画像を小さいサイズで挿入し、中央に配置しました。 テキストのフォント サイズを設定し、画像の下の中央に配置しました。
不透明度遷移を追加
これで、以下のコード チャンクを使用して、画像とテキストの両方に不透明度遷移を設定できます。
.img:hover, .text:hover{
opacity: 0.2;
transition-duration: .25s;
}
完全な CSS コード:
/* Styling the image */
.img{
width:25%;
display: block;
margin-left: auto;
margin-right: auto;
}
/* Styling the text */
.text{
text-align: center;
font-size: 20px;
margin-left: 45%;
margin-right: 45%;
}
/* adding opacity transition*/
.img:hover, .text:hover{
opacity: 0.2;
transition-duration: .25s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>Opacity transition</title>
</head>
<body>
<div>
<!-- Inserting an image -->
<img class="img" src="/img/DelftStack/logo.png" alt="alternatetext">
<!-- Inserting a text -->
<p class="text">This is a picture</p>
</div>
</body>
</html>
画像とテキストの上にカーソルを移動すると、不透明度の値として 0.2 を指定したため、両方の要素がわずかに表示されます。
要素 (画像とテキスト) を非表示にする場合は、不透明度の値を 0 に設定できます。
まとめ
この記事では、CSS 属性 opacity と transition を使用して要素に不透明度遷移を追加する方法について説明しました。 このチュートリアルでは、プロセスを説明するための例として、ボタン、画像、およびテキストに不透明度の遷移を追加しました。
Nimesha is a Full-stack Software Engineer for more than five years, he loves technology, as technology has the power to solve our many problems within just a minute. He have been contributing to various projects over the last 5+ years and working with almost all the so-called 03 tiers(DB, M-Tier, and Client). Recently, he has started working with DevOps technologies such as Azure administration, Kubernetes, Terraform automation, and Bash scripting as well.