個人的に使ってみたいCSS

どうも。安里です。
今回のブログは、今後の業務に使えそうな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だと思います。
ブラウザのサポート状況を確認して使用してみてください。
それでは、また!

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

何でもお気軽にお問い合せください。

お問い合せはこちら