知っておくと便利！表現が広がる最新CSSテクニックや書き方30選

2022年は、CSSにとって過去最高の年になりました。

安定版ブラウザで、多くの新しいCSSプロパティやセレクタなどが対応となり、これまでは実装にJavaScriptなどが必要だったものも、CSSのみで表現できるようになっています。

ここでは、知っておくと便利な最新CSSテクニックや書き方をまとめてご紹介します。

「CSSって、こんなこともできるの?!」と思わず納得してしまう、驚きテクニックを習得して、ウェブデザインでできる表現の幅をぐっと広げましょう。

コンテンツ目次

• 1. コンテナクエリ @container が全ブラウザ対応
• 2. CSSスタイルクエリの基本と具体サンプル例
• 3. グラデーション付き影のつくり方
• 4. どんな背景でも美しい影のつくり方
• 5. リンク/ボタン/フォームをより良くするHTML・CSS 17選
• 6. MasonryレイアウトがCSSで表現可能に
• 7. あったら嬉しいCSSスタイリングの夢リスト
• 8. CSS Gridで雑誌風レイアウトを作成する方法
• 9. CSS Gridをアニメートする方法
• 10. 円から頭が突き出すCSSアニメーション
• 11. CSS Flexboxで要素を左右の両端揃えに
• 12. サイズの異なるロゴをきれいに並べる
• 13. 2023年以降のレスポンシブWebデザイン完全ガイド
• 14. :is()と:where()と:has()の違いを詳しく解説
• 15. :has()でCSSスキルをレベルアップ
• 16. :has()の使い方と具体例まとめ
• 17. :has()で子の数に応じて親要素をスタイリングする方法
• 18. CSSで3D表現をマスター
• 19. 折りたたみできるツリー構造のつくり方
• 20. CSS Subgridの使い方まとめ
• 21. 歪んだ強調ハイライト
• 22. 円形型の回転スライダーのつくり方
• 23. ポラロイド写真を重ねてめくるCSSスライダー
• 24. CSS無限3Dスライダー
• 25. 記事用レイアウトをCSSでスタリングする
• 26. マウスホバーで切り替わる、アニメーション付き背景ストライプ
• 27. ウェブサイトにふわふわとした雪を降らすアニメーション
• 28. CSSの新しいビューポート単位を知ろう
• 29. グラデーションのホバーエフェクト付きボタンのつくり方
• 30. テレビの砂嵐画面を再現する方法

 

コンテナクエリ @container が全ブラウザ対応

これまでレスポンシブ対応のため、ウィンドウ幅を基準とする@mediaをつかったやり方に代わり、新しく登場したコンテナクエリ@containerが、すべてのブラウザで対応となりました。

コンテナクエリについては、こちらの記事で詳しく解説されています、ご参考までに。

See the Pen
Untitled by web.dev (@web-dot-dev)
on CodePen.

 

CSSスタイルクエリの基本と具体サンプル例

コンテナクエリには、親要素のスタイルに応じて子要素のスタイルを設定できる、スタイルクエリ機能が含まれています。

CSS Style Queriesでは、スタイルクエリの基本から、問題点、さざままな用途を具体的なサンプルをまとめて紹介しています。

 

グラデーション付き影のつくり方

背景が透明だった場合でも対応できる、グラデーション付きCSSドロップシャドウのスタイリングを、詳しく解説したDifferent Ways to Get CSS Gradient Shadows。

時間がないひとは、手軽にグラデーション影を作成できる、ジェネレーターツールを活用してみましょう。

See the Pen
Complex border radius configuration by Temani Afif (@t_afif)
on CodePen.

 

美しすぎる影のつくり方

Beautiful CSS Shadowsでは、box-shadowプロパティを複数適用し、どんな背景カラーでも見栄えの良い、CSSシャドウを作成します。

See the Pen
CSS Nugget: great-looking shadows in 3 steps by CodyHouse (@codyhouse)
on CodePen.

 

リンク/ボタン/フォームをより良くするHTML・CSS 17選

見た目だけでなく、ユーザーの使い勝手にも気をつけたコーディングテクニックについて解説の「リンク/ボタン/フォームをより良くするHTML・CSS 17選」。

ユーザーが特に使い心地を感じやすいインタラクション部分で、シンプルなHTML・CSSだけでより良くできるものに絞って紹介されており、NG例と比較できわかりやすい。

 

MasonryレイアウトがCSSで表現可能に

長年にわたり、JavaScriptベースのスタイリングしていた、石積みレンガ風のMasonryレイアウトが、CSSのみで実現できるようになる　Native CSS masonry layout。

grid-template-rows: masonryとgrid-template-columns: masonryを記述するだけで表現できますが、現在はFixfoxとSafariブラウザのみ対応。

See the Pen
2023.02.09 – CSS Grid: masonry layout test by Pawel Grzybek (@pawelgrzybek)
on CodePen.

 

