知っておくべきCSSの機能

今日は、おそらくスタイルの書き方を変える 5 つの優れた CSS 機能についてお話したいと思います。 CSS を学習している場合、これらの機能を使用すると作業が楽になります。作業を「手動」で行う方法と、これらのツールを使用して簡素化する方法を示す例を使用して、1 つずつ見てみましょう。

1. calc(): CSS で直接計算を実行しますか?

要素のサイズを調整するために値を手動で加算または減算したことがありますか? calc() を使用すると、事前の計算を必要とせず、スタイル シート内で直接実行できます。

calc() を使用しない例:

.container {
  width: 70%;
  margin: 20px;
}

calc() の例:

.container {
  width: calc(70% - 20px);
  margin: 20px;
}

calc() を使用すると、パーセンテージやピクセルなどのさまざまな測定単位を組み合わせて、より柔軟で適応性のある設計を実現できます。

---

2.repeat(): グリッドの作成を簡素化しますか?

グリッド レイアウトを使用している場合は、繰り返しの列や行を記述していることに気付いたことがあるでしょう。 repeat() を使用すると、冗長なコードを回避し、読みやすさを向上させることができます。

repeat() を使用しない例:

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* Tres columnas iguales */
}

repeat() を使用した例:

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Lo mismo, pero más limpio */
}

repeat() は、複雑なグリッドまたは定義されたパターンを持つグリッドに最適です

---

3. min(): 動的最大サイズを制御しますか?

min() を使用すると、複数の値の中から最小のサイズを指定でき、レスポンシブ デザインに最適です。

min() を使用しない例:

.box {
  width: 50vw; /* Podría ser demasiado grande en pantallas grandes */
}

@media (min-width: 600px) {
  .box {
    width: 300px; /* Tamaño fijo en pantallas más grandes */
  }
}

min() を使用した例:

.box {
  width: min(50vw, 300px); /* Escoge automáticamente el valor más pequeño */
}

min() を使用すると、メディア クエリ ルールを削減し、より流動的なデザインを実現できます。

---

4.clamp(): レスポンシブレイアウトでのフルサイズコントロール

clamp() を使用すると、最小サイズと最大サイズの範囲を定義できます。これは、画面のサイズに応じて拡大縮小する必要があるフォントや要素に最適です。

Clamp() を使用しない例:

.text {
  font-size: 16px; /* Tamaño fijo */
}

@media (min-width: 600px) {
  .text {
    font-size: 20px;
  }
}

@media (min-width: 1200px) {
  .text {
    font-size: 24px;
  }
}

クランプ()を使用した例:

.text {
  font-size: clamp(16px, 2vw, 24px); /* Escala entre 16px y 24px */
}

clamp() を使用すると、いくつかのメディア クエリ ルールが削除され、より柔軟なレイアウトが得られます。

---

5. fit-content(): 幅をコンテンツに合わせる

fit-content() を使用すると、要素の幅をそのコンテンツのサイズに合わせることができますが、定義した最大値を超えて拡大することはありません。これは、含まれるテキストに合わせて動的に調整されるが、ワイド画面で過度に大きくならないボタンや要素を作成する場合に非常に便利です。

fit-content() を使用しない例:

.button {
  width: auto; /* Se expande según el contenido */
  padding: 10px 20px;
  border: 1px solid black;
}

(この場合、ボタンのテキストが非常に長いと、ボタンが長くなりすぎます。)

fit-content() を使用した例:

.container {
  width: 70%;
  margin: 20px;
}

fit-content() を使用すると、ボタンはテキストのサイズにフィットしますが、幅が 200 ピクセルを超えることはありません。テキストが短い場合、ボタンは小さくなります。

以上が知っておくべきCSSの機能の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。