CSS

scroll-behaviorでページ内遷移のスクロールを滑らかにする方法

こんにちは。エキサイトでデザイナーをしている齋藤です。 今回はCSSプロパティの一つであるscroll-behaviorを使用して、ページ内遷移のスクロールを滑らかにする方法をご紹介します。 実現したい挙動 既定の挙動 実現したい挙動 どうやって実現するか Tailw…

scroll-snap-typeを使用して子要素単位にスクロールさせる方法

こんにちは。エキサイトでデザイナーをしている齋藤です。 今回はCSSのscroll-snap-typeプロパティを使用して、子要素単位にスクロールさせる方法をご紹介します。 実現したいこと 冒頭、「子要素単位にスクロール」とはどんな状態かをご説明します。 CodePe…

Tailwind CSSで連続する要素で交互に適用されるスタイリングをする方法

こんにちは。エキサイトでデザイナーをしている齋藤です。 今回は、Tailwind CSSで連続する要素で交互に適用されるスタイリングをする方法として、odd:&even: Modifierをご紹介します。 交互に適用されるスタイリングの例 Tailwind CSSで実現する方法 さい…

【実験記】data属性を使用してスタイリングする方法

こんにちは。エキサイトでデザイナーをしている齋藤です。 今回は、HTMLのdata属性を使用してスタイリングする実験をしてみたので、その方法や所感について記したいと思います。 data属性とは? data属性は、HTMLタグに対して独自の属性を付与できる機能です…