Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

鹿野さんに聞く!2023年モダンCSSの最新トレンド https://findy.connpass.com/event/278449/
で発表した資料です。

各リンクはこちらから参照
https://tonkotsuboy.github.io/20230413_findy_css/

tonkotsuboy_com

April 13, 2023
Tweet

More Decks by tonkotsuboy_com

Other Decks in Programming

Transcript

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

    View full-size slide

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

    View full-size slide

  3. 読みやすいコードになり、
    開発者体験(DX)が向上する

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  12. すりガラス表現
    backdrop-filter

    View full-size slide

  13. すりガラス表現をしたい

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  18. /*
    画面サイズ 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
    を使っていた

    View full-size slide

  19. min-width
    : ○○px 以上
    max-width
    : ○○px 以下
    従来: 「未満」や「より大きい」の表現ができない

    View full-size slide

  20. ▼ 600px 以上と未満でスタイルを切り替える場合の回避策
    @media (max-width: 599.99px) {
    /* 600px
    未満のスタイル */
    }
    @media (min-width: 600px) {
    /* 600px
    以上のスタイル */
    }
    従来: 「未満」や「より大きい」の表現ができない

    View full-size slide

  21. /*
    画面サイズ 600px
    未満 */
    @media (width < 600px) {
    }
    /*
    画面サイズ 600px
    以上 1200px
    未満 */
    @media (600px <= width < 1200px) {
    }
    /*
    画面サイズ 1200px
    以上 */
    @media (1200px <= width) {
    }
    現代: <
    や <=
    が使える

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  26. アスペクト比とは

    View full-size slide

  27. .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
    ハック

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  31. My Gallery
    © 2022 My Gallery
    カルーセルで、スクロール位置をピタッと止めたい
    横にスクロールしてみてください

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide






  37. // JavaScript
    new SmoothScroll('a[href*="#"]');
    従来: JavaScript で実装していた

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  44. input は有効( :valid
    )か無効( :invalid
    )になる
    それに応じて、 form
    や label
    のスタイルを変えたい



    メールアドレス


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

    View full-size slide

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

    View full-size slide

  46. .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()
    を使う

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  49. Sass ではなく、
    CSS でネスト(入れ子)にする

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  66. @tonkotsuboy_com

    View full-size slide