【2022】これから使えるCSSプロパティ18選！新しく使える便利なCSSテクニック！

[@KentaroxKondo]

clampのお陰で、レスポンシブが楽になりました！

[@hirocode]

めちゃわかります！clamp便利ですよね😆❗️

[@淀川謙次]

まだ頭で消化しきれてませんが、CSSの魅力的な機能が満載でした。　ありがとうございます。

[@hirocode]

こちらこそ、嬉しいコメントいただきありがとうございます🙇❗️

[@KentaroxKondo]

比較的新しい（？）、dvhという単位について質問があります😂 ブラウザ画面の高さマックスに要素を表示して、それ以外には見せるものがないので、上下にスクロール移動もできないようなWebページを作りたいです（簡易的なゲームを作る予定で、上下にスクロールされる余白があるとむしろ使いづらくなるため）。 コンテンツやbodyタグ、極め付けはhtml要素にまでheight: 100dvhを指定してみましたが、どうしてもスマホ（Safari）の場合だけ、下に表示されるアドレスバー分の余白が生まれてしまい、要素は意図通りの表示領域に収まって見えるのですが、少し下にスクロールできてしまいます。 この、アドレスバー分の謎の余白を消す方法を、ご存知ないでしょうか？ JavaScriptでそもそもスクロールを無効にしたり、工夫をしてみましたが、余白をなくすという根本解決には至りませんでした…数時間悩んでも分からなかったので、コメントしてしまいました🙏 よろしければ教えてください！

[@hirocode]

コメントありがとうございます😆❗️ bodyにheight 100dvhとoverflow hiddenを指定するとスクロール不可の高さmax組めるかと思います。それでスクロールされる場合はもしかしたらsafariのバージョンが古いとかでしょうか？🤔

[@Nyan-l3w]

ありがとうございます。ツイートさせていただきました

[@hirocode]

こちらこそありがとうございます😆❗️

[@Lim_りむ]

これはとても素敵情報です✨ありがとうございます！

[@hirocode]

嬉しいですー😊❗️こちらこそありがとうございます🙇‍♂️🙇‍♂️🙇‍♂️❗️

[@mirumochi]

今勉強中ですがずっと参考にさせてもらっています。 いつもありがとうございます!

[@hirocode]

こちらこそいつもご視聴いただきありがとうございます🙇‍♂️❗️

[@絹美人-y1f]

ありがたやー

[@hirocode]

こちらこそ嬉しいコメントいただきありがとうございます🙇‍♂️‼️

[@yuasys]

とても知りたかった情報だったので、うれしいです。しかも分かりやすい解説も秀逸です！ありがとうございます😊

[@hirocode]

嬉しいお言葉いただきありがとうございます😭❗️作った甲斐がありました😆❗️

[@いなゴン]

CSSだけで変数が完結するようになった辺り、近いうちにSassをコンパイルしなくても読み込めるようになる日も近いんだろうなぁと思う

[@hirocode]

それめちゃめちゃ良いですね😲❗️確かにこれだけCSS進化してきているので、近い未来にそうなりそう&そうなってほしいです😆❗️

[@ボコのミュージックライブラリ]

これは神動画！スーパーありがたいです！！

[@hirocode]

そう言っていただけて嬉しいです😭こちらこそありがとうございます🙇‍♂️！！

[@古井しほ]

Amazing 😍❤️💙 thanks 😊

[@hirocode]

Thank you as well😆‼️

[@nangakiya]

コーダー歴10年ちょっとです。この動画はありがたい！IE6の時代は透過pngすら対応しておらず特に泣かされていましたが、やっとIEが終わってくれると思って喜んでます。

[@ASMR-mp9bj]

あったあったｗ懐かしすぎる。ほぼ画像でtableレイアウトしてたわ

[@hirocode]

そんな時代があったんですね😱❗️ほんとやっとって感じですね😅

[@hirocode]

想像するだけで恐ろしい時代ですね笑 そう考えるとかなり今は進歩してますね😆♪

[@bubumoment86]

max-contentの良例は、要素をセンタリングするときですね。

