個人的に使ってみたい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だと思います。
ブラウザのサポート状況を確認して使用してみてください。
それでは、また!

ファイブスターコーポレーションでは、ホテル・宿泊施設の集客や運営に
お困りの事業主様・オーナー様をサポートする様々なサービスを提供しています。
まずはお気軽にご相談ください。

ファイブスターコーポレーションの紹介動画はこちら⇓

関連記事

カテゴリー

最近の記事

  1. 【Agoda】「どうしてこんなに割引されているの?」に対するお答え!

  2. 販促のすゝめ!Photoshopを用いた画像編集のご紹介

  3. 日本の観光産業を追うおすすめ必読サイト

  4. 楽天トラベル新機能「ニュース&トピックス」活用出来ていますか?

  5. 宿泊業界で活かすChatGPTの運用例をご紹介

お問い合わせINQUIRY

お気軽にご相談をください。

宿泊施設の運営にお困りの事業主様、これから宿泊施設を運営したいとお考えの方
ご質問・ご相談などお気軽にご相談ください。

お問い合わせはこちら

採用情報RECRUITMENT INFO.

私たちと一緒に働きませんか

明るく、人と接することが好きな人で向上心がある人をお待ちしております。
(ホテル業・観光業・旅行業・営業職の経験者を優遇)

採用情報はこちら

TOP