はじめに
こんにちは、GxPの杉山です。
こちらはグロースエクスパートナーズ Advent Calendar 2022の12日目の記事です。
普段はがっつりバックエンドを開発していますが、実はプログラミングの中でCSSに触っている時が一番楽しいと感じるCSS大好きエンジニアです。
今回はそんな私がきれいなデザインを作るのに効果的なおすすめのプロパティをご紹介します。
mix-blend-mode: 色をブレンドできる
See the Pen Untitled by Xmagnum2 (@Xmagnum2) on CodePen.
mix-blend-modeを設定すると、その要素の色が他の要素の影響を受けるようになります。
画像の上に文字を表示するときやjavascriptで動的に背景色を変えていくときに文字色が潜らないようにするときによく使います。
backdrop-filter: ガラスの質感を表現できる
See the Pen backdrop-filter by Xmagnum2 (@Xmagnum2) on CodePen.
backdrop-filterを設定すると、擦りガラスのようなblurをかけることができます。
写真の上に少し透過させた白い要素をかぶせてそれに対して使用すると非常に効果的です！
position: sticky;: 任意の要素内だけで位置を固定できる
See the Pen position: sticky; by Xmagnum2 (@Xmagnum2) on CodePen.
position: stickyを使用すると、任意の要素内だけで位置を固定し、その要素外ではposition: relativeのような挙動になります。
いままではjavascriptでスクロール幅を取得し、それに応じてcssのpositionを操作するなどの複雑な制御を行う必要がありましたが、それをこの機能は設定するだけで可能にしてしまいます。
all: unset;: スタイルの初期化ができる
See the Pen all: unset; by Xmagnum2 (@Xmagnum2) on CodePen.
CSSで高度なデザインを行おうとすると、デフォルトで設定されているプロパティが余計になってきます。
そうしたときは最初にall: unset;を設定することでButtonタグやaタグなどにもとから設定されているスタイルが初期化されます。
all: inital;というのもありますが、font-sizeなど全体で継承されるはずのものまで初期化されるため、継承する設定は残してくれるunsetがおすすめです！
scroll-snap-type: スクロールにスナップを効かせる
See the Pen scroll-snap-type by Xmagnum2 (@Xmagnum2) on CodePen.
scroll-snap-typeを設定すると、その配下にある要素に対してのスクロールにスナップが効くようになります。
また、スナップ位置を調整するscroll-snap-alignや一要素ごとにスナップを強制するscroll-snap-stopなども併せて利用するとより柔軟なデザインを構築できます。
scroll-snap-typeだけでなく、scroll-snap-alignを子要素に設定しないと機能しないので注意してください。
PCで閲覧する場合には効果は薄いですが、モバイルでの操作でその真価を発揮するプロパティです！
おわりに
一般的にCSSはBootstrapやMUI、VuetifyなどのCSSフレームワークにほとんどを任せて、拡張するというのが業務上の主流だと思います。
それはユーザーが使いやすいと思うものを作るためにはUI構成が非常に重要だからです。
フレームワークを使うと使いやすさという面で洗練されたUI構成になり、UIの良いサービスができます。
逆に、特設サイトやフライヤーなど、UIよりもデザインが重要度を上回るとき、フレームワークを使うことはあまりありません。
今回紹介したものはそれぞれが個性的で、フレームワークにはデザイン的に合わないことが多いですが、そうしたフルスクラッチで構築するデザインに活用することができるものです。
そしてCSSにはまだまだ変数や演算用の関数など多種多様な機能が用意されているので、この記事がデザインの引き出しを増やす糧になれば幸いです！！