[@hirocode]

コメントいただきありがとうございます🙇‍♂️❗️ すみません、max-contentの例意味わかんないですよね😭 センタリングでピンと来ませんでした😱もう少しヒント欲しいです😅🙇‍♂️❗️

[@bubumoment86]

@@hirocode ブロック要素をセンタリングするには、一般的に、margin: autoなどが用いられますが、 ブロック要素の中身が横軸方向に可変する際は、ブロック要素にwidthを指定することができないため、期待するセンタリングを実現できません。 そういう場合に、これまでは、別のレイアウト手段(inline-blockやflexなど)を用いる必要がありましたが、これからは、width: max-contentを指定するだけで解決できます。

[@hirocode]

ご丁寧にありがとうございます🙇‍♂️ おっしゃる通り、この例だと分かりやすくて参考になりました❗️親要素いじる必要ないので、結構使える箇所ありそうです❗️ 大変有益なコメントありがとうございます🙇‍♂️❗️

[@yu-ri782]

すみません！このような情報ってどこから入手しているのでしょうか？？

[@hirocode]

コメントいただきありがとうございます😊♪ ネット上で見かけて情報ストックしておくことや、can i useというサイトでコード関係の対応ブラウザが確認できるのでそういったもの利用しています😆❗️

[@yu-ri782]

@@hirocode 返信ありがとうございます！大変勉強になります。参考にさせていただきますね！🥹

[@marudddddd]

アコーディオンやスクロールのプロパティ見た感じjqueryを書かなくてもCSSだけで行けんじゃね？！って思いました笑笑😂

[@hirocode]

ホントそうですよね‼️こういうCSSがもっと増えてきたらjqueryなくても色んなサイト作れるようになりそうです😆‼️

[@sinuture]

Mix Blend Mode いいな （自分は多分使わないけどw）

[@hirocode]

確かに普段使いしづらいですよね😅

[@ys1daito]

少し前からですが、時折画面に変な乱れが出ていますね。

[@hirocode]

ご指摘いただきありがとうございます🙇‍♂️❗️そうなんです💦画面見づらくなっていてすみません💦動画の書き出し改善できるか試してみます😢

[@siestadalk]

cssの進化にビビってるw

[@hirocode]

CSSどんどん進化してますよね😲‼️あれだけ使われてたフロートとかも全く見なくなりました😂

[@comicomi9246]

現在学習中です。 今回の紹介されたプロパティはちょいちょい見かけてたのですがobject-fit以外はなんとなく避けていました。 が、この動画を見てこれから実際に使っていこうと思えるようになりました(^^) さっそく自作wordpressサイトのCSSを書き換えて見ようと思います！

[@hirocode]

コメントいただきありがとうございます😊♪Wordpressのサイトお持ちなんですね🤗ぜひぜひ色々使ってみてください😆❗️

[@高島雅矢]

scroll-behavior smoothはsafariで対応してなかった気が、、

[@hirocode]

コメントいただきありがとうございます🙇‍♂️❗️ safariでは最新版で対応してるみたいです！ caniuse.com/?search=scroll-behavior%20smooth それ以前のバージョンは対応していないので使用注意ですね⚠️ 有益な情報いただきありがとうございます🙇‍♂️❗️

[@高島雅矢]

@@hirocode あ！先月からSafariで対応したみたいですね！勉強不足でした！ ありがとうございます。

[@tukitukitsuki]

動画ビカビカしますな…。aspect-ratioを使ったアイテムをflexなりで並べた場合に全体の高さ確保できずになぜか見切れたりする経験どなたかありません？

[@hirocode]

めちゃめちゃビカビカしててすみません😭❗️ aspect-ratioの件について僕の環境では再現できませんでした💦

[@秋月春花-s3x]

IE廃止嬉しいです！

[@hirocode]

同じくめちゃめちゃ嬉しいです😆♪♪♪

[@ggweb3899]

めっちゃ動画がチカチカして見ずらい、、、

[@hirocode]

ほんとそうですよね😭💦 チェック不足でした、すみません🙇‍♂️❗️