これだけは知っておきたい最新モダンCSSの書き方（2024年夏版）

このブックマーク可能なガイドの目的は、最近CSSに追加されたばかりの新機能や使い方を分かりやすくまとめることです。

「CSSって、こんなこともできるの?!」と思ってしまうほど、多くの人が知らない新しいテクニックが中心です。

また、たとえ知っていたとしてもよく理解できておらず、「それって何?」「なんで気にする必要があるの？」「サンプルコードがあると助かるんだけど、」そんな人におすすめしたい記事となっています。

周りがあっと驚くテクニックを習得して、ウェブデザインでできる表現の幅をぐっと広げましょう。

これだけは知っておきたい最新モダンCSS（2024年春版）

最近CSSに追加された新機能のリストを提供するブックマーク可能なガイド。このリストに明確な基準はないが、すべてかなり新しいものであり、多くの人がこれらのことを知らないと思うものをピックアップ。

参考記事: What You Need to Know about Modern CSS (Spring 2024 Edition) – Frontend Masters Boost

CSSコンテナクエリのインタラクティブガイド

コンテナ・クエリーが解決する問題、その仕組み、そしてワークフローで今日どのように使えるのかサンプルデモといっしょに詳しく解説した良記事。

参考記事: An Interactive Guide to CSS Container Queries

CSS sroll()とview()によるスクロール駆動アニメーション実践編

CSSだけでナビゲーションバーの影を切り替えたり、画像を表示したり、カルーセル要素をリンクしたりするスクロール駆動アニメーションの使い方を基本から学ぶ実用向けチュートリアル。

参考記事: A Practical Introduction to Scroll-Driven Animations with CSS scroll() and view() | Codrops

CSS :has()のインタラクティブガイド

CSSで要素の子孫に基づいてスタイルを設定できるCSSの:has()プロパティの実践的な使い方と問題点まですべて網羅した詳細ガイド。

参考記事: CSS :has() Interactive Guide

CSS Nestingの具体的な使い方と使用例

主要ブラウザでサポートされたCSSネスティング。CSSをより書きやすくする大きな変化を体験するガイド。

参考記事: CSS Nesting

CSSコンテナクエリをはじめよう

コンテナクエリはすべての主要ブラウザでサポートされています。しかし、コンテナクエリとは何なのでしょうか？また、より堅牢で柔軟なレイアウトを構築するために、コンテナクエリをどのように使えばよいのでしょうか？メディアクエリはまだ必要なのでしょうか？検証してみましょう。

参考記事: Getting started with CSS container queries | MDN Blog

より適切なターゲットサイズのCSS設定

ボタン、リンク、カードなどのクリック可能なUI要素において、アクションのターゲットサイズが小さいと、ユーザーはクリックしにくくなりますし、間違って隣のアクション要素をクリックしてしまうかもしれません。

参考記事: Designing better target sizes

1行でできる最新CSSアップグレード集

アプリケーションのCSSを改善するには、1行のアップグレードや機能強化が必要な場合も。プロジェクトに取り入れるべき12のプロパティについて学び、JavaScriptを削除し、ユーザーエクスペリエンスを簡単に向上させる方法を学びます。

参考記事: 12 Modern CSS One-Line Upgrades | Modern CSS Solutions

CSS アンカーポジショニングAPIが登場

「アンカー」と呼ばれる他の要素に対してネイティブに要素を配置できるため、ウェブ開発が大きく変わるかも。現在はChromeとEdgeに対応、FirefoxとSafariは非対応となっています。

参考記事: CSS アンカー ポジショニング API のご紹介  |  Blog  |  Chrome for Developers

時間ベースのCSSアニメーション

CSSは現在、特にmod()、round()、三角関数など、十分な数学関数をサポートしたことで、キーフレームの代わりに時間刻みでCSSアニメーションができるように。

参考記事: Time-based CSS Animations

CSSメディアクエリの重要性について

ここ数年でリリースされた最新のCSS機能の多くは、特定の条件を満たしたときに適用される「よりスマートな」スタイルを記述するように設計されており、その多くはレスポンシブデザインに直接関係しています。

メディアクエリがレスポンシブレイアウトにおいて依然として重要な役割を担っている理由を説明しています。

参考記事: Beyond CSS Media Queries — Smashing Magazine

