CSS Nite in Osaka, vol.59「Modern Coding 2023〜現場で働くコーダーのためのCSSテクニック〜」
-
cssnite_osaka
- 831
- 4
- 0
- 0
-
- いいね！0
Eri Matsushita 松下 絵梨
@matsu_eri
backdrop-filterで背景ぼかしの表現！ 背景色を半透明にするのがポイント😊 今日ご紹介していただいているのは、今すべてのモダンブラウザで使えるCSSテクニック✨ #cssnite pic.twitter.com/0r04ZM7xcl
2023-06-10 14:39:12
拡大
拡大
もりてつ＠NO BASS, NO LIFE.
@m_n_t_p
place-items: center; と place-content: center; の使い分けを上手くこなせられればめっちゃ世界が広がりますね(・∀・) #cssnite
2023-06-10 14:50:53
CSS Nite in Osaka
@cssnite_osaka
頭を使った後には糖分補給を！ 入り口横のおやつコーナーにはたくさんのおやつをご準備しています🍬✨ #cssnite
2023-06-10 15:00:01
mana kasai / あんさん spicato inc.
@manaweb_
始まりました！！ お話聞いて手を動かしながら質問もできて楽しい。。。 #cssnite pic.twitter.com/9rJSJK4OSb
2023-06-10 15:03:39
拡大
mana kasai / あんさん spicato inc.
@manaweb_
place-content: centerとplace-items: centerの合わせ技！ 要素がコンテンツと行のどちらも中央になる #cssnite
2023-06-10 15:06:02
mana kasai / あんさん spicato inc.
@manaweb_
aspect-ratioを使う場合はheight: autoとobject-fit: coverを併用する #cssnite
2023-06-10 15:18:05
momo
@PinkyPrimavera
aspect-ratio: 1 / 1; で画像を簡単に正方形にできる！ めちゃくちゃ便利！！！ #cssnite pic.twitter.com/XweSlKU0Xt
2023-06-10 15:20:12
拡大
おパル
@opal_d2
スマホで画面いっぱいのヒーローイメージを作ろうとしたとき100vhを使うとちょっとはみ出るので、100svhを使うとはみ出さずに作れる。 #cssnite
2023-06-10 15:34:30
もりてつ＠NO BASS, NO LIFE.
@m_n_t_p
min() / max() / clamp() はIE11退場後に使う機会が増えましたね……ただ中で calc() を使っていたような。不要だったのですね(；´∀｀) #cssnite
2023-06-10 15:41:41
まこち@webデザイナー（バイト
@pompom_kinoco
ロゴの位置だいぶ違う #cssnite pic.twitter.com/Ni2KFZzkAz
2023-06-10 15:42:11
拡大
momo
@PinkyPrimavera
スマホで可変ビューポートに対応したメインビジュアルを作れる height: 100svh; これ！綺麗だし、なにより優しい💓 卒制普通に、height: 100vh;使ってた💦 #cssnite
2023-06-10 15:45:18
もりてつ＠NO BASS, NO LIFE.
@m_n_t_p
鹿野さんのセッション終了。デモのたびに拍手が出ていたことが印象深かったです( ´∀｀) #cssnite
2023-06-10 16:11:00
CSS Nite in Osaka
@cssnite_osaka
セッションは終了しましたが、引き続き、アフタートークを行います。 事前にお伺いした質問や、Slidoに書いていただいた質問を中心にトークをしていきます！ #cssnite
2023-06-10 16:15:31
mana kasai / あんさん spicato inc.
@manaweb_
resize: horizontal; overflow: auto;で ユーザーがマウスでリサイズできる….!!! #cssnite
2023-06-10 16:15:38
CSS Nite in Osaka
@cssnite_osaka
アフタートークが開始しました＾＾ みなさまの質問を中心に、お話していきます！ #cssnite
2023-06-10 16:16:02
momo
@PinkyPrimavera
アフタートークも情報盛りだくさん過ぎる！ #cssnite pic.twitter.com/suVsdZHDJl
2023-06-10 16:23:30
拡大
もりてつ＠NO BASS, NO LIFE.
@m_n_t_p
工数と予算の都合で新しいCSSを使えないことって結構あるあるですよね……(；´∀｀) #cssnite
2023-06-10 16:28:10