2023年モダンCSSの最新トレンド

新しい CSS が日々生まれている

新しい CSS を学ぶメリットとは？

長い JavaScript で実現していたものが、
短い CSS で済む

読みやすいコードになり、
開発者体験（DX）が向上する

DX の向上により、
制作物の品質が向上する

01

いま全ブラウザで使えるモダン CSS

テキストのグラデーションを
画像なしで行いたい

background-clip: text;

Apple のウェブサイトのグラデーション文字

center

Facebook messenger のグラデーション文字

center border

従来: Illustrator 等で画像を作っていた

center

現代: background-text で指定できる

p {
  /* 背景グラデーション */
  background: linear-gradient(-45deg, #2af598, #009efd);
  /* テキストの形に背景を切り抜く */
  -webkit-background-clip: text;
  background-clip: text;
  /* テキストの色を透明にする */
  color: transparent;
}

Demo

https://codepen.io/tonkotsuboy/pen/yLRYQeW

すりガラス表現

backdrop-filter

すりガラス表現をしたい

center

従来: Photoshop 等で画像を作成していた

center

現代：backdrop-filterを使う

.box {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  background-color: rgba(255, 255, 255, 0.5);
}
  • 景色は透明か半透明にする
  • Safari のみベンダープレフィックス -webkit- が必要

Demo

https://codepen.io/tonkotsuboy/pen/MWPKWrW

@media の 長い記法をやめたい

@media (600px <= width < 1200px) {}

従来 min-width, max-width, and を使っていた

/* 画面サイズ 600px 未満 */
@media (max-width: 599px) {
}

/* 画面サイズ 600px 以上 1200px 未満 */
@media (min-width: 601px) and (max-width: 1200px) {
}

/* 画面サイズ 1200px 以上 */
@media (min-width: 1201px) {
}

従来: 「未満」や「より大きい」の表現ができない

  • min-width: ○○px 以上
  • max-width: ○○px 以下

従来: 「未満」や「より大きい」の表現ができない

▼ 600px 以上と未満でスタイルを切り替える場合の回避策

@media (max-width: 599.99px) {
  /* 600px 未満のスタイル */
}

@media (min-width: 600px) {
  /* 600px 以上のスタイル */
}

現代: < や <= が使える

/* 画面サイズ 600px 未満 */
@media (width < 600px) {
}

/* 画面サイズ 600px 以上 1200px 未満 */
@media (600px <= width < 1200px) {
}

/* 画面サイズ 1200px 以上 */
@media (1200px <= width) {
}

現代: 「未満」や「より大きい」の表現が可能

記号 説明
<= 以下
< 未満
>= 以上
> より大きい

Demo

https://codepen.io/tonkotsuboy/pen/JjmYWmw

レスポンシブ対応で、
画像の縦横比を変えたい

aspect-ratio

いろんなアスペクト比で画像を表示したい

center

アスペクト比とは

従来: padding ハック

.box::before {
  content: "";
  display: block;
  padding-top: calc(100% * 9 / 16);
  /* 56.25% */
}

@media (width <= 500px) {
  .box::before {
    padding-top: calc(100% * 3 / 4);
  }
}

現在: aspect-ratio プロパティ

.item {
  aspect-ratio: 16 / 9;
}

@media (width <= 500px) {
  .item {
    aspect-ratio: 4 / 3;
  }
}

Demo

https://codepen.io/tonkotsuboy/pen/JjmYWmw

スクロール位置をぴたっと止める

Scroll Snap

カルーセルで、スクロール位置をピタッと止めたい

横にスクロールしてみてください

従来: JavaScript を使っていた

const carousel = document.querySelector(".carousel");
const items = carousel.querySelectorAll(".item");
const currentIndex = 0;

carousel.addEventListener("scroll", (event) => {
  // スクロール位置を計算し、アイテムにスナップさせる
});

現在: scroll-snap プロパティを使える

.container {
  /* x方向で、必ずスナップポイントに揃うように */
  scroll-snap-type: x mandatory;
}

.container .item {
  /* スナップ位置は、開始位置 */
  scroll-snap-align: start;
}

Demo

https://codepen.io/tonkotsuboy/pen/jOeEXrw

アンカーリンクで
スムーススクロールがしたい

scroll-behavior

アンカーリンクでスムーススクロール

右上のリンクをクリックしてみてください

従来: JavaScript で実装していた

<!-- HTML -->
<head>
  <script src="jquery-3.6.0.js"></script>
  <script src="smooth-scroll.min.js"></script>
</head>

// JavaScript
new SmoothScroll('a[href*="#"]');

現在: scroll-behavior で実装できる

/* CSS */
html {
  scroll-behavior: smooth;
}

scroll-margin-top でスクロール位置調整

header {
  height: 60px;
}

section {
  /* 停止位置は60px  */
  scroll-margin-top: 60px;
}

Demo

https://codepen.io/tonkotsuboy/pen/zYmvJMa

02

今後使えるようになる CSS

子要素の状態に応じて、
親要素のスタイルを変えたい

:has()

メールアドレスの有効・無効でラベルを変えるデモ

Firefox以外でご覧ください

メールアドレスの有効・無効でラベルを変えるデモ

  • input は有効（:valid）か無効（:invalid）になる
  • それに応じて、formやlabelのスタイルを変えたい
<!-- html -->
<form class="form">
  <label>メールアドレス</label>
  <input type="email" />
</form>

従来: JavaScript を使っていた

  • input の状態が変更されるイベントをチェック
  • form および labelのスタイルを JavaScript で更新

ミライ: :has() を使う

.form:has(input:valid) {
  color: rgb(76, 175, 8); /* テキストを緑 */
  background-color: rgba(76, 175, 8, 0.1); /* 背景を薄緑 */
}

.form:has(input:invalid) {
  color: rgb(217, 4, 41); /* テキストを赤色 */
  background-color: rgba(217, 4, 41, 0.1); /* 背景を薄赤色 */
}

※ .form:has(input:invalid:not(:placeholder-shown, :focus))が better

Demo

https://codepen.io/tonkotsuboy/pen/rNqxaQJ

:has() のサポート状況

center_with_text

Sass ではなく、
CSS でネスト（入れ子）にする

従来: Sass を使うしかなかった

/* Sassファイル */
.container {
  .child {
    color: red;
  }
}

ミライ: 「CSS」で実現できる

/* CSSファイル */
.container {
  .child {
    color: red;
  }
}

CSS ネストは、Sass のネストと「ほぼ」同じ

container {
  .child1,
  .child2 {
    color: red;
  }
}

.link {
  &:hover,
  &:active {
    color: red;
  }
}

とくに、 @media のネストが便利

.box {
  color: blue;

  @media (width <= 800px) {
    color: red;
  }
}

ネスト のサポート状況

center_with_text

PostCSS を使えば、今すぐ全ブラウザで使える

center_with_text

Demo

https://codepen.io/tonkotsuboy/pen/ExRbPgV

レンガ状のレイアウト

CSS Grid の masonry

pinterest みたいなレイアウトを作りたい

center_with_text

従来: columnで（一応）実装できる

:root {
  --gap: 24px;
}

.container {
  /* カラム数成り行き、基本的に300pxの横幅 */
  columns: auto 300px;
  /* 列間の隙間 */
  column-gap: var(--gap);
}

.item {
  /* 行間の隙間 */
  margin-bottom: var(--gap);
}

ミライ： masonry を使う

.container {
  display: grid;
  /* 行のレイアウトとして「masonry」を指定する */
  grid-template-rows: masonry;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  /* 親へgapを指定するだけでOK */
  gap: 40px;
}

masonry のサポート状況

center_with_text

Demo

https://codepen.io/tonkotsuboy/pen/jOKJXEm

03

まとめ

いま全ブラウザで使えるモダン CSS

  • テキストのグラデーションを画像なしに行う background-clip: text
  • すりガラス表現 backdrop-filter
  • @media で < や <= が使える
  • 画像の縦横比を変えたい aspect-ratio
  • スクロール位置をピタッと止める scroll-snap
  • ページ内リンクをなめらかにスクロール scroll-behavior

今後使えるようになる CSS

  • 子要素に応じて親のスタイルを変えられる :has()
  • CSS のネスト
  • レンガ状レイアウト CSS Grid の masonry

新しい知識を取り入れて
楽しくラクにウェブ制作をしましょう

@tonkotsuboy_com

カード型のコンテンツをレンガ状に敷き詰めるというセリフ