鹿野さんに聞く!CSSの最新トレンド Ver.2025のトップ画像

鹿野さんに聞く!CSSの最新トレンド Ver.2025

投稿日時:
鹿野 壮のアイコン

Ubie株式会社 / プロダクトエンジニア

鹿野 壮

Xアカウントリンク

本記事では、2025年6月10日に開催されたオンラインイベント「鹿野さんに聞くCSSの最新トレンド Ver.2025」の内容をお届けします。同セッションでは、2023年に引き続き、2024年もご好評いただいたUbie株式会社の鹿野 壮(@tonkotsuboy_com)さんをお招きし、2025年の最新CSSトレンドについてお話いただきます。ぜひ本編のアーカイブ動画とあわせてご覧ください。


鹿野:

鹿野と申します。CSSと猫が大好きで、@tonkotsuboy_comという名前でXをやっていますので、よろしくお願いします。本日は、教材をデザイナーの松下さんに協力していただき、いくつかのCSSを紹介していきます。比較的、最近全ブラウザで対応できるようになったCSSを中心に話していこうと思います。

早速ですが、新しいCSSが日々生まれています。どうして私たちは新しいCSSを学ぶのでしょうか。学ぶメリットとしては以下があります。

・長いJavaScriptで実現していたものが短いCSSで済む
・読みやすいコードになり、開発者体験(DX)が向上する
・バグが減り、成果物の品質が向上する

それでは、2025年最新CSS実践テクニックをご紹介します。

2025年最新CSS実践テクニック

selectの中で区切り線を表示したい

まず1つ目は、<select>の中で区切り線を表示する<hr>タグの活用です。都道府県のセレクトボックスを表示していますが、福島県と茨城県の間や神奈川県と新潟県の間に区切り線が表示されているのが見えますか。このようにセレクトボックスの中に区切り線を表示することができます。

【モダン】 <hr> で区切り線を入れられる.png

これまでは区切り線を付けることができなかったので、長い都道府県が並んでいました。例えば、私は福岡県出身なので、リストの下の方にあり、注視しながら探す必要がありました。しかし、セレクトボックスの中に<hr>タグを設定することで、都道府県や地域ごとに区切ることができるため、探しやすくなり非常に便利です。

ちなみに<hr>タグを使わずとも、<optgroup>は昔から使えました。

この記事のつづきを読もう
新規登録/ログインしたらできること
  • すべての記事を制限なく閲覧可能
  • 限定イベントに参加できます
  • GitHub連携でスキルを可視化
ログイン
アカウントをお持ちでない方はこちらから新規登録

プロフィール