鹿野さんに聞く！2023年モダンCSSの最新トレンド https://findy.connpass.com/event/278449/ で発表した資料です。
各リンクはこちらから参照 https://tonkotsuboy.github.io/20230413_findy_css/
View Slide
新しい 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/yLRYQeWDemo
すりガラス表現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/MWPKWrWDemo
@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/JjmYWmwDemo
レスポンシブ対応で、画像の縦横比を変えたい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プロパティ
スクロール位置をぴたっと止めるScroll Snap
My Gallery© 2022 My Galleryカルーセルで、スクロール位置をピタッと止めたい横にスクロールしてみてください
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/jOeEXrwDemo
アンカーリンクでスムーススクロールがしたいscroll-behavior
2017年4月生まれ。すぐ人にゴロゴロとなつく甘えん坊で、寂しがりや。運動は得意ではないけど、いつも高いところに登りたがる。ProfileうにちゃんについてPROFILE GALLERY BLOGアンカーリンクでスムーススクロール右上のリンクをクリックしてみてください
// JavaScriptnew 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/zYmvJMaDemo
02今後使えるようになる CSS
子要素の状態に応じて、親要素のスタイルを変えたい:has()
メールアドレスの有効・無効でラベルを変えるデモFirefox以外でご覧ください
input は有効（ :valid）か無効（ :invalid）になるそれに応じて、 formや labelのスタイルを変えたいメールアドレスメールアドレスの有効・無効でラベルを変えるデモ
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/rNqxaQJDemo
: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/ExRbPgVDemo
レンガ状のレイアウト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/jOKJXEmDemo
03まとめ
テキストのグラデーションを画像なしに行う background-clip: textすりガラス表現 backdrop-filter@media で <や <=が使える画像の縦横比を変えたい aspect-ratioスクロール位置をピタッと止める scroll-snapページ内リンクをなめらかにスクロール scroll-behaviorいま全ブラウザで使えるモダン CSS
子要素に応じて親のスタイルを変えられる :has()CSS のネストレンガ状レイアウト CSS Grid の masonry今後使えるようになる CSS
新しい知識を取り入れて楽しくラクにウェブ制作をしましょう
@tonkotsuboy_com
tonkotsuboy_com
mkeeda
fornewid
akitotsukahara
joker1007
vrallev
psj59129
skanehira
gmvalentino8
miyabigouji
bells17
mascii
chatwork_hr
addyosmani
brianwarren
aki_iinuma
zakiwarfel
jponch
afnizarnur
paulrobertlloyd
chriscoyier
eileencodes
sachag
morganepeng
speakerdeck