どうも。安里です。
今回のブログは、今後の業務に使えそうなCSSを紹介しようと思います。
あと、自分が忘れないようにするためにブログにしてみました！
簡単に実装できるものをピックアップしましたので
業務に活かしていきましょう！
最初に紹介するのは、スクロールの動作に関係するプロパティ「scroll-behavior」
まずは、下のデモ画面にある横並びの123をクリックしてみてください。
スクロールの動きがスムーズになります。
See the Pen
wvvmmKp by test_san (@zocifrhc)
on CodePen.
今までは、JavaScriptを使ってスクロールの動きを指定していたのが
CSSでしかも「scroll-behavior:smooth;」たった1行で完成です。
簡単に実装できますね！
次に紹介するのは、ページ要素を固定できる「position: sticky;」
では、デモ画面を下へスクロールしてください。
See the Pen
PooRVXb by test_san (@zocifrhc)
on CodePen.
今度は、横並びの123を固定したままスクロールすることができます。
こちらもHTMLとCSSで簡単に実装ができます。
任意の場所だけ固定させたい場合には、position: Fixed;だとJavaScriptが必要になってきます。
position: sticky;だと、その心配もありません。
LP制作などにも活かせると思います！
いかがでしょうか。簡単、尚且つCSSだけで実装できるのが素晴らしいですね。
JavaScriptがわからない人には助かるCSSだと思います。
ブラウザのサポート状況を確認して使用してみてください。
それでは、また！
