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

新しい CSS を学ぶメリットとは？新しい CSS が日々生まれている

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

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

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

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

テキストのグラデーションを画像なしで行いたい background-clip: text;

Apple のウェブサイトのグラデーション文字 https://www.apple.com/ipad-pro/

Facebook messenger のグラデーション文字 https://www.messenger.com/

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

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

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

すりガラス表現 backdrop-filter

すりガラス表現をしたい

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

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

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

@media の長い記法をやめたい @media (600px <= width < 1200px) {}

/* 画面サイズ 600px 未満 */ @media (max-width: 599px) { }
/* 画面サイズ 600px 以上 1200px 未満 */ @media (min-width: 601px) and (max-width: 1200px) { } /* 画面サイズ 1200px 以上 */ @media (min-width: 1201px) { } 従来 min-width , max-width , and を使っていた

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) { } 現代: < や <= が使える

記号説明 <= 以下 < 未満 >= 以上 > より大きい
現代: 「未満」や「より大きい」の表現が可能

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

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

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

アスペクト比とは

.box::before { content: ""; display: block; padding-top: calc(100% * 9
/ 16); /* 56.25% */ } @media (width <= 500px) { .box::before { padding-top: calc(100% * 3 / 4); } } 従来: padding ハック

.item { aspect-ratio: 16 / 9; } @media (width <=
500px) { .item { aspect-ratio: 4 / 3; } } 現在: aspect-ratio プロパティ

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

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

const carousel = document.querySelector(".carousel"); const items = carousel.querySelectorAll(".item"); const currentIndex
= 0; carousel.addEventListener("scroll", (event) => { // スクロール位置を計算し、アイテムにスナップさせる }); 従来: JavaScript を使っていた

.container { /* x 方向で、必ずスナップポイントに揃うように */ scroll-snap-type: x mandatory; }
.container .item { /* スナップ位置は、開始位置 */ scroll-snap-align: start; } 現在: scroll-snap プロパティを使える

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

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

2017年4月生まれ。すぐ人にゴロゴロとなつく甘えん坊で、寂しがりや。運動は得意ではないけど、いつも高いところに登りたがる。 Profile うにちゃんについて PROFILE GALLERY BLOG アンカーリンクでスムーススクロール
右上のリンクをクリックしてみてください

<head> <script src="jquery-3.6.0.js"></script> <script src="smooth-scroll.min.js"></script> </head> //
JavaScript new SmoothScroll('a[href*="#"]'); 従来: JavaScript で実装していた

/* CSS */ html { scroll-behavior: smooth; } 現在: scroll-behavior
で実装できる

header { height: 60px; } section { /* 停止位置は60px */
scroll-margin-top: 60px; } scroll-margin-top でスクロール位置調整

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

02 今後使えるようになる CSS

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

メールアドレスの有効・無効でラベルを変えるデモ Firefox以外でご覧ください

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

input の状態が変更されるイベントをチェック form および label のスタイルを JavaScript で更新従来: JavaScript
を使っていた

.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 ミライ: :has() を使う

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

:has() のサポート状況 https://caniuse.com/css-has

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

/* Sass ファイル */ .container { .child { color: red;
} } 従来: Sass を使うしかなかった

/* CSS ファイル */ .container { .child { color: red;
} } ミライ: 「CSS」で実現できる

container { .child1, .child2 { color: red; } } .link
{ &:hover, &:active { color: red; } } CSS ネストは、Sass のネストと「ほぼ」同じ

.box { color: blue; @media (width <= 800px) { color:
red; } } とくに、 @media のネストが便利

ネストのサポート状況 https://caniuse.com/css-nesting

PostCSS を使えば、今すぐ全ブラウザで使える https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-nesting

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

レンガ状のレイアウト CSS Grid の masonry

pinterest みたいなレイアウトを作りたい https://www.pinterest.jp/

:root { --gap: 24px; } .container { /* カラム数成り行き、基本的に300px の横幅
*/ columns: auto 300px; /* 列間の隙間 */ column-gap: var(--gap); } .item { /* 行間の隙間 */ margin-bottom: var(--gap); } 従来: column で（一応）実装できる

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

masonry のサポート状況 https://caniuse.com/mdn-css_properties_grid-template-rows_masonry

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

03 まとめ

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

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

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

@tonkotsuboy_com

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

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

More Decks by tonkotsuboy_com

Other Decks in Programming

Featured

Transcript