Save 37% off PRO during our Black Friday Sale! »

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

Cf642b7a99e07f86e6e7ec7a3bb94d87?s=47 Nobuyoshi
November 06, 2021

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

Cf642b7a99e07f86e6e7ec7a3bb94d87?s=128

Nobuyoshi

November 06, 2021
Tweet

Transcript

  1. 僕の好きなcssプロパティ・値 5選 うえむー 2021/11/6

  2. 目次 1.自己紹介 2.好きなcssプロパティ・値 3.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!