CSS の使用は、バックエンド開(kāi)発者にとって常に悪夢(mèng)です。ここでは、これらのフロントエンド開(kāi)発者と共謀して、フロントエンド開(kāi)発者ですら見(jiàn)逃す CSS のトリックを?qū)Wびましょう。

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

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

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

2. クイックグリッド自動(dòng)配置

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

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

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

3. 隣接兄弟セレクター

これは、隣接する要素、見(jiàn)出しの下にある著者名など、見(jiàn)出しの後に來(lái)る要素がある場(chǎng)合に便利です。

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

これが畫像です:

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

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

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

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

初めて CSS アニメーションを適切に作成するのは少し問(wèn)題があります。これらのキーフレームを使用して、複雑なアニメーションを調(diào)整や再利用が簡(jiǎn)単な 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 をめちゃくちゃにしてしまったと思っていて、何が問(wèn)題なのかわからない場(chǎng)合は、すべての要素をこのボックスで囲んでみてください。これは、CSS のデバッグに非常に役立ちました。

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

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

以上が時(shí)間を大幅に節(jié)約するSSの裏技の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。