CSS匠の技！コードを書く量が激減するショートハンド術11選

Awesome CSS shorthand tricks to write less code

記事は上記記事を意訳したものです。

※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。

---

フロントエンド開発者として、ウェブアプリケーションを設計する際に少ないCSSコードでより多くの効果を得たいと思うものです。

CSSテクニックに興味がある方は、ぜひこの記事を読み進めてください。より少ないコードでより最適化され、保守しやすいコードを書くのに役立つ11の素晴らしいCSSショートハンドテクニックを紹介します。

1. CSS insetプロパティ

insetプロパティは、top、right、left、bottomプロパティのショートハンドプロパティです。

従来の方法:

.container {
  position: absolute;
  top: 10px;
  right: 0;
  left: 0;
  bottom: 10px;
}

ショートハンドプロパティでコード量削減 👇

.container {
  position: absolute;
  inset: 10px 0;
}

2. min()/max()関数

min()とmax()関数は、サイズプロパティの最小値と最大値を設定できるため、レスポンシブCSSの作成に非常に役立ちます。

従来のCSS方法:

.card {
  width: 300px;
  max-width: 400px;
}

ショートハンドプロパティでコード量削減 👇

.card {
  width: max(300px, 400px);
}

3. CSSスケールプロパティ

scaleプロパティは、transform: scale()のショートハンドプロパティです。

従来のアプローチ:

.card {
  transform: scale(1.2);
}

ショートハンドプロパティでコード量削減 👇

.card {
  scale: 1.2;
}

4. :is()疑似クラス

:is()疑似クラスを使用すると、複数のセレクタをグループ化して同じスタイルを適用できます。

従来のアプローチ:

.form button, .form input {
  font-size: 18px;
  background-color: #e3e3e3;
  border: 1px solid #333;
}

ショートハンドプロパティでコード量削減 👇

.form :is(button, input) {
  font-size: 18px;
  background-color: #e3e3e3;
  border: 1px solid #333;
}

5. :has()疑似クラス

:has()疑似クラスを使用すると、条件付きでスタイルを適用できます。

.card:has(a) {
  background-color: gray;
}
.card:has(img) {
  background-color: yellow;
}

6. margin-inline / margin-block

margin-inlineプロパティは水平マージンのショートハンドプロパティであり、margin-blockプロパティは垂直マージンのショートハンドプロパティです。

従来のアプローチ:

.horizontal-margin {
  margin-left: 10px;
  margin-right: 20px;
}

.vertical-margin {
  margin-top: 15px;
  margin-bottom: 20px;
}

ショートハンドプロパティでコード量削減 👇

.horizontal-margin {
  margin-inline: 10px 20px;
}

.vertical-margin {
  margin-block: 15px 20px;
}

7. clamp()関数

CSSのclamp()関数を使用すると、幅やフォントサイズなどのプロパティに対して、最小値、推奨値、最大値を定義することで、指定した範囲内で自動的に調整される値を設定できます。

従来のアプローチ:

p {
  font-size: 24px;
}

@media max-width(992px) {
  p {
    font-size: 16px;
  }
}
@media max-width(678px) {
  p {
    font-size: 12px;
  }
}

ショートハンドプロパティでコード量削減 👇

p {
  font-size: clamp(12px, 16px, 24px);
}

8. CSSフォントプロパティ

フォントプロパティを個別に定義する代わりに、ショートハンドのfontプロパティを使用して同じことを実現できます。

従来のアプローチ:

p {
  font-size: 18px;
  font-weight: 600;
  font-family: "inter", sans-serif;
  line-height: 1.5;
}

ショートハンドプロパティでコード量削減 👇

p {
  font: 600 18px/1.5 "inter", sans-serif;
}

9. CSS backgroundプロパティ

backgroundプロパティは、複数のbackgroundプロパティのショートハンドプロパティです。

従来のアプローチ:

.container {
  background-color: blue;
  background-image: url(pattern.svg);
  background-position: center;
  background-repeat: no-repeat;
}

ショートハンドプロパティでコード量削減 👇

.container {
 background: blue url(pattern.svg) center no-repeat;
}

10. CSS animationプロパティ

アニメーションプロパティの異なる値を個別に定義する代わりに、ショートハンドのanimationプロパティを使用して同じ動作を実現できます。

従来のアプローチ:

.slide-animate {
  animation-name: slide;
  animation-duration: 2s;
  animation-timing-function: ease-in-oyt;
  animation-iteration-count: infinite;
}

ショートハンドプロパティでコード量削減 👇

.slide-animate {
  animation: slide 2s ease-in-out infinite;
}

11. CSS maskプロパティ

maskプロパティを使用すると、マスキングを適用して要素の一部を非表示にすることができます。

従来のアプローチ:

.masked {
  mask-image: url(mask-img.svg);
  mask-position: center;
  mask-repeat: no-repeat;
}

ショートハンドプロパティでコード量削減 👇

.masked {
  mask: url(mask-img.svg) center no-repeat;
}

まとめ

これらのCSSショートハンドプロパティと関数を使用することで、時間を節約するだけでなく、コードの保守、読みやすさ、最適化も向上します。これらの一行のCSSテクニックを使用することで、従来のアプローチと同じ動作を実現しながらも、短く、時間がかからず、少ない知識で簡単に保守できるコードを作成できます。

1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座［第2版］

モダンHTML&CSS　現場の新標準ガイド

これだけで基本がしっかり身につく HTML/CSS&Webデザイン1冊目の本