Slide 1
Slide 1 text
僕の好きなcssプロパティ・値 5選
うえむー 2021/11/6
Slide 2
Slide 2 text
目次
１.自己紹介
２.好きなcssプロパティ・値
３.URL
Slide 3
Slide 3 text
自己紹介
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/
Slide 4
Slide 4 text
内容
今回紹介するcssプロパティ・値は今後Web標準化されたら実用できそうなもの
ばかりです。
IEブラウザ・safariの古いバージョンだとサポートされずなかなか利用できない
ですが、今のうちに覚えても損はないかと思います。
Slide 5
Slide 5 text
好きなCSSプロパティ・値 その1「position: sticky;」
position: sticky;
Slide 6
Slide 6 text
好きな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は親要素の高さ
の範囲で動く
Slide 7
Slide 7 text
好きなCSSプロパティ・値 その1「position: sticky;」
Slide 8
Slide 8 text
好きなCSSプロパティ・値 その2「display: grid;」
display: grid;
Slide 9
Slide 9 text
好きな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
Slide 10
Slide 10 text
好きなCSSプロパティ・値 その2「display: grid;」
Slide 11
Slide 11 text
好きなCSSプロパティ・値 その3「gap: XXpx;」
gap: XXpx;
Slide 12
Slide 12 text
好きなCSSプロパティ・値 その3「gap: XXpx;」
.t-ranking ul {
display: grid;
gap: 10px;
}
親要素に擬似要素
::before,::after を指定すると変
な余白がでる
Slide 13
Slide 13 text
好きなCSSプロパティ・値 その3「gap: XXpx;」
Slide 14
Slide 14 text
好きなCSSプロパティ・値 その4「aspect-ratio: X, Y;」
aspect-ratio: X, Y;
Slide 15
Slide 15 text
好きな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;
}
}
Slide 16
Slide 16 text
好きなCSSプロパティ・値 その4「aspect-ratio: X, Y;」
Slide 17
Slide 17 text
好きなCSSプロパティ・値 その5「scroll-behavior」
scroll-behavior
Slide 18
Slide 18 text
好きなCSSプロパティ・値 その5「scroll-behavior」
html {
scroll-behavior: smooth;
}
html/cssだけでもスライ
ダー実装可能！
Slide 19
Slide 19 text
好きなCSSプロパティ・値 その5「scroll-behavior」
Slide 20
Slide 20 text
どうしてもモダンなプロパティ・値を利用したい場合は。。
@supports not (XXXX) {
セレクター {
プロパティ：値；
}
}
Slide 21
Slide 21 text
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/
Slide 22
Slide 22 text
Thank You!