【Bootstrap + CSS】 でガラス風デザインを再現「コピペOK」

Webサイトをおしゃれに見せたいと考えたとき、「ガラス風デザイン（glassmorphism）」を取り入れたいと思ったことはありませんか？

ガラスのような透明感とぼかし効果を使ったデザインは、近年のWebトレンドとして注目されており、ポートフォリオやLP、Webアプリなど幅広く活用されています。

この記事では、Bootstrapを使って初心者でも実装できる「おしゃれなガラス風サイトの作り方」をサンプル付きで分かりやすく解説します。

ガラス風サイト

今回はこちらのおしゃれなガラス風サイトを作ります

See the Pen ガラス風サイト by VA-Rie (@VA-Rie) on CodePen.

ナビバーの作り方（Bootstrapコンポーネント）

関連記事👉【初心者向け】Bootstrap をCDNで導入する方法｜最短3分でレスポンシブ対応！

Bootstrapには既成デザインのナビバーがあります。こちらのコードをアレンジします。

See the Pen bootstrap-nabver by VA-Rie (@VA-Rie) on CodePen.

アレンジしたコードがこちらです↓

See the Pen Bootstrap-navber01 by VA-Rie (@VA-Rie) on CodePen.

ポイント：

• shadow-sm で浅い影 → 今っぽい
• container で中央寄せ
• シンプルにブランド名のみでミニマルデザイン

ヒーローエリア（ガラス風デザイン）

ここが “おしゃれに見える最大のポイント” です。

 
background: rgba(255, 255, 255, 0.15);

この1行は、ガラス風（Glassmorphism）デザインの“核”になる指定です。
これは日本語で言うと、
「白色を、15%だけ透明にして背景色として使う」
という意味です。
🎨 各値の意味
● 255, 255, 255
RGBは 0〜255
255,255,255 は 完全な白
● 0.15（透明度）
0.0 → 完全に透明
1.0 → 完全に不透明
0.15 = 15%だけ見える
つまり、
「ほぼ透明な白の膜を1枚かぶせている」
イメージです。

なぜガラス風に見えるの？

この指定単体では「半透明」なだけですが、
次のコードとセットで使うとガラスになります。

backdrop-filter: blur(10px);

セットで起きていること
背景画像が透けて見える
透けて見える部分が ぼかされる
その上に 薄い白 が乗る
→ 曇りガラスのような見た目になります。

これでガラスmorphismが実現できます。

数値を変えるとどうなる？

もっと透明にしたい

background: rgba(255, 255, 255, 0.05);
→ かなり透ける（上級者向け）

See the Pen ガラス風サイト01 by VA-Rie (@VA-Rie) on CodePen.

少し白さを強くしたい

background: rgba(255, 255, 255, 0.3);
→ ガラス感が強くなる（見やすい）

See the Pen ガラス風サイト02 by VA-Rie (@VA-Rie) on CodePen.

黒ガラスにしたい

background: rgba(0, 0, 0, 0.3);
→ ダークモード・高級感

See the Pen ガラス風サイト03 by VA-Rie (@VA-Rie) on CodePen.

Summary

ガラス風デザインのポイントは、

• background: rgba(255, 255, 255, 0.15); による半透明のレイヤー
• backdrop-filter: blur() を組み合わせた背景のぼかし
• Bootstrapのナビバーやカードをベースにしたシンプルな構造

この3点を押さえるだけで、初心者でも一気に今っぽく・洗練されたUIを作ることができます。

特に、透明度（rgbaの数値）を調整することで、

• うっすら透ける繊細なガラス
• 視認性を重視した白ガラス
• 高級感のあるダークガラス

など、デザインの印象を簡単に変えられるのも大きな魅力です。