CSS実装の効率を劇的に改善！現場で使える最新プロパティ活用ガイド

2024.12.16

不要な要素を簡単に除外！:not()セレクターで実現するスマートな要素選択

CSSでスタイリングするとき、「この要素以外」にスタイルを適用したいって思ったことありませんか？そんなときに便利なのが:not()セレクターなんです！

例えば、こんな感じで使えます

/* ボタン以外のリンクに下線をつけたい場合 */
a:not(.button) {
  text-decoration: underline;
}

/* 最初と最後以外のリスト項目に余白をつけたい場合 */
li:not(:first-child):not(:last-child) {
  margin: 0 10px;
}

これまでだと個別にクラスをつけたり、複雑なセレクターを書いたりする必要があったんですが、:not()を使えばすっきり書けちゃいます！

特にリストの装飾なんかでよく使うので、覚えておくと重宝しますよ！

面倒な計算は不要！width: stretchで実現する最適な要素幅の設定

「この要素を最大幅いっぱいまで広げたい！」けど、計算が面倒…そんな経験ありませんか？

width: stretchを使えば、それが簡単にできちゃうんです！

.container {
  display: grid;
  grid-template-columns: auto 1fr;
}

.stretch-item {
  width: stretch;
  /* Safariの場合はこっち！ */
  /* width: -webkit-fill-available; */
  background: #f0f0f0;
}

特にグリッドレイアウトやフレックスボックスと相性バッチリ！

面倒な計算から解放されて、コーディングがぐっと楽しくなりますよ！

テキストの可読性を向上！letter-spacingで実現する最適な字間設定

タイトルやキャッチコピーって、ちょっと字間を広げるだけで見違えるように良くなりますよね。

そんなときに使えるのがletter-spacingです。

/* 見出しを少し格好よく */
h1 {
  letter-spacing: 0.05em;
}

/* ロゴ文字をかっこよく */
.logo {
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

em単位を使うのがポイント！

フォントサイズが変わっても、ちょうどいい字間を保てるんです。

サイトの品格がグッと上がる便利なプロパティですよ！

レスポンシブ対応を簡単に！aspect-ratioで実現する画像の縦横比制御

スマホでもPCでも画像の縦横比を保ちたい…

でも実装が大変…。

そんなお悩みを解決してくれるのがaspect-ratioなんです！

.image-container {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* インスタっぽい正方形のカードも簡単！ */
.card {
  aspect-ratio: 1;
  background: #fff;
  padding: 1rem;
}

これまでは疑似要素を使ったり、パーセンテージで頑張ったり…。

でもaspect-ratioなら、たった1行で解決しちゃいます！

カスタムプロパティをより強力に！@propertyで広がるCSSの可能性

CSSだけでこんな素敵なアニメーションが作れたら…。

実は@propertyを使えば、それが可能なんです！

@property --gradient-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.gradient-border {
  --gradient-angle: 0deg;
  background: linear-gradient(var(--gradient-angle), #e66465, #9198e5);
  transition: --gradient-angle 0.3s;
}

.gradient-border:hover {
  --gradient-angle: 180deg;
}

JavaScriptを書かなくても、グラデーションがふわっと変化するような素敵なエフェクトが作れちゃいます。

まだ新しい機能なので、これからどんどん活用の幅が広がりそうです！