僕の好きなcssプロパティ・値5選

サンプル
https://css-modan.vercel.app/myfavorite-css/

Github
https://github.com/uemura5683/css-modan/tree/main/myfavorite-css

twitter
https://twitter.com/uemuragame5683

ポートフォリオ
https://uemu-engineer.com/

Transcript

1. 僕の好きなcssプロパティ・値 5選 うえむー 2021/11/6
2. 目次 １.自己紹介 ２.好きなcssプロパティ・値 ３.URL
3. 自己紹介 Name うえむー Skill html / pug / css / scss / javascript / jQuery / gulp.js / php / React.js / Vue.js / next.js etc... ※firebase / Svelte 勉強中です。 Hobby プログラミング学習・ビートボックス・ゴルフ・ボードゲーム・麻雀 SNS・ブログサイト Twitter:：https://twitter.com/uemuragame5683 ポートフォリオ：https://uemu-engineer.com/
4. 内容 今回紹介するcssプロパティ・値は今後Web標準化されたら実用できそうなもの ばかりです。 IEブラウザ・safariの古いバージョンだとサポートされずなかなか利用できない ですが、今のうちに覚えても損はないかと思います。
5. 好きなCSSプロパティ・値 その1「position: sticky;」 position: sticky;
6. 好きなCSSプロパティ・値 その1「position: sticky;」 header { display: flex; flex-wrap: wrap; position: sticky; top: 0; background: var(--white); z-index: 10; } .l-sidebar-wrap { position: sticky; top: 130px; } 1 2 1 2 stickyは親要素の高さ の範囲で動く
7. 好きなCSSプロパティ・値 その1「position: sticky;」
8. 好きなCSSプロパティ・値 その2「display: grid;」 display: grid;
9. 好きなCSSプロパティ・値 その2「display: grid;」 .t-ranking ul { display: grid; gap: 10px; } .t-ranking li { position: relative; } .t-ranking li:nth-of-type(1) { grid-row:1 / 3; grid-column: 1 / 3; } .t-ranking li:nth-of-type(2) { grid-row:1 / 2; grid-column: 3 / 4; } .t-ranking li:nth-of-type(3) { grid-row:2 / 3; grid-column: 3 / 4; } .t-ranking li:nth-of-type(4) { grid-row:3 / 4; grid-column: 1 / 2; } .t-ranking li:nth-of-type(5) { grid-row:3 / 4; grid-column: 2 / 3; } .t-ranking li:nth-of-type(6) { grid-row:3 / 4; grid-column: 3 / 4; } 0 1 2 3 0 1 2 3 1 2 3 4 5 6
10. 好きなCSSプロパティ・値 その2「display: grid;」
11. 好きなCSSプロパティ・値 その3「gap: XXpx;」 gap: XXpx;
12. 好きなCSSプロパティ・値 その3「gap: XXpx;」 .t-ranking ul { display: grid; gap: 10px; } 親要素に擬似要素 ::before,::after を指定すると変 な余白がでる
13. 好きなCSSプロパティ・値 その3「gap: XXpx;」
14. 好きなCSSプロパティ・値 その4「aspect-ratio: X, Y;」 aspect-ratio: X, Y;
15. 好きなCSSプロパティ・値 その4「aspect-ratio: X, Y;」 .l-map { overflow: hidden; aspect-ratio: 3 / 2; } .l-map iframe { width: 100%; height: 100%; } @supports not (aspect-ratio: 3 / 2) { .l-map { overflow: hidden; position: relative; padding-top: 66.161%; } .l-map iframe { top: 0; left: 0; width: 100%; height: 100%; position: absolute; } }
16. 好きなCSSプロパティ・値 その4「aspect-ratio: X, Y;」
17. 好きなCSSプロパティ・値 その5「scroll-behavior」 scroll-behavior
18. 好きなCSSプロパティ・値 その5「scroll-behavior」 html { scroll-behavior: smooth; } html/cssだけでもスライ ダー実装可能！
19. 好きなCSSプロパティ・値 その5「scroll-behavior」
20. どうしてもモダンなプロパティ・値を利用したい場合は。。 @supports not (XXXX) { セレクター { プロパティ：値； } }
21. https://css-modan.vercel .app/myfavorite-css/ URL https://github.com/uemu ra5683/css-modan/tree/ main/myfavorite-css https://twitter.com/uemu ragame5683 https://uemu-engineer.c om/
22. Thank You!