CSS変数の代わりにカスタム@propertyが必要なときとは？

スタムプロパティが変数よりも適していることを示す例を紹介しながら、カスタムプロパティが複雑で洗練されたアニメーションをデザインする上で、より大きな自由度と柔軟性を提供することを紹介しています。

参考記事: The Times You Need A Custom @property Instead Of A CSS Variable — Smashing Magazine

CSSスクロール駆動アニメーションによる進行状況インジケーター

view()アニメーションと@propertyで宣言されたCSSカスタムプロパティを組み合わせて、ページの各セクションの「現在表示中」とセクションベースの進捗インジケータを作成します。

たとえば長いドキュメント・ページで、ユーザーが今どのセクションをどこまで読んでいるのかを確認するのに便利です。

参考記事: Using CSS Scroll-Driven Animations for Section-Based Scroll Progress Indicators – Frontend Masters Boost

CSSシェイプをつくるモダンガイド

可能な限り小さく柔軟なコードで一般的なシェイプを作成するためのさまざまなテクニックを紹介したチュートリアル。

参考記事: The Modern Guide For Making CSS Shapes — Smashing Magazine

HTML・CSSで実装するかわいいフキダシのアイデア

見出しなどのテキストを目立たせたいときに便利なフキダシ（吹き出し）。 この記事では、HTMLとCSSだけで簡単に実装できる、シンプルなデザインのフキダシ17個がスニペット付きで紹介されています。

参考記事: HTML・CSSで実装するかわいいフキダシのアイデア – ICS MEDIA

CSSによる無限スクロール

HTMLの<marquee>要素を覚えていますか？非推奨なので、ある種の水平自動スクロール機能が必要なときに使うようなものではありません。そこでCSSのみでスタイリングできる方法が紹介されています。

参考記事: Infinite-Scrolling Logos In Flat HTML And Pure CSS — Smashing Magazine

CSS Gridを使用して楽譜を印刷する方法

ミュージシャンが汗だくになりながら、スマホの小さな画面上でA4のPDF楽譜をピンチズームしようとしているのを何度も目撃した著者が、滑らかで応答性の高い楽譜を考えました。

参考記事: Printing music with CSS Grid – Blog – Cruncher – web development agency in Lausanne

CSSアニメーションで絵文字を動かす方法

絵文字にアニメーションを加えることで、ベルが鳴っているようなフェクトも自由に表現できるミニチュートリアル。

参考記事: Animation can make bell much more than emoji!

CSS clamp()関数をつかった流体タイポグラフィー

さまざまなデバイスサイズに対応する、テキストサイズが自動で拡大縮小するCSSテクニックを紹介しています。

参考記事: Creating Fluid Typography with the CSS clamp() Function — SitePoint

ページセクションの背景を2色に分割する方法

セクションの背景半分にだけ色を付けたい、というときに便利なグラデーションを使ったやり方と、疑似要素をつかった2つのテクニックをご紹介。

参考記事: 2 Ways to Make Half-Colored Background Page Sections | Envato Tuts+

border-imageをつかってグラデーションを適用、オーバーレイする

画像の上にテキストを配置したいとき、画像の一部を暗くする場合に特に便利な、CSS1行で解決する小技テクニック。

参考記事: Quick Trick: Using border-image to Apply and Overlay Gradient. – Frontend Masters Boost

CSSの:has()とHTMLの<select>を組み合わせ、優れた条件付きスタイリングを実現する

:has() を使用して、<select> 要素内の特定の <option> がユーザーによって選択されたときに条件付きでスタイルを適用する方法と、:has() を :not() などの他の擬似クラスと連鎖させることでさらに多くの条件付きスタイリング機能を得る方法をご紹介。

参考記事: Combining CSS :has() And HTML  For Greater Conditional Styling — Smashing Magazine

CSSでアニメーション付きグラデーション文字をつくる

CSSを使用してグラデーションや画像にアニメーションを追加するお手軽テクニック。一緒にボーダーアニメーションをつかった5つのテクニックも参考にどうぞ。

参考記事: Quick Tip: How to Animate Text Gradients and Patterns in CSS — SitePoint

CSS Gridで再利用可能なグリッドシステムを構築する方法

さまざまなウェブサイトのレイアウトをより速く簡単に構築できる、CSS Gridをつかった再利用可能なグリッドシステムの作り方を学びます。

