Home
ウェブ制作
ウェブデザイン
ウェブデザイン

今すぐ使える最新CSSテクニックや書き方20選 サンプルコード付レシピ

ひと手間でガラリと変わる、これからの新しいCSS

HTML/CSSの入門書などには載っていない、登場したばかりの最新CSSテクニックをまとめてご紹介します。

サンプルのソースコード付きなので、理解しやすく、実装したいときにも役立ちます。

ページの演出に使える、デザインの仕上げにもオススメしたいワザが揃いました。

「こんなことがCSSでできるの?!」と思ってしまう、オドロキのテクニックを学んでみましょう。


コンテンツ目次

 

キラキラに輝くホログラフをCSSで実装

マウスの動きにあわせ、キラキラと七色に輝くホログラフを、CSSのみで実装できるpokemon-card-css。

名前からも分かるように、ポケモンのトレカで使われている、あのキラキラを完全再現。

レアカードなど、各種エフェクトがそれぞれ用意されています、以下のデモをスクロールしてみましょう。

See the Pen
Pokemon Cards Holo effect v2 by Simon Goellner (@simeydotme)
on CodePen.

 

クールなグラデーション背景のつくり方

カスタムプロパティをつかって、手軽に色の変更ができる、複雑でクールなCSSグラデーションを作成できます。

Highly Customizable Background Gradientsでは、さまざまなデモと一緒に、詳しく紹介しています。

See the Pen
Highly Customizable Background Gradients by Scott Vandehey (@spaceninja)
on CodePen.

 

oklch()をつかった色の設定

これまでrgb()やHEX値で指定してきた色。

しかし、CSS Color 4仕様では、より良い方法が追加されており、その中でもoklch()は特に注目。

oklch()専用の、便利なカラーパレット・ジェネレターや、カラーピッカーツールも活用してみましょう。

OKLCH picker

 

夢のような景色「Dreamy Blur」エフェクト

ぼんやりとボヤケた、まるで夢でも見ているような、ぼかしエフェクトをCSSで表現する Dreamy Blur。

backdrop-filterをつかったテクニック。

See the Pen
Dreamy blur by yuanchuan (@yuanchuan)
on CodePen.

 

オフキャンバスのメニューをポップアップで実装

ポップアップで実装でき、HTMLとCSSのみで、JavaScriptも必要ありません。:hasを利用しているので、Chrome CanaryでFlagを有効化し、デモを見てみましょう。

 

スクロール連動型のCSSアニメーション

animation-timelineプロパティをつかえば、スクロールに合わせて画像をアニメーション付きで表示するのも、とてもラクに。デモはこちら。

 

3Dなグリッチ・ホバーエフェクト

マウスをホバーすると、立体的に傾いた画像がピクセル化され、グリッチエフェクトとともに表示される 3D Perspective Glitch Hover Effect。

もちろん、CSSのみでスタイリングされており、ポイントはimage-rendering: pixelatedをつかった、画像のピクセル化。詳しくは、こちらでどうぞ。

デモ１とデモ２が用意されています。

 

画像をハーフトーン加工する

さまざまな大きさのドットをつかって、色の濃淡や明るさなどを表現できるハーフトーンを、CSSのみで表現するCSS Halftone Patterns。

日本語による紹介も、参考になりました。

See the Pen
Halftone pattern explorer by Michelle Barker (@michellebarker)
on CodePen.

See the Pen
CSS Radial Engraving Photo Filter by Scott Vandehey (@spaceninja)
on CodePen.

The Power of CSS Blend Modesで紹介されている、mix-blend-modeをつかったテクニックも一緒に。

 

どこでもクリックできるカードの作成

ChromeとSafariで利用できるようになった、:hasをつかった小技テクニック。

カードのどの部分でもクリックでき、ユーザビリティの改善にも活用したい Creating Animated, Clickable Cards With the :has() Relational Pseudo Class。

See the Pen
Hovers and focus using the has() relational pseudo-class by utilitybend (@utilitybend)
on CodePen.

 

画像のホバーアニメーション

