Blog スタッフブログ

WEB制作のG・Yです。

前回の記事に引き続き、スタイリッシュさ重視のCSSプロパティについてご紹介いたします。

❹scroll-behavior

scroll-behavior:smooth;

画面スクロール時にゆっくり移動するという、通常はjavascriptを用いて実装するような動きをCSSのみで実装できるCSSプロパティです。

画像のようなページトップへ移動するボタンをはじめとした、ページ内リンク系のボタンによく採用されます。

❺transform:scale

 transform: scale(1.1);

要素を任意のサイズに拡大、もしくは縮小表示するCSSプロパティです。

上記の書き方であれば1.1倍に拡大できます。

ホバーアニメーション用としてこのアニメーションを設定することで、リンク先が設定されていることが視覚的に分かりやすくなります。