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

この記事では、ウェブ制作で積極的に活用したい最新CSSテクニックを、実例サンプルコードと一緒にご紹介します。

新しいCSSプロパティにはじまり、これまではJavaScriptが必要だったデザインも、CSSのみで実現できるようになっています。

普段からCSSを使いこなしているベテランデザイナーさんにこそオススメしたい、CSSの進化を感じるテクニックが揃います。

コンテンツ目次

1. ついにCSSコンテナクエリ利用可能に
2. グリッドに名前をつけてレイアウトを視覚化する方法
3. 長いテキストを短く省略する方法
4. transformプロパティが独立してより使いやすく
5. くるりと回転するアニメーション文字の作り方
6. :hasプロパティでAppleのOSドックを再現
7. リスト形式の面白スタイリング
8. 水平方向にスクロールするカード型レイアウト
9. CSSでキラリと輝くホログラム風エフェクト
10. よりナチュラルな「ずらし」アニメーション
11. CSSボーダーアニメーション
12. CSSチェックボックスの意外な使い道７選
13. たった数行のCSSでできるシンプルなカルーセル
14. CSS Gridとカスタムシェイプによる面白レイアウトまとめ
15. グリッドレイアウトでズームイン
16. 無限にスクロールするマーキースタイルをCSSで再現
17. CSSによる3Dアニメーションテクニック
18. CSSで回る3Dピラミッドの作り方
19. 回転する円柱シリンダーアニメーション
20. 左右非対称に見える「カフェウォール錯視」

ついにCSSコンテナクエリ利用可能に

レスポンシブなウェブサイト制作を根本から変えると期待される、CSSコンテナクエリがついにGoogle Chrome 105でサポート、Safari 16も順次実装予定。

CSS container queries are finally hereでは、コンテナクエリの仕組み、使い方などを実例とともに紹介しています。

CSS Container Queriesをつかったタイムラインやカード型UIなど、実用的なレイアウトサンプルをまとめたlab.ishadeed.comも参考に。

グリッドに名前をつけてレイアウトを視覚化する方法

CSS Gridをつかってレイアウトを構築するとき、オンラインツールで一発コピペするのもありですが、grid-template-areasを使用することで、お好みの名前でグリッドアイテムを配置することができます。

Using Grid Named Areas to Visualize (and Reference) Your Layoutでは、ASCII法と呼ばれるこのレイアウトテクニックを詳しく解説。

長いテキストを短く省略する方法

短いコードで実装できる、有名なCSS小技テクニックのひとつ。

1行のテキストではtext-overflow: ellipsis;、複数行ではline-clampを利用するだけ。

グラデーションで文字を少しずつ消す新しい方法 Recreating MDN’s Truncated Text Effect も公開されています。

See the Pen
MDN’s cool truncation by kachibito (@kachibito)
on CodePen.

`transform`プロパティが独立してより使いやすく

これまでtransformプロパティはまとめて記述していましたが、translate、rotate、scaleという新しい個別プロパティで、より細かいカスタマイズが可能になりました。

具体的な使い方をまとめたFiner grained control over CSS transforms with individual transform properties。まずは以下のデモサンプルからどうぞ。

See the Pen
CSS Individual Transforms Example #2 (indiv transform properties) by web.dev (@web-dot-dev)
on CodePen.

くるりと回転するアニメーション文字の作り方

テキストを一文字ずつ分割することで、ねじれるようなツイストエフェクトを実現できるチュートリアルHow to Animate a “Twisting Text Effect” With CSS and JavaScript。CSSとほんの少しのJSを利用します。

CSSアニメーションツールも豊富に揃えています、一緒にいかがでしょう。

See the Pen
How to Animate Twisting Text With CSS and JavaScript by Envato Tuts+ (@tutsplus)
on CodePen.

`:has`プロパティでAppleのOSドックを再現

JSを利用せずにAppleのOSドックをデザインするCSSの小技。アップルの他にテスラやナイキなどのWebレイアウトもCSSで再現可能です。

CSS Tip! 🚀

You can select the previous siblings of an element with :has() to create cool hover effects like this OS dock🔥 No JS 😎

:root{–lerp-1:0.525;}
a:has(+a:hover){
–lerp:var(–lerp-1);
translate: 0 calc(var(–lerp) * -75%);
}

Demo link and explanation below! 👇 pic.twitter.com/hych5HYGhM

— Jhey 🔨🐻✨ (@jh3yy) August 24, 2022

クリエイティブなリスト形式のスタイリング

HTMLリストのあまり知られていないプロパティも含め解説、クリエイティブな使い方を学ぶCreative list styling。

タイムラインっぽいスタイリングから、

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

絵文字をつかったリストスタイルや、

See the Pen
Handwritten list with custom markers by web.dev (@web-dot-dev)
on CodePen.

途中でお知らせなど別コンテンツが挿入される、ランキング形式のスタイリングまでさまざま。

See the Pen
Reversed and split list with ::before by web.dev (@web-dot-dev)
on CodePen.

水平方向にスクロールするカード型レイアウト

ウェブサイトでもよく見かけるレイアウトをFlexboxとCSS Grid、２つの方法でスタイリングする2 Ways to Build a Scrolling Card UI。

See the Pen
Scrolling Card UI with CSS Grid by Envato Tuts+ (@tutsplus)
on CodePen.

CSSだけでキラリと輝くホログラム風エフェクトを表現する方法

までWebGLで再現したようなスクロールエフェクトを、mix-blend-modeをつかいレイヤー状に重ねて表現するHolograms, light-leaks and how to build CSS-only shaders.。角度を変えるとキラキラ七色に輝く、ホログラムっぽいデザインをCSSで再現します。

CSSのみでホログラムっぽいキラキラ感を表現できるCSSテクニックをご紹介