目次
グラスモーフィズムの見本
グラスモーフィズム（Glassmorphism）とは、磨りガラス状の半透明のレイヤーを用いたデザインです。MacOSやiOSでも使われているので、馴染みのある人も多いと思います。
このグラスモーフィズムはCSSで簡単に実装できます。この記事では、グラスモーフィズムを実装するためのHTML・CSSの設定方法をご紹介します。
まずは、下のCodePenにグラスモーフィズムの見本を置いておきます。表示やコードなどをご確認下さい。
See the Pen グラスモーフィズム by Satoru Shimizu (@sat-simizu) on CodePen.
HTML
HTMLの構造は簡単です。
「背景画像のレイヤー」と「磨りガラスレイヤー」の２つのタグさえあれば、実装可能です。
下にHTMLの記述例を載せておきます。
<body>
<!-- 背景レイヤー（写真など） -->
<div class="bg-layer">
<!-- 磨りガラスレイヤー -->
<div class="glass-layer">
グラスモーフィズム
</div>
</div>
</body>CSS
下にグラスモーフィズムのCSS記述例を載せておきます。コード自体は長く見えるかもしれませんが、グラスモーフィズムに直接関係する箇所は３行のみと非常に簡単です。
@charset "UTF-8";
body {
font-family: "Noto Sans JP", "メイリオ", "Meiryo", "ＭＳ ゴシック",
"Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", sans-serif;
}
// 背景レイヤー（グラフィック画像や写真など）
.bg-layer{
background-image: url("https://shimizu-create.com/wp-content/uploads/2023/08/tree300kb@2x@2x.jpg"); // 画像のパス
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
width: 100%; // 背景セクションの幅：適宜変更して下さい
height: 100vh; // 背景セクションの高さ：適宜変更して下さい
// 以下、フレックスボックスで「ガラスレイヤー」を中央寄せ
display: flex;
align-items: center; // 上下中央
justify-content: center; // 左右中央
}
// 磨りガラスレイヤー
.glass-layer{
width: 60vw; // ガラスレイヤーの幅：適宜変更して下さい
min-height: 300px; // ガラスレイヤーの高さ：適宜変更して下さい
background-color: rgba(10, 68, 37, 0.2); //背景色
border-radius: 15px; // 角丸：適宜変更して下さい
//ぼかしエフェクト
backdrop-filter: blur(10x);
-webkit-backdrop-filter: blur(10px); //ベンダープレフィックス：gulpなどで自動処理をしていない場合は忘れずに！
// 以下、フレックスボックスで「文字」を中央寄せ
display: flex;
align-items: center; // 上下中央
justify-content: center; // 左右中央
// 以下、文字のスタイル
font-size: 18px;
color:#ffffff;
}コード解説
グラスモーフィズムに直接関わるコード解説
- background-color（背景色：24行目）：適度な透明度に調整して下さい。
- backdrop-filter（ぼかし度：28行目）：何ピクセル単位でボカすのか適宜調整して下さい。
- ベンダープレフィックス（ぼかし度：29行目）：gulpなどでベンダープレフィックスを自動処理していない場合は忘れずに手動で書いて下さい。
これ以外のコードはスタイルの体裁を整えるためのものばかりです。
