Slide 1
Slide 1 text
No content
Slide 2
Slide 2 text
CSSと猫が大好きです
@tonkotsuboy_com
鹿野 壮
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
1.
in 2. ブロックレイアウトでの align-content 3. backdrop-filter とbackground-clip: text 4. CSSだけでネスト 5. linear() 6. @property 7. @starting-style 本日の構成
in 2. ブロックレイアウトでの align-content 3. backdrop-filter とbackground-clip: text 4. CSSだけでネスト 5. linear() 6. @property 7. @starting-style 本日の構成
Slide 5
Slide 5 text
新しいCSSを学ぶメリットとは？
新しいCSSが日々生まれている
Slide 6
Slide 6 text
長いJavaScriptで実現していたものが、
短いCSSで済む
読みやすいコードになり、
開発者体験（DX）が向上する
バグが減り、制作物の品質が向上する
新しいCSSを学ぶメリット
Slide 7
Slide 7 text
01
2025年最新CSS実践テクニック
Slide 8
Slide 8 text
01
の中で区切り線を表示したい
in
in
Slide 9
Slide 9 text
Demo
Slide 10
Slide 10 text
HTML
北海道
青森県
岩手県
宮城県
秋田県
山形県
福島県
茨城県
栃木県
群馬県
沖縄県
【従来】 長い
は見づらい
Slide 11
Slide 11 text
HTML
山形県
福島県
埼玉県 千葉県 東京都 神奈川県
新潟県 富山県 【モダン】
で区切り線を入れられる
埼玉県 千葉県 東京都 神奈川県
新潟県 富山県 【モダン】
で区切り線を入れられる
Slide 12
Slide 12 text
HTML
青森県
岩手県
東京都
神奈川県
でグループ分けもできる（昔から）
Slide 13
Slide 13 text
ブラウザ バージョン リリース日
Chrome 119 2023年10月
Edge 119 2023年11月
Safari 17.0 2023年9月
Firefox 122 2024年1月
in のブラウザ対応状況 https://caniuse.com/mdn-html_elements_select_hr_in_select
in のブラウザ対応状況 https://caniuse.com/mdn-html_elements_select_hr_in_select
Slide 14
Slide 14 text
02
1行で垂直方向中央揃え。
FlexboxやGridなし
align-content
in ブロックレイアウト
Slide 15
Slide 15 text
Demo
Slide 16
Slide 16 text
複雑
CSS
.box {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
古い手法
CSS
.box {
display: table-cell;
vertical-align: middle;
}
FlexboxやGridが必要
CSS
.box {
display: flex;
align-items: center;
}
【従来】垂直方向の中央揃えは複雑だった
Slide 17
Slide 17 text
CSS
.box {
align-content: center;
}
start
- 上端揃え
center
- 中央揃え
end
- 下端揃え
※ space-between
は動作しない
【モダン】1行で垂直方向の中央揃え
Slide 18
Slide 18 text
ブラウザ バージョン リリース日
Chrome 123 2024年3月
Edge 123 2024年3月
Safari 17.4 2024年3月
Firefox 125 2024年4月
ブロックレイアウトでの align-content
対応状況
https://caniuse.com/mdn-css_properties_align-content_block_context
Slide 19
Slide 19 text
03
-webkit-が最近とれたシリーズ
background-clip: text
backdrop-filter
Slide 20
Slide 20 text
Demo
Slide 21
Slide 21 text
CSS
.gradient-text {
/* 背景グラデーション */
background:
linear-gradient(-45deg, #2af598, #009efd);
/* テキスト色を透明 */
color: transparent;
/* 背景を文字の形で切り抜く */
background-clip: text;
}
background-clip: text
で背景を文字の形で切り抜く
文字をグラデーションにする例
Slide 22
Slide 22 text
Before
CSS
.text {
-webkit-background-clip: text;
background-clip: text;
}
After
CSS
.text {
background-clip: text;
}
-webkit-
プレフィックスが不要に
Slide 23
Slide 23 text
ブラウザ バージョン リリース日
Chrome 120 2023年10月
Edge 120 2023年12月
Firefox・Safariは昔から
-webkit- なしで対応済み
background-clip: text
のブラウザ対応状況
-webkit-
プレフィックスが不要になったバージョン
https://caniuse.com/background-clip-text
Slide 24
Slide 24 text
CSS
.glass-card {
/* 背景を半透明に */
background:
rgba(255, 255, 255, 0.1);
/* 背景をぼかす */
backdrop-filter: blur(10px);
}
backdrop-filter
で背景にフィルターをかける
Slide 25
Slide 25 text
Before
CSS
.text {
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
After
CSS
.text {
backdrop-filter: blur(10px);
}
-webkit-
プレフィックスが不要に
Slide 26
Slide 26 text
関数 効果
blur()
ぼかし効果
brightness()
明度調整
contrast()
コントラスト調整
saturate()
彩度調整
backdrop-filter
のフィルター関数
Slide 27
Slide 27 text
ブラウザ バージョン リリース日
Safari 18.0 2024年9月
Chrome・Edge・Firefoxは昔から
-webkit- なしで対応済み
backdrop-filter
のブラウザ対応状況
-webkit-
プレフィックスが不要になったバージョン
https://caniuse.com/css-backdrop-filter
Slide 28
Slide 28 text
04
Sass ではなく、
CSS でネスト（入れ子）にする
Slide 29
Slide 29 text
Demo
Slide 30
Slide 30 text
SCSS
.container {
.child {
color: red;
}
}
【従来】ネストには Sass が必要だった
Slide 31
Slide 31 text
CSS
.container {
.child {
color: red;
}
}
【モダン】
「CSS」でネストする
Slide 32
Slide 32 text
CSS
.wrapper {
.child1,
.child2 {
color: red;
}
}
CSS
.link {
&:hover,
&:active {
color: red;
}
}
CSS ネストは、Sass のネストと「ほぼ」同じ
https://codepen.io/tonkotsuboy/pen/ExRbPgV
Slide 33
Slide 33 text
CSS
.box {
color: blue;
@media (width <= 800px) {
color: red;
}
}
とくに @media や @container のネストが便利
Slide 34
Slide 34 text
Before
CSS
section {
& h1 {
color: red;
}
}
After
CSS
section {
h1 {
color: red;
}
}
2023年12月から要素セレクターの前の &
が不要に
ネストの緩和された構文の更新 https://developer.chrome.com/blog/css-nesting-relaxed-syntax-update?hl=ja
Slide 35
Slide 35 text
CSS
.foo {
&__bar {
color: red;
}
}
セレクター名の一部を &
で表現するのは不可能
次のコードは動作しない
ジャンプできない・リファクタリングできない・コード検索が手間
Slide 36
Slide 36 text
ブラウザ バージョン リリース日
Chrome 120 2023年12月
Edge 120 2023年12月
Safari 17.2 2023年12月
Firefox 117 2023年8月
CSSネストのブラウザ対応状況
https://caniuse.com/css-nesting
Slide 37
Slide 37 text
05
バウンスなどのイージングを
transitionで使う
linear()
イージング関数
Slide 38
Slide 38 text
Demo
Slide 39
Slide 39 text
NEWアイコンのバウンスアニメーションをしたい
Slide 40
Slide 40 text
CSS
.animation-sample {
&:hover {
animation: bounce-in-manual 0.8s forward;
}
}
@keyframes bounce-in-manual {
0% { scale: 1; }
35% { scale: 1.56; } /* 1 + (1.4-1) × 1.4 */
55% { scale: 1.34; } /* 1 + (1.4-1) × 0.85 */
75% { scale: 1.44; } /* 1 + (1.4-1) × 1.1 */
90% { scale: 1.38; } /* 1 + (1.4-1) × 0.95 */
100% { scale: 1.4; }
}
:hover
が外れたときのアニメーシ
ョンをすると、コンテンツ読み込
み時にもアニメーションしてしま
う
keyframeの記述が煩雑
transition
は表現不可能
【従来】animation
+@keyframes
を使う
Slide 41
Slide 41 text
CSS
.transition-sample {
&:hover {
transition-timing-function: linear(
0,
1.4 35%,
0.85 55%,
1.1 75%,
0.95 90%,
1);
}
}
transition
で表現できる
:hover
が外れたときのアニメ
ーションをしても、コンテンツ
読み込み時にはアニメーション
しない
【モダン】transition
+linear()
を使う
Slide 42
Slide 42 text
アニメーションの進行度に応じた出力値を指定
linear(0, 1.4 35%, 0.85 55%, 1.1 75%, 0.95 90%, 1)
進行度（%） 出力値（相対値）
0% 0
35% 1.4
55% 0.85
75% 1.1
90% 0.95
100% 1
linear()
関数とは
Slide 43
Slide 43 text
ブラウザ バージョン リリース日
Chrome 113 2023年5月
Edge 113 2023年3月
Safari 17.2 2023年12月
Firefox 112 2023年4月
linear()
関数のブラウザ対応状況
https://caniuse.com/mdn-css_types_easing-function_linear-function
Slide 44
Slide 44 text
06
@property
CSS変数をアニメーションしたい
Slide 45
Slide 45 text
Demo
Slide 46
Slide 46 text
虹色ボーダーのアニメーションをしたい
時間経過とともに、虹色ボーダーの模様が回転する
Slide 47
Slide 47 text
CSS
:root {
--box-width: 100px;
}
.box {
width: var(--box-width);
transition: 1s;
}
.box:hover {
--box-width: 200px;
}
CSS変数はアニメーションできない
ブラウザがCSS変数の型を認識でき
ない
値の補間方法がわからない
【従来】CSS変数はアニメーションできない
Slide 48
Slide 48 text
CSS
@property --box-width {
syntax: "";
inherits: false;
initial-value: 100px;
}
.box {
width: var(--box-width);
transition: 1s;
}
.box:hover {
--box-width: 200px;
}
syntax
: 値の型（長さ・色・角度な
ど）
inherits
: 継承の可否
initial-value
: 初期値
【モダン】@property
でCSS変数に型を定義
Slide 49
Slide 49 text
syntax 説明 例
長さ 100px
, 2em
色 red
, #ff0000
角度 45deg
, 0.5turn
数値 1.5
, 10
パーセント 50%
, 100%
@property
のsyntax
で指定できる型
Slide 50
Slide 50 text
CSS
.rainbow-button {
background-image:
/* 中心の色 */
linear-gradient(navy),
/* ボーダーの虹色 */
conic-gradient(from var(--angle), ...);
}
カンマ区切りで複数の背景画像指定
内側の色、外側の虹色
linear-gradient
は単色指定ができ
るようになった
2025年4月から全ブラウザ対応
最初に書いたものが前面に表示される
虹色ボーダーの仕組み①: 複数の背景画像
Slide 51
Slide 51 text
CSS
.rainbow-button {
border: 6px solid transparent;
background-clip: padding-box, border-box;
}
padding-box
:
中心の色をボーダー内側まで
border-box
:
虹色をボーダー外側まで
虹色がボーダー部分に表示される
虹色ボーダーの仕組み②: background-clip
Slide 52
Slide 52 text
ブラウザ バージョン リリース日
Chrome 85 2020年8月
Edge 85 2020年8月
Safari 16.4 2023年3月
Firefox 128 2024年7月
@property
のブラウザ対応状況
https://caniuse.com/mdn-css_types_gradient_linear-gradient_single_color_stop
Slide 53
Slide 53 text
ブラウザ バージョン リリース日
Chrome 135 2025年4月
Edge 135 2025年4月
Safari 18.4 2025年3月
Firefox 136 2025年3月
単色linear-gradient(色)
のブラウザ対応状況
https://caniuse.com/mdn-css_types_gradient_linear-gradient_single_color_stop
Slide 54
Slide 54 text
07
display:noneの要素を表示するときに
アニメーションさせたい
@starting-style
transition-behavior: allow-discrete
Slide 55
Slide 55 text
Demo
Slide 56
Slide 56 text
理由: 「離散プロパティ」がアニメーションできないため
【従来】display:noneからblockはアニメーションできない
Slide 57
Slide 57 text
段階的に変化せず、「あり」
「なし」で切り替わるプロパティ
display: block
→ display: none
表示・非表示
visibility: visible
→ visibility: hidden
見える・見えない
「離散プロパティ」とは？
Slide 58
Slide 58 text
CSS
.box {
display: none; /* 初期状態 */
opacity: 0;
transition: 0.4s;
}
.box.open {
display: block;
opacity: 1;
/* blockになった瞬間のスタイル */
@starting-style {
opacity: 0;
}
}
1. 要素がdisplay:block
になる
2. opacity: 0
になる
3. opacity: 1
に向かってアニメーションする
【モダン】@starting-style
で開始時のスタイルを指定
Slide 59
Slide 59 text
transition-behavior: allow-discrete
で解決する
blockからnoneに変わるときのアニメーションは？
離散プロパティがアニメーションできないため、
瞬時に非表示になってしまう
Slide 60
Slide 60 text
CSS
.box {
display: none;
opacity: 0;
transition-duration: 0.4s;
transition-behavior:
allow-discrete;
}
.box.open {
display: block;
opacity: 1;
}
1. opacity
が0.4sかけて0
に
なる
2. display: none
になる
allow-discrete
の効果で、
display: none
が遅延される
【モダン】allow-discrete
Slide 61
Slide 61 text
CSS
.box {
display: none;
opacity: 0;
transition: 0.4s allow-discrete;
}
.box.open {
display: block;
opacity: 1;
@starting-style {
opacity: 0;
}
}
表示時
@starting-style
の効果で
アニメーション
非表示時
allow-discrete
の効果で
アニメーション
allow-discrete
と@starting-style
を組み合わせる
Slide 62
Slide 62 text
要素がDOMに新しく追加されたとき
display: none
から表示可能な値に変更されたとき
dialog.showModal()
でダイアログが表示されたとき
@starting-style
の適用タイミング
Slide 63
Slide 63 text
実例: dialogのアニメーション
Slide 64
Slide 64 text
ブラウザ バージョン リリース日
Chrome 117 2023年9月
Edge 117 2023年9月
Safari 17.5 2024年5月
Firefox 129 2024年8月
ブラウザ対応状況: @starting-style
https://caniuse.com/mdn-css_at-rules_starting-style
Slide 65
Slide 65 text
ブラウザ 対応状況 バージョン リリース日
Chrome ◯ 117 2023年9月
Edge ◯ 117 2023年9月
Safari ◯ 18.0 2024年9月
Firefox ✕
- -
ブラウザ対応状況: display
変更時の allow-discrete
https://caniuse.com/mdn-css_properties_display_is_transitionable
Slide 66
Slide 66 text
本日紹介したモダンCSS
02
まとめ
Slide 67
Slide 67 text
HTML
山形県
福島県
埼玉県 千葉県
新潟県 富山県 1.
in セレクトボックス内で区切り線を表示
埼玉県 千葉県
新潟県 富山県 1.
in セレクトボックス内で区切り線を表示
Slide 68
Slide 68 text
CSS
.box {
align-content: center;
}
2. ブロックレイアウトでalign-content
1行で要素の垂直方向の中央揃え
Slide 69
Slide 69 text
CSS
.text {
background: linear-gradient(...);
background-clip: text;
color: transparent;
}
3-1. background-clip: text
の-webkit-
不要化
テキストグラデーションを簡単に実現
Slide 70
Slide 70 text
CSS
.glass {
backdrop-filter: blur(10px);
}
3-2. backdrop-filter
の-webkit-
不要化
背景のぼかし効果
Slide 71
Slide 71 text
CSS
.container {
.child {
color: red;
}
@media (width <= 800px) {
color: blue;
}
}
4. CSSのネスト
Sassを使わず入れ子にできる
Slide 72
Slide 72 text
CSS
.box {
transition-timing-function: linear(
0, 1.4 35%, 0.85 55%,
1.1 75%, 0.95 90%, 1
);
}
5. linear()
イージング関数
複雑なバウンスアニメーションを簡潔に記述
Slide 73
Slide 73 text
CSS変数をアニメーションできるように
CSS
@property --gradient-angle {
syntax: "";
}
.rainbow-border {
background: conic-gradient(from var(--gradient-angle), ... );
animation: 2s rotate infinite linear;
}
6. @property
Slide 74
Slide 74 text
アニメーション開始時のスタイル指定
.box.open {
display: block;
opacity: 1;
@starting-style {
opacity: 0;
}
}
7. @starting-style
Slide 75
Slide 75 text
新しい知識を取り入れて
楽しくラクにウェブ制作をしましょう
Slide 76
Slide 76 text
No content