Slide 1
Slide 1 text
No content
Slide 2
Slide 2 text
新しい CSS を学ぶメリットとは？
新しい CSS が日々生まれている
Slide 3
Slide 3 text
長い JavaScript で実現していたものが、
短い CSS で済む
Slide 4
Slide 4 text
読みやすいコードになり、
開発者体験（DX）が向上する
Slide 5
Slide 5 text
DX の向上により、
制作物の品質が向上する
Slide 6
Slide 6 text
01
いま全ブラウザで使えるモダン CSS
Slide 7
Slide 7 text
テキストのグラデーションを
画像なしで行いたい
background-clip: text;
Slide 8
Slide 8 text
Apple のウェブサイトのグラデーション文字
https://www.apple.com/ipad-pro/
Slide 9
Slide 9 text
Facebook messenger のグラデーション文字
https://www.messenger.com/
Slide 10
Slide 10 text
従来: Illustrator 等で画像を作っていた
Slide 11
Slide 11 text
p {
/*
背景グラデーション */
background: linear-gradient(-45deg, #2af598, #009efd);
/*
テキストの形に背景を切り抜く */
-webkit-background-clip: text;
background-clip: text;
/*
テキストの色を透明にする */
color: transparent;
}
現代: background-text で指定できる
Slide 12
Slide 12 text
https://codepen.io/tonkotsuboy/pen/yLRYQeW
Demo
Slide 13
Slide 13 text
すりガラス表現
backdrop-filter
Slide 14
Slide 14 text
すりガラス表現をしたい
Slide 15
Slide 15 text
従来: Photoshop 等で画像を作成していた
Slide 16
Slide 16 text
.box {
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
background-color: rgba(255, 255, 255, 0.5);
}
景色は透明か半透明にする
Safari のみベンダープレフィックス -webkit-
が必要
現代：backdrop-filter
を使う
Slide 17
Slide 17 text
https://codepen.io/tonkotsuboy/pen/MWPKWrW
Demo
Slide 18
Slide 18 text
@media の 長い記法をやめたい
@media (600px <= width < 1200px) {}
Slide 19
Slide 19 text
/*
画面サイズ 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
を使っていた
Slide 20
Slide 20 text
min-width
: ○○px 以上
max-width
: ○○px 以下
従来: 「未満」や「より大きい」の表現ができない
Slide 21
Slide 21 text
▼ 600px 以上と未満でスタイルを切り替える場合の回避策
@media (max-width: 599.99px) {
/* 600px
未満のスタイル */
}
@media (min-width: 600px) {
/* 600px
以上のスタイル */
}
従来: 「未満」や「より大きい」の表現ができない
Slide 22
Slide 22 text
/*
画面サイズ 600px
未満 */
@media (width < 600px) {
}
/*
画面サイズ 600px
以上 1200px
未満 */
@media (600px <= width < 1200px) {
}
/*
画面サイズ 1200px
以上 */
@media (1200px <= width) {
}
現代: <
や <=
が使える
Slide 23
Slide 23 text
記号 説明
<=
以下
<
未満
>=
以上
>
より大きい
現代: 「未満」や「より大きい」の表現が可能
Slide 24
Slide 24 text
https://codepen.io/tonkotsuboy/pen/JjmYWmw
Demo
Slide 25
Slide 25 text
レスポンシブ対応で、
画像の縦横比を変えたい
aspect-ratio
Slide 26
Slide 26 text
いろんなアスペクト比で画像を表示したい
Slide 27
Slide 27 text
アスペクト比とは
Slide 28
Slide 28 text
.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
ハック
Slide 29
Slide 29 text
.item {
aspect-ratio: 16 / 9;
}
@media (width <= 500px) {
.item {
aspect-ratio: 4 / 3;
}
}
現在: aspect-ratio
プロパティ
Slide 30
Slide 30 text
https://codepen.io/tonkotsuboy/pen/JjmYWmw
Demo
Slide 31
Slide 31 text
スクロール位置をぴたっと止める
Scroll Snap
Slide 32
Slide 32 text
My Gallery
© 2022 My Gallery
カルーセルで、スクロール位置をピタッと止めたい
横にスクロールしてみてください
Slide 33
Slide 33 text
const carousel = document.querySelector(".carousel");
const items = carousel.querySelectorAll(".item");
const currentIndex = 0;
carousel.addEventListener("scroll", (event) => {
//
スクロール位置を計算し、アイテムにスナップさせる
});
従来: JavaScript を使っていた
Slide 34
Slide 34 text
.container {
/* x
方向で、必ずスナップポイントに揃うように */
scroll-snap-type: x mandatory;
}
.container .item {
/*
スナップ位置は、開始位置 */
scroll-snap-align: start;
}
現在: scroll-snap
プロパティを使える
Slide 35
Slide 35 text
https://codepen.io/tonkotsuboy/pen/jOeEXrw
Demo
Slide 36
Slide 36 text
アンカーリンクで
スムーススクロールがしたい
scroll-behavior
Slide 37
Slide 37 text
2017年4月生まれ。
すぐ人にゴロゴロとなつく甘えん坊で、
寂しがりや。運動は得意ではないけど、
いつも高いところに登りたがる。
Profile
うにちゃんについて
PROFILE GALLERY BLOG
アンカーリンクでスムーススクロール
右上のリンクをクリックしてみてください
Slide 38
Slide 38 text
// JavaScript
new SmoothScroll('a[href*="#"]');
従来: JavaScript で実装していた
Slide 39
Slide 39 text
/* CSS */
html {
scroll-behavior: smooth;
}
現在: scroll-behavior
で実装できる
Slide 40
Slide 40 text
header {
height: 60px;
}
section {
/*
停止位置は60px */
scroll-margin-top: 60px;
}
scroll-margin-top
でスクロール位置調整
Slide 41
Slide 41 text
https://codepen.io/tonkotsuboy/pen/zYmvJMa
Demo
Slide 42
Slide 42 text
02
今後使えるようになる CSS
Slide 43
Slide 43 text
子要素の状態に応じて、
親要素のスタイルを変えたい
:has()
Slide 44
Slide 44 text
メールアドレスの有効・無効でラベルを変えるデモ
Firefox以外でご覧ください
Slide 45
Slide 45 text
input は有効（ :valid
）か無効（ :invalid
）になる
それに応じて、 form
や label
のスタイルを変えたい
メールアドレス
メールアドレスの有効・無効でラベルを変えるデモ
Slide 46
Slide 46 text
input
の状態が変更されるイベントをチェック
form
および label
のスタイルを JavaScript で更新
従来: JavaScript を使っていた
Slide 47
Slide 47 text
.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()
を使う
Slide 48
Slide 48 text
https://codepen.io/tonkotsuboy/pen/rNqxaQJ
Demo
Slide 49
Slide 49 text
:has()
のサポート状況
https://caniuse.com/css-has
Slide 50
Slide 50 text
Sass ではなく、
CSS でネスト（入れ子）にする
Slide 51
Slide 51 text
/* Sass
ファイル */
.container {
.child {
color: red;
}
}
従来: Sass を使うしかなかった
Slide 52
Slide 52 text
/* CSS
ファイル */
.container {
.child {
color: red;
}
}
ミライ: 「CSS」で実現できる
Slide 53
Slide 53 text
container {
.child1,
.child2 {
color: red;
}
}
.link {
&:hover,
&:active {
color: red;
}
}
CSS ネストは、Sass のネストと「ほぼ」同じ
Slide 54
Slide 54 text
.box {
color: blue;
@media (width <= 800px) {
color: red;
}
}
とくに、 @media のネストが便利
Slide 55
Slide 55 text
ネスト のサポート状況
https://caniuse.com/css-nesting
Slide 56
Slide 56 text
PostCSS を使えば、今すぐ全ブラウザで使える
https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-nesting
Slide 57
Slide 57 text
https://codepen.io/tonkotsuboy/pen/ExRbPgV
Demo
Slide 58
Slide 58 text
レンガ状のレイアウト
CSS Grid の masonry
Slide 59
Slide 59 text
pinterest みたいなレイアウトを作りたい
https://www.pinterest.jp/
Slide 60
Slide 60 text
:root {
--gap: 24px;
}
.container {
/*
カラム数成り行き、基本的に300px
の横幅 */
columns: auto 300px;
/*
列間の隙間 */
column-gap: var(--gap);
}
.item {
/*
行間の隙間 */
margin-bottom: var(--gap);
}
従来: column
で（一応）実装できる
Slide 61
Slide 61 text
.container {
display: grid;
/*
行のレイアウトとして「masonry
」を指定する */
grid-template-rows: masonry;
grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
/*
親へgap
を指定するだけでOK */
gap: 40px;
}
ミライ： masonry を使う
Slide 62
Slide 62 text
masonry のサポート状況
https://caniuse.com/mdn-css_properties_grid-template-rows_masonry
Slide 63
Slide 63 text
https://codepen.io/tonkotsuboy/pen/jOKJXEm
Demo
Slide 64
Slide 64 text
03
まとめ
Slide 65
Slide 65 text
テキストのグラデーションを画像なしに行う background-clip: text
すりガラス表現 backdrop-filter
@media で <
や <=
が使える
画像の縦横比を変えたい aspect-ratio
スクロール位置をピタッと止める scroll-snap
ページ内リンクをなめらかにスクロール scroll-behavior
いま全ブラウザで使えるモダン CSS
Slide 66
Slide 66 text
子要素に応じて親のスタイルを変えられる :has()
CSS のネスト
レンガ状レイアウト CSS Grid の masonry
今後使えるようになる CSS
Slide 67
Slide 67 text
新しい知識を取り入れて
楽しくラクにウェブ制作をしましょう
Slide 68
Slide 68 text
@tonkotsuboy_com