イベント参加レポ✏️「鹿野さんに聞く！ 2024年最新CSSトレンドと実践テクニック」
こんにちは！エン・ジャパンでデザイナーをしているtsuguです🦕 ₎₎
先日、2024年6月19日（水）にオンラインで開催された、Findy株式会社主催の「鹿野さんに聞く！ 2024年最新CSSトレンドと実践テクニック」に参加しました！
非常に学びの多い内容でしたので、自分に向けた備忘録としてこのnoteにまとめていきたいと思います📝
現在webデザイナーやコーダーとしてお勤めの方や、IT業界に興味があるという学生さんにもぜひ読んでいただけたらと思います📘
■ of S 構文
事例① 列の数に応じて、背景色を交互にさせたい
以下のような、絞り込み機能を持つ表があったとします
非表示の行にはJavaScriptでhidden属性が付与される仕様です
💭 表の視認性を上げるために、列に対して交互に背景色をつけるにはどうしたらいいでしょうか？
🤔「交互に」＝ 「奇数と偶数のうちのどちらかに」
→ 偶数番目の列に対して背景色をつける→ nth-child(even) を使ってみます
tr:nth-child(even) {
background-color: #F9F9F9;
}
😵💫 これだと絞り込み表示になった時、色が交互になってない…
これは、絞り込みを行った時 画面上では列が消えたように見えていても、ソースコード自体に変化はないためです
💡 こんな時に！「of S 構文」
CSSを以下のように修正してみます
→「 表示されている偶数行目の列（＝hidden属性が付与されていない偶数行目の列）に対して、背景色をつける」
tr:nth-child(even of :not([hidden])) {
background-color: #F9F9F9;
}出典：https://codepen.io/tonkotsuboy/pen/YzbeERN
😚 列の数に応じて、自動で色が交互になりました！✨
■ input:user-invalid
事例② inputの入力が終わった時だけエラー表示をしたい
💭 必須項目が記入されていない時／メールアドレスの型以外の入力があった時にエラーを出すにはどうしたらいいでしょうか？
🤨「inputのエラー」＝ 「入力フィールドが無効な状態」
→ 入力フィールドが無効（invaild）な場合はエラーメッセージを表示 → input:invalid を使ってみます
input:invalid + .error-message {
display: block;
}
😵💫 これだと入力する前からエラーが出てしまっています
これは、input:invalidがページを開いた瞬間に判定されるためです
💡 こんな時に！「input:user-invalid」
CSSを以下のように修正してみます
→「ユーザーが実際にデータを入力してから判定を行い、入力フィールドが無効な場合は」エラーメッセージを表示
input:user-invalid + .error-message {
display: block;
}出典：https://codepen.io/tonkotsuboy/pen/jOoZaQe
😆 入力結果に応じて、エラーが出るようになりました！
ただし、これだと入力している最中にもエラーが表示されていて若干ストレスに感じるかも…
💡 そんな時は！「:not(:focus)」を組み合わせる
→「ユーザーが実際にデータを入力してから判定を行い、フォーカスがあたっていない状態の入力フィールドが無効な場合は」エラーメッセージを表示
input:user-invalid:not(:focus) + .error-message {
display: block;
}😚 入力中はエラーが出なくなりました！✨
■ :has
事例③ 小要素の状態に応じて、親要素のスタイルを変えたい
💭 （事例②のフォームに対して）入力エラー時にフォームの背景色ではなく、要素全体の背景色を変えたい場合はどうしたらいいでしょうか？
💡 こんな時に！「:has」
→「ユーザーが実際にデータを入力してから判定を行い、フォーカスがあたっていないかつ無効な状態の入力フィールドを子要素に持つitem要素」に対して、背景色をつける
.item:has(:user-invalid:not(:focus)) {
background: #ffe5e5;
border-radius: 4px;
}■ CSSでネスト（入れ子）にする
💭 従来、ネストにはSassが必要でした
💡 CSSでネストすることができるようになりました！
- CSSのネストは、Sassのネストと「ほぼ」同じ！
- mediaクエリもネストとして記述することが可能！
- 要素セレクターの前の「&」が不要に！
- セレクター名の一部を「&」で表現することは不可能
■ display: grid
事例④ テーブルのように行の横幅が揃った、右端で折り返すレイアウトを作りたい
🤔「右端で折り返すレイアウト」＝
→ 子要素を柔軟かつ効率的に配置・整列・分配できるようにしたい → display: flex を使ってみます
.card {
width: calc(32% - 20px);
display: flex;
flex-direction: column;
row-gap: 12px;
}
😖 カード内のコンテンツ要素の高さがバラバラ…
💡 こんな時に！「display: grid」「grid-template-rows: subgrid;」
→ subgridを使うと、親グリッドの行設定を子グリッドに継承することができます
.card {
display: grid;
grid-row: span 4;
grid-template-rows: subgrid;
row-gap: 12px;
}出典：https://codepen.io/tonkotsuboy/pen/VwqmzeJ
🥳 レスポンシブ対応しつつ各カードのコンテンツの高さを統一することができました！✨
おわりに
最後に、新しいCSSを学ぶメリット について、鹿野さんは以下のようにおっしゃっていました
便利な方法を探求し続けることは、プロダクトや組織のためになるだけでなく何よりも自分自身のためになる
私個人としても、新しいCSS技術を学ぶことは、単に知識を増やすことに留まらず、実際の現場での問題解決力を高める大きな武器になると思っています。
急速に進化するウェブ技術の中で、常に最新の情報とスキルを持っているエンジニアやデザイナーは、チームの中でも重要な役割を果たすことができます。
個人としての成長だけでなく、チーム全体のパフォーマンス向上にも寄与するためにも、継続的に最新の技術をキャッチアップしていきたいです🔥
私も所属するデザイングループは現在メンバーを募集しています！
詳細については以下をご確認ください🚩
デザイングループで働くメンバーや組織の雰囲気、仕事内容が気になった方は以下の記事がおすすめです📕📗📙
その他にも幅広い職種・ポジションで新しい仲間を募集中です！
ご興味のある方は下記採用サイトをご覧ください✨