あったら嬉しいCSSスタイリングの夢リスト

CSSで実現されたらうれしいスタイリングについてまとめた 2023 CSS Wishilsts。

有名エンジニアたちが公開したリストをまとめた、一覧版として確認できます。

 

CSS Gridで雑誌風レイアウトを作成する方法

CSS Gridをつかって、まるで手書きしたようなレイアウトを表現する How To Build A Magazine Layout With CSS Grid Areas。

デスクトップ、モバイル表示にどちらも対応できる実践的なテクニックを学ぶことができます。

See the Pen
Untitled by Smashing Magazine (@smashingmag)
on CodePen.

 

CSS Gridをアニメートする方法

最近すべてのブラウザで対応となった、grid-template-rowsとgrid-template-columnsプロパティを活用し、動きのあるグリッドを作成できる Animating CSS Grid (How To + Examples)。

サイドバーやパネルなど、実践向けデモと一緒にどうぞ。

See the Pen
grid / :has + animated grid tracks (Safari only) by Michelle Barker (@michellebarker)
on CodePen.

 

円から頭が突き出すCSSアニメーション

アバターなどを表示した円から、頭が次出すようなユニークなアニメーションを表現できる A Fancy Hover Effect For Your Avatar。

ウェブサイトのアクセントにいかがでしょう。

See the Pen
Pop-up hover effect (featuring CSS developers) by Temani Afif (@t_afif)
on CodePen.

 

CSS Flexboxで要素を左右の両端揃えにする方法

ナビゲーションメニューをFlexboxでスタイリングするとき、margin: autoを使用することで、個々のアイテムを左右の両端揃えにすることができる Justify Space Between Individual Items in Flexbox。

 

サイズの異なるロゴをきれいに並べるCSSテクニック

object-fix: containを利用することで、幅や高さの異なるロゴをすっきり並べることができるCSSの小技テク。

🔥 Three CSS tips for working with inconsistently sized logos pic.twitter.com/OdELwCQ77X

— Wes Bos (@wesbos) November 29, 2022

 

2023年以降のレスポンシブWebデザイン完全ガイド

これからの新しいレスポンシブWebデザインを考察した The Guide To Responsive Design In 2023 and Beyond。

ユーザーの好みをチェックするメディアクエリや、メディアクエリを使わなくても流動的なレイアウトを実現できる方法など、実用的ですぐに使えるテクニック満載。

 

:is()と:where()と:has()の違いを詳しく解説

だらだらと冗長っぽくなりやすいCSSスタイリングを、簡潔に表現する方法を学ぶ Simpler CSS Selectors With :is()。

 

:has()でCSSスキルをレベルアップしよう

いままでJavaScriptなしでは実現できなかった:has()セレクタ。

:has()を他のセレクタと組み合わせる方法など、実践向けテクニックが網羅された Level Up Your CSS Skills With The :has() Selector。

See the Pen
Stateful multi-range selection groups with :has() by Smashing Magazine (@smashingmag)
on CodePen.

 

:has()の使い方と具体例まとめ

新しいCSSセレクタ:has()を使うことで、特定のアイテムの親要素を選択するなど、さまざまな使い方をまとめた CSS :has Parent Selector。

:has()で解決できる問題や仕組みを、いくつかの具体例と一緒に、利用できるポイントを学びます。

 

:has()で子の数に応じて親要素をスタイリングする方法

たとえば、子要素が3つ以下、5つの場合、7〜9の場合、10以上など、それぞれ異なるスタイルを親要素に適用できる Style a parent element based on its number of children using CSS :has()。

See the Pen
Styling parent elements based on the number of children with CSS :has() by Bramus (@bramus)
on CodePen.

 

CSSで3D表現をマスターしよう

CSSをつかって、立体的な3Dデザインを作成するときに、活用したいCSSセレクタや使い方を紹介した 3D in CSS。

 

折りたたみできるツリー構造のつくり方

情報をリスト形式に階層状にならべ、折りたたむこともでき、表示スペースの節約にもつながる Tree views in css。

 

CSS Subgridの使い方まとめ

grid-template-rowsとgrid-template-columnsで利用できる、新しいCSSセレクタsubgridが、ついに全ブラウザ対応。

CSS Subgridでは、これまでの使い方と比較しながら、実際の使い方を学ぶことができます。

See the Pen
Nested grid with subgrid by rachelandrew (@rachelandrew)
on CodePen.

 

歪んだ強調ハイライト

少しだけ斜めに歪んだ、これまでにないハイライト用スタイリングを提案する　A CSS Challenge: Skewed Highlight。

CSSのみで表現でき、複数行にまたがる文字テキストにも反映できます。デモはこちら。

 

円形型の回転スライダーのつくり方