imgタグだけで、画像をスタイリングしたり、maskやoutlineプロパティを利用したものなど、どれも挑戦的なテクニック。

Fancy Image Decorations シリーズ３部作で、Single Element Magic、Masks and Advanced Hover Effects、Outlines and Complex Animationsから構成されています。

See the Pen
CSS Only hover effect by Temani Afif (@t_afif)
on CodePen.

See the Pen
Hover effect frame animation by Temani Afif (@t_afif)
on CodePen.

 

SVGで動物を描く

ゴリラやライオン、ホワイトタイガーなどの希少動物をSVGのみで描いたコレクションSVG Animals。

SVG Animals

 

CSS Gridをつかったコンテンツ幅を超えるレイアウト

CSS Gridで各領域を、名前を使って設定する、シンプルでわかりやすいテクニック Layout Breakouts with CSS Grid。

コンテンツ幅を柔軟に設定でき、よりダイナミックな画像の表示などにもおすすめ。

See the Pen
Layout Breakouts with CSS Grid by Ryan Mulligan (@hexagoncircle)
on CodePen.

 

超立体的な影のつくり方

box-shadow付きで回転させることで、奥行き感のある影ができ、リアルな3D回転を表現できる Animating Box-Shadow Makes Things Look 3D。

コピペで使えるオンラインツールや、定番の影の付け方も知っておくと便利。

See the Pen
Animating Box-Shadow Makes Things Look 3D by Andrew (@walpolea)
on CodePen.

 

:notをつかったフォーカス型CSSギャラリー

ホバーした要素以外、コンテナ内のすべての要素にスタイルを追加し、非表示にするCSSテクニックA Pure CSS Gallery Focus Effect with :not。

:notを使うことで、たった一行のCSSで解決です。

See the Pen
2D How to add styles to all siblings but not the hovered one – yet another pure-CSS way by gonciarzkrzysztof (@gonciarzkrzysztof)
on CodePen.

 

重なり合う棒グラフ

2つの異なるデータを１つの図として視覚化する、Overlapingスタイル。

たとえば、前年比とデータを比較したり、目標金額と達成した金額などを、知りたいときに便利な Overlapping Bar Charts。

See the Pen
Overlapping Bar Chart by Saleh-Mubashar (@saleh-mubashar)
on CodePen.

 

JS不要のモーダル表示

この便利な CSS 疑似セレクターを使用すると、モーダル要素を選択でき、JavaScriptが不要となる新テクニック Is it :modal?。

See the Pen
Modal vs Non-modal Dialog by web.dev (@web-dot-dev)
on CodePen.

 

あらゆるツールチップのつくり方

Building a tooltip componentでは、ダークモードにも対応した、アクセシブルなツールチップの作成方法が、デモと一緒に公開されています。

 

min(), max(), clamp() をつかった実用サンプル集

CSSのmin()、max()、clamp()をつかった、便利な小技テクを紹介したUse cases for CSS comparison functions。

カンバスサイズに応じて変化するヒーローイメージ（デモ）や、ダイナミックに縦横に変化する区切り線（デモ）、デバイスに応じてカードの角丸を切り替える方法など。

Use cases for CSS comparison functions

 

CSS属性セレクターの有効活用

CSSの属性セレクター（Attribute selector）を活用した、より手軽なスタリングテクニック The wasted potential of CSS attribute selectors。

 

キレイに整う、たった100バイトのCSS

限りなくコードを削り、ある程度どんな環境でも、見栄えよいレイアウトを表現した、100バイトのCSS。

もともと58バイトでしたが、余白スペースなどを強化したのが、こちらの100バイト版。

See the Pen
58 bytes of CSS to look great nearly everywhere by Joey Burzynski (@JoeyBurzynski)
on CodePen.

 

CSSの進化はとまらない

ここでは、実践でも活用できる、最新のCSSテクニックや書き方をご紹介しました。

前回のテクニック集も、合わせてチェックしてみてはいかがでしょう。

新しいCSSの書き方 最新テクニック20選まとめ実用サンプルコード付き

Related