参考記事: How to build a reusable grid system with CSS grid | Go Make Things

CSS @propertyによるクリップパスアニメーション

clip pathや@property、さらにはcontainer unitsを使って、視覚的に楽しいスクロールアニメーションを作成するテクニックを紹介します。

参考記事: Animating clip paths on scroll with @property in CSS | utilitybend

UIデザイナーがFlexboxとCSS Gridを理解しておくべき理由

デザイナーとデベロッパーがレイアウト、特にグリッドについて議論する際に異なる意見を持っていることは、コラボレーションにおいて多くの誤解を生むことになります。

会話とコラボレーションのための共通の土台を見つけるために、お互いのツールとその限界を理解することについてまとめた記事。

参考記事: Why UI designers should understand Flexbox and CSS Grid | by Christine Vallaure | UX Collective

画像のスライド遷移アニメーション

1つの<img>に3D効果とスライディング・トランジションを適用する、CSSを駆使した目からウロコのテクニックが紹介されています。

参考記事: Sliding 3D Image Frames In CSS — Smashing Magazine

文章の折り返し指定のCSS最新版

国内のウェブ制作において「開発者が考えることが少なくてよくなる」安全なCSS指定が紹介されています。

参考記事: 文章の折り返し指定のCSS最新版 – ICS MEDIA

CSS変数を使ったダイナミックなスタイリング方法

CSS変数の基本を理解しながら、今日から実際にでどのように使えるかを学びます。

参考記事: Dynamic Styling with CSS Variables – Let&s build UI

CSS黄金テキストエフェクトの作り方

CSSグラデーションとテキストシャドウを使用して、CSSのみで表現できる黄金テキストの作り方を紹介した記事。

参考記事: Gold Text Effect with CSS

View Transition APIの使い方

まるでアプリのような「ネイティブ感」のある心地よいアニメーションを実現できるView Trnsition APIの使い方を詳しく解説。Astroをつかったお手軽な実装方法から、そのままでも動作するデモといっしょにどうぞ。

参考記事: The View Transitions API – Frontend Masters Boost

CSSでクールなテキストエフェクトを設定する5つの方法

映画『スパイダーバース』のグラフィックやキャラクターにインスパイアされたCSSでテキストをスタイルする方法を学びます。魅力的なビジュアルや興味深いキャラクターはたくさんありますが、今回は5つのキャラクターを取り上げます。

参考記事: 5 ways to style text with CSS inspired by the Spider-verse – LogRocket Blog

SVGローディングスピナーの作り方

実用的でスケーラブルであり、ユーザーエクスペリエンスを向上させることができるローディングスピナー。このガイドでは、stroke-dasharray や stroke-dashoffset のようないくつかの単純な SVG 属性を使って、どのように実装できるかを説明します。

参考記事: Making SVG Loading Spinners: An Interactive Guide | fffuel

紙に印刷するためのCSS設定テクニック

この記事では、ウェブページが印刷されたときにどのように見えるかをコントロールするCSSの基本と、著者が学んだいくつかのヒントについて説明した記事。サンプルHTML付き。

参考記事: CSS for printing to paper

CSSのcolor-mix()関数でカラーパレットを作る方法

比較的新しいCSSのcolor-mix()関数をつかって生成できるカラーパレットの作り方を詳しく紹介した記事。

参考記事: Creating color palettes with the CSS color-mix() function | MDN Blog

<table>をうまくスタイリングするコツ

<table＞要素を構造化して、柔軟にスタイリングを設定する方法を紹介した記事。最後にすべてのテニックをまとめたデモスニペットあり。

参考記事: A Guide to Styling Tables – DEV Community

ポインタに追従する光るホバーエフェクトの作り方

2023年のベストCodepenの中に、Glowy Hover Effectがありました。今回はその仕組みについてステップバイステップで詳しく見ていきます。

参考記事: How To Build a Glowing Hover Effect that Follows the Pointer – Frontend Masters Boost

CSS透明グラデーションでコンテンツのフェードアウトを再現

ユーザーエクスペリエンスを崩さずに見た目もスッキリとした、コンテンツ下部が少しずつ半透明にフェードアウトするテクニックをご紹介。

参考記事: My take on fading content using transparent gradients in CSS | Polypane