Movatterモバイル変換

[0]ホーム
URL:

Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥
Speaker DeckSpeaker Deck
Speaker Deck

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

Avatar for tonkotsuboy_com tonkotsuboy_com
April 13, 2023

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

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

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

Avatar for tonkotsuboy_com

tonkotsuboy_com

April 13, 2023
Tweet

More Decks by tonkotsuboy_com

See All by tonkotsuboy_com

Other Decks in Programming

See All in Programming

Featured

See All Featured

Transcript

  1. None

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

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

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

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

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

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

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

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

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

  11. p { /* 背景グラデーション */ background: linear-gradient(-45deg, #2af598, #009efd); /*

    テキストの形に背景を切り抜く */ -webkit-background-clip: text; background-clip: text; /* テキストの色を透明にする */ color: transparent; } 現代: background-text で指定できる

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

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

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

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

  16. .box { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); background-color: rgba(255, 255, 255,

    0.5); } 景色は透明か半透明にする Safari のみベンダープレフィックス -webkit- が必要 現代：backdrop-filter を使う

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

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

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

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

  21. ▼ 600px 以上と未満でスタイルを切り替える場合の回避策 @media (max-width: 599.99px) { /* 600px 未満のスタイル

    */ } @media (min-width: 600px) { /* 600px 以上のスタイル */ } 従来: 「未満」や「より大きい」の表現ができない

  22. /* 画面サイズ 600px 未満 */ @media (width < 600px) {

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

  23. 記号 説明 <= 以下 < 未満 >= 以上 > より大きい

    現代: 「未満」や「より大きい」の表現が可能

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

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

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

  27. アスペクト比とは

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

  29. .item { aspect-ratio: 16 / 9; } @media (width <=

    500px) { .item { aspect-ratio: 4 / 3; } } 現在: aspect-ratio プロパティ

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

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

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

  33. const carousel = document.querySelector(".carousel"); const items = carousel.querySelectorAll(".item"); const currentIndex

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

  34. .container { /* x 方向で、必ずスナップポイントに揃うように */ scroll-snap-type: x mandatory; }

    .container .item { /* スナップ位置は、開始位置 */ scroll-snap-align: start; } 現在: scroll-snap プロパティを使える

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

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

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

    右上のリンクをクリックしてみてください

  38. <!-- HTML --> <head> <script src="jquery-3.6.0.js"></script> <script src="smooth-scroll.min.js"></script> </head> //

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

  39. /* CSS */ html { scroll-behavior: smooth; } 現在: scroll-behavior

    で実装できる

  40. header { height: 60px; } section { /* 停止位置は60px */

    scroll-margin-top: 60px; } scroll-margin-top でスクロール位置調整

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

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

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

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

  45. input は有効（ :valid ）か無効（ :invalid ）になる それに応じて、 form や label

    のスタイルを変えたい <!-- html --> <form class="form"> <label> メールアドレス</label> <input type="email" /> </form> メールアドレスの有効・無効でラベルを変えるデモ

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

    を使っていた

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

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

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

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

  51. /* Sass ファイル */ .container { .child { color: red;

    } } 従来: Sass を使うしかなかった

  52. /* CSS ファイル */ .container { .child { color: red;

    } } ミライ: 「CSS」で実現できる

  53. container { .child1, .child2 { color: red; } } .link

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

  54. .box { color: blue; @media (width <= 800px) { color:

    red; } } とくに、 @media のネストが便利

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

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

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

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

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

  60. :root { --gap: 24px; } .container { /* カラム数成り行き、基本的に300px の横幅

    */ columns: auto 300px; /* 列間の隙間 */ column-gap: var(--gap); } .item { /* 行間の隙間 */ margin-bottom: var(--gap); } 従来: column で（一応）実装できる

  61. .container { display: grid; /* 行のレイアウトとして「masonry 」を指定する */ grid-template-rows: masonry;

    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); /* 親へgap を指定するだけでOK */ gap: 40px; } ミライ： masonry を使う

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

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

  64. 03 まとめ

  65. テキストのグラデーションを画像なしに行う background-clip: text すりガラス表現 backdrop-filter @media で < や <=

    が使える 画像の縦横比を変えたい aspect-ratio スクロール位置をピタッと止める scroll-snap ページ内リンクをなめらかにスクロール scroll-behavior いま全ブラウザで使えるモダン CSS

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

    CSS

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

  68. @tonkotsuboy_com

[8]ページ先頭
©2009-2025 Movatter.jp