ヘッダーの固定と背景の半透明化
公開日：2020-10-24
更新日：2020-10-24
更新日：2020-10-24
1. 概要
ヘッダーを画面上部に固定にして、ヘッダーの背景を半透明にします。
ヘッダーの固定は、
ヘッダーの半透明化は、
ヘッダーの固定は、
position:fixed;
top:0px;
ヘッダーの半透明化は、
background-color: rgba(255, 255, 255, 0.8); /* 背景のみ半透明 */
または、
opacity:0.5; /* 文字も半透明 */
2. サンプル
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML・CSS・JavaScript</title>
<style>
.header {
position: fixed;
top: 0px;
width: 100%;
height: 30px;
border:1px solid #ccc;
background-color: rgba(255, 255, 255, 0.8); /* 背景のみ半透明 */
/* opacity:0.5; 文字も半透明 */
}
</style>
</head>
<body style="margin:0px; background-color:#fff; color:#000;">
<div class="header">
ヘッダー
</div>
<div style="background-color:#e0e0e0;">
<br /><br />
ああああああああああ<br />
いいいいいいいいいい<br />
うううううううううう<br />
ええええええええええ<br />
おおおおおおおおおお<br />
かかかかかかかかかか<br />
きききききききききき<br />
くくくくくくくくくく<br />
けけけけけけけけけけ<br />
ここここここここここ<br />
ささささささささささ<br />
しししししししししし<br />
すすすすすすすすすす<br />
せせせせせせせせせせ<br />
そそそそそそそそそそ<br />
</div>
</body>
</html>
実行結果：
