Blog スタッフブログ

WEB制作のG・Yです。
今回はWEBサイトを映えさせる比較的新しく便利なCSSをご紹介します。

■backdrop-filter

要素の背景領域にぼかしなどのグラフィック効果を与えることのできるCSSプロパティです。
以下のような、グラスモーフィズムと呼ばれる描画を再現することも可能です。

・「タイトルが入ります」部分のCSS

backdrop-filter:blur(15px);
color:#fff;
padding:20px;
font-weight:bold;

以前はFirefox未対応でしたが、最新のブラウザでは対応済みです。
これにより、主要なブラウザのすべてで運用可能になりました。

■aspect-ratio

画像の縦横比を任意の値に固定することができるCSSプロパティです。
以下のように、表示領域の縦横比を改変して画像を表示することも可能です。
object-fit:cover;を指定しないと元の画像のアスペクト比が崩れるのでご注意ください。

・右側の画像部分のCSS

aspect-ratio:240/400;
object-fit:cover;

■scroll-behavior

ページ下部から最上部に移動する際のpage-topボタンなどで、ボタンを押して一気に上部に飛ぶのではなく、
ゆっくり遷移する動きを表現したい際にはこのCSSが有効です。
以前はjavascriptを導入しないと表現できませんでしたが、
現在はCSSだけでもこういった動きの実装が可能となりました。

scroll-behavior:smooth;