くるくると回転しながら写真が切り替わる、あまり見かけないユニークな画像スライダーを、CSSのみで作成できる CSS Infinite and Circular Rotating Image Slider。

See the Pen
CSS only circular images slider by Temani Afif (@t_afif)
on CodePen.

 

ポラロイド写真を重ねてめくるCSSスライダー

CSS Infinite Slider Flipping Through Polaroid Imagesでは、見た目はシンプルで比較的簡単に表現できそうですが、実際は、、。

枚数に関係なく、写真をめくることができる完成ソースコードも全公開中。

See the Pen
Polaroid-like photo carousel by Temani Afif (@t_afif)
on CodePen.

 

CSS無限3Dスライダーのつくりかた

一見すると、回転する立方体に4つの画像が使用されているように見えますが、じつは合計6枚の画像を扱っています。

CSS Infinite 3D Slidersでは、無限に回転する、立体的なスライダーをCSSdで表現します。

画像スライダー三部作、ついに完結です。

See the Pen
3D CSS-only Slider by Temani Afif (@t_afif)
on CodePen.

 

記事用レイアウトをCSSでスタリングする方法

flexboxやCSS Grid、比較関数などを使いながら、どのようにレイアウトを構築すればよいでしょう。

Inside the mind of a frontend developer: Article layoutでは、さまざまな不安材料を解決しながら、つくり方を手順を追って詳しく解説しています。

 

マウスホバーで切り替わる、アニメーション付き背景ストライプ

背景をスタイリングするときに活用される、background-sizeプロパティの興味深いホバーエフェクトを表現する Animated Background Stripes That Transition on Hover。

See the Pen
Background stripes by Preethi Sam (@rpsthecoder)
on CodePen.

 

ウェブサイトにふわふわとした雪を降らすアニメーション

\

クリスマスシーズンになるとよく見かけるテクニックを、手軽に表現した How to Create Animated Snow on a Website (with CSS and JavaScript)。

See the Pen
Falling Snowflakes by Envato Tuts+ (@tutsplus)
on CodePen.

 

CSSの新しいビューポート単位を知ろう

CSSの新しいビューポート単位に、svhやlvh、dvhなどが加わり、すべてのブラウザで利用できるようになりました。

The large, small, and dynamic viewport unitsでは、具体的な使い方と注意点についてまとめられています。

 

グラデーションのホバーエフェクト付きボタンのつくり方

Adding a Gradient Hover Effect to Buttons with CSSでは、transitionプロパティを利用して、なめらかにグラデーションの色が変化するホバーエフェクトを作成します。

 

テレビの砂嵐画面を再現する方法

Making Static Noise From a Weird CSS Gradient Bugでは、ほんの数行のCSSコードを記述するだけで完成するスニペットが披露されています。

See the Pen
Old TV noise effect by Temani Afif (@t_afif)
on CodePen.

 

さいごに、。

いかがでしたでしょう、今回紹介したCSSの新テクニックを、もう一度おさらい。

• 1. コンテナクエリ @container が全ブラウザ対応
• 2. CSSスタイルクエリの基本と具体サンプル例
• 3. グラデーション付き影のつくり方
• 4. 美しすぎる影のつくり方
• 5. リンク/ボタン/フォームをより良くするHTML・CSS 17選
• 6. MasonryレイアウトがCSSで表現可能に
• 7. あったら嬉しいCSSスタイリングの夢リスト
• 8. CSS Gridで雑誌風レイアウトを作成する方法
• 9. CSS Gridをアニメートする方法
• 10. 円から頭が突き出すCSSアニメーション
• 11. CSS Flexboxで要素を左右の両端揃えに
• 12. サイズの異なるロゴをきれいに並べる
• 13. 2023年以降のレスポンシブWebデザイン完全ガイド
• 14. :is()と:where()と:has()の違いを詳しく解説
• 15. :has()でCSSスキルをレベルアップ
• 16. :has()の使い方と具体例まとめ
• 17. :has()で子の数に応じて親要素をスタイリングする方法
• 18. CSSで3D表現をマスター
• 19. 折りたたみできるツリー構造のつくり方
• 20. CSS Subgridの使い方まとめ
• 21. 歪んだ強調ハイライト
• 22. 円形型の回転スライダーのつくり方
• 23. ポラロイド写真を重ねてめくるCSSスライダー
• 24. CSS無限3Dスライダー
• 25. 記事用レイアウトをCSSでスタリングする
• 26. マウスホバーで切り替わる、アニメーション付き背景ストライプ
• 27. ウェブサイトにふわふわとした雪を降らすアニメーション
• 28. CSSの新しいビューポート単位を知ろう
• 29. グラデーションのホバーエフェクト付きボタンのつくり方
• 30. テレビの砂嵐画面を再現する方法

前回のCSSテクニックまとめから、およそ3ヶ月ぶりとなった今回。

ますます進化を続けるCSSの世界を、のぞいてみませんか。

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