📷 完成イメージ（例）
- ダウンロードした写真を背景画像として配置
- その上にガラス風の半透明なボックスが表示されている
- テキストが読みやすく、奥行き感のあるレイアウトに！
📁 作成ファイル・保存場所
css-practice フォルダに以下のファイルを作成してください。
| ファイル名 | 内容 |
|---|---|
| backdrop-filter.html | 背景ぼかしフィルターのHTMLファイル |
| backdrop-filter.css | backdrop-filterを使ったスタイルシートファイル |
👉 HTMLとCSSは <link> タグで連携してください。HTMLはこの課題ページの下部にあるコードを模写して作成します。
そもそも backdrop-filter とは？
backdrop-filter は、Photoshopなどの画像加工ソフトを使わず、CSSだけで実現できる
「要素の背後にあるコンテンツ（背景）にだけフィルター効果をかける」プロパティです。
たとえば、背景をぼかす（blur）ことで、まるで「ガラス越しに見えている」ような表現になります。
このようなスタイルは近年のUIデザインで人気のあるGlassmorphism（グラスモーフィズム）と呼ばれています。
🪟 Glassmorphism とは？
背景が透けて見えるガラスのようなUI表現のこと。
AppleのmacOSやiOSのデザイン（ウィジェットやモーダル）にも多く使われています。
特徴として、半透明＋ぼかし＋立体感のあるカード風デザインが多いです。
backdrop-filter に使える効果の種類
backdrop-filter は以下のような効果を指定することができます：
| 指定値 | 効果内容 |
|---|---|
blur(10px) | 背景をぼかす（ふわっとにじんだ印象） |
brightness(1.2) | 背景の明るさを調整（1 = 通常、0.5 = 暗く） |
contrast(1.5) | 背景のコントラストを強くする（数値が大きいほど） |
grayscale(1) | 背景をグレースケール（モノクロ）に変換する |
saturate(1.5) | 背景の色味（彩度）を強める |
sepia(1) | 背景をセピア調（レトロな色調）に変える |
複数の値を組み合わせることも可能です（例：
blur(8px) brightness(1.2)）
🔰 目的
- CSSの
backdrop-filterプロパティを使って、背景のぼかし（ガラス風）表現を体験する - 半透明な背景＋ぼかしの組み合わせで、UIに深みとレイヤー感を加えるテクニックを学ぶ
rgba()との組み合わせで 背景の透明度・視認性をコントロールする力をつける
チェックポイント
backdrop-filter: blur(...)の書き方が正しくできているかbackground-color: rgba(...)で半透明背景を設定できているかbackdrop-filterを使うためのbackgroundやpositionの調整ができているか- モバイルでも可読性が保たれているか
HTMLを模写しよう
以下の構造を参考に、css-practice05.html を作成してください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSS Practice 05 - backdrop-filter</title>
<link rel="stylesheet" href="backdrop-filter.css">
</head>
<body>
<main>
<div class="glass-wrapper">
<section class="glass-card">
<h2 class="glass-card__title">ガラス風デザイン</h2>
<p class="glass-card__text">背景をぼかすことで、重なりのあるスタイリッシュな表現が可能になります。</p>
</section>
</div>
</main>
</body>
</html>
🏋️ トレーニングスタート！
次は css-practice05.css を作成し、背景のぼかし表現（Glassmorphism） に挑戦してみましょう。
CSSを段階的に書いてみよう（模写しながら）
- カード本体のスタイルを整える
body {
margin: 0;
padding: 2rem;
font-family: sans-serif;
}
main {
max-width: 800px;
margin: 0 auto;
}
.glass-wrapper {
background-image: url("cafe.jpg");
background-size: cover;
background-position: center;
padding: 10em 0;
}
- ガラス風のスタイル設定
.glass-card {
max-width: 500px;
margin: 0 auto;
padding: 3rem 2rem;
border-radius: 12px;
background-color: rgba(255, 255, 255, 0.2);
color: #ffffff;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(10px);
}
- 見出しと本文のスタイルを調整する
.glass-card__title {
font-size: 1.8rem;
margin-bottom: 1rem;
}
.glass-card__text {
font-size: 1rem;
line-height: 1.6;
}
💡
backdrop-filterはカード自体ではなく「背景のぼかし」です。
透明な背景と一緒に使うのがポイントです！
応用ポイント
backdrop-filter: brightness(),contrast(),saturate()など他の効果も試してみよう- UIカード・ナビ・モーダル背景などにも応用できる
- Safariの対応のために
-webkit-backdrop-filterも忘れずに
🔍 さらに調べてみよう！
backdrop-filterは 背景に対して効果をかけるのに対し、filterプロパティは 要素自体に効果をかけるためのプロパティです。
たとえば画像をぼかしたい場合はfilter: blur(5px);のように指定します。
興味があれば、filter との違いも調べてみると理解が深まります！