時間を大幅に節約するSSの裏技

CSS の使用は、バックエンド開発者にとって常に悪夢です。ここでは、これらのフロントエンド開発者と共謀して、フロントエンド開発者ですら見逃す CSS のトリックを学びましょう。

1. Flexbox でのセンタリングのトリック

有名なセンタリング divs 問題から始めましょう。ここではフレックスボックスを利用します。絶対的な位置を設定したり、マージンを調整したりする必要はありません。次のようにしてください:

  .flex-center-demo {
    display: flex;
    justify-content: center;
    align-items: center;
  }

2. クイックグリッド自動配置

これは、ナビゲーションバーまたはダッシュボードを設計している場合に必要になります。いくつかのアイテムのコレクションがあり、それらをまとめて配置する必要がある場合は、これを使用してください。

.auto-grid-demo {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 1rem;
}

最小幅 120 ピクセルのボックスで行を自動的に埋めます。

3. 隣接兄弟セレクター

これは、隣接する要素、見出しの下にある著者名など、見出しの後に来る要素がある場合に便利です。

h2 + p {
    font-style: italic;
    color: blue;
  }

これが画像です:

4. 疑似クラス not() を利用する

ある要素をデザインしているときに、別の要素をデザインする必要がある場合は、これを使用します。以下はボックスのコレクションの例です。特別なクラスに属する 3 番目を除いて CSS を適用します。

.box:not(.special) {
    background-color: #3498db;
    color: #fff;
    margin: 0.5rem;
    padding: 1rem;
    border-radius: 4px;
  }

5. プロのように CSS アニメーションを作成する

初めて CSS アニメーションを適切に作成するのは少し問題があります。これらのキーフレームを使用して、複雑なアニメーションを調整や再利用が簡単な 1 つのルールに単純化します。

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.fade-in-demo {
  animation: fadeIn 3s forwards;
  background-color: #e67e22;
  color: #fff;
  padding: 1rem;
  text-align: center;
  border-radius: 4px;
}

ボーナスチップ！

ここでは、私がいつも使っている追加の CSS デバッグ トリックをいくつか紹介します。 CSS をめちゃくちゃにしてしまったと思っていて、何が問題なのかわからない場合は、すべての要素をこのボックスで囲んでみてください。これは、CSS のデバッグに非常に役立ちました。

/* Debug: Outline every element with a red border */
* {
  outline: 1px solid red !important;
}

この記事がお役に立てば幸いです。私の名前は Sreedeep です。LiveAPI というツールに取り組んでいます。AI を使用して効率的に API ドキュメントを生成できるようにします。

以上が時間を大幅に節約するSSの裏技の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。