これらのCSS効率化テクニック、知っておくべき！

原文著者：knaagar

原文リンク：https://dev.to/devsyedmohsin/css-tips-and-tricks-you-will-add-to-cart-163p

翻訳：沙漠の果ての狼

HTML と JavaScript のテクニックを終えたので、次は CSS のヒントとトリックをご紹介します 💖✨

1. 印刷メディアクエリ

印刷メディアクエリを使うと、サイトの印刷用バージョンのスタイルを設定できます。

@media print {  
  * {  
    background-color: transparent;  
    color: #000;  
    box-shadow: none;  
    text-shadow: none;  
  }  
}

2. グラデーションテキスト

h1 {  
  background-image: linear-gradient(to right, #c6ffdd, #fbd786, #f7797d);  
  background-clip: text;  
  -webkit-background-clip: text;  
  color: transparent;  
}

3. メディアのデフォルトを修正する

CSS リセットを書くときは、これらのプロパティを追加してメディアのデフォルトを改善しましょう。

img,  
picture,  
video,  
svg {  
  max-width: 100%;  
  object-fit: contain; /* 良好なアスペクト比を維持 */  
}

4. column count

列プロパティを使ってテキスト要素に美しい段組みレイアウトを作成できます。

p {  
  column-count: 3;  
  column-gap: 5rem;  
  column-rule: 1px solid salmon; /* 段間の境界線 */  
}

5. position を使って要素を中央揃え

div {  
  position: absolute;  
  top: 50%;  
  left: 50%;  
  transform: translate(-50%, -50%);  
}

6. カンマ区切りのリスト

li:not(:last-child)::after {  
  content: ",";  
}

7. スムーズスクロール

html {  
  scroll-behavior: smooth;  
}

8. hyphens

hyphens プロパティは、ブラウザが改行時に単語をハイフンでつなぐ方法を指定します。ハイフンの使用を完全に禁止したり、ブラウザがいつ使用するかを制御したり、ブラウザに決定させたりできます。

9. first letter

不要な span を避け、疑似要素を使ってコンテンツをデザインしましょう。先頭文字の疑似要素に加えて、先頭行の疑似要素もあります。

h1::first-letter {  
  color: #ff8a00;  
}

10. accent-color

accent-color プロパティは、ブラウザのデフォルトスタイルが提供するフォームコントロールのアクセントカラーを、カスタムカラーで再着色できます。

11. 画像入りテキスト

h1 {  
  background-image: url("illustration.webp");  
  background-clip: text;  
  color: transparent;  
}

12. placeholder 疑似要素

placeholder 疑似要素を使って、プレースホルダーのスタイルを変更します：

input::placeholder {  
  font-size: 1.5em;  
  letter-spacing: 2px;  
  color: green;  
  text-shadow: 1px 1px 1px black;  
}

13. 色のアニメーション

カラーローテーションフィルターを使って要素の色を変化させます。

button {  
  animation: colors 1s linear infinite;  
}  

@keyframes colors {  
  0% {  
    filter: hue-rotate(0deg);  
  }  
  100% {  
    filter: hue-rotate(360deg);  
  }  
}

14. margin を使って中央揃え

.parent {  
  display: flex; /* display: grid; でも可 */  
}  

.child {  
  margin: auto;  
}

15. clamp() 関数

clamp() 関数は、値を最小値と最大値の間に制限します。値が範囲を超えた場合、最小値または最大値の間で適切な値を選択します。引数は3つ：最小値、推奨値、最大値。

h1 {  
  font-size: clamp(5.25rem, 8vw, 8rem);  
}

16. selection 疑似クラス

選択された要素のスタイルを設定します。

::selection {  
  color: coral;  
}

17. decimal leading zero

リストスタイルタイプを decimal-leading-zero に設定します。

li {  
  list-style-type: decimal-leading-zero;  
}

18. Flex を使って中央揃え

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

19. カスタムカーソル

html {  
  cursor: url("no.png"), auto;  
}

20. caret-color

caret-color プロパティは、挿入カーソル（キャレット）の色を定義します。ここで言う挿入カーソルとは、ウェブページの編集可能領域内で、ユーザーの入力がどこに挿入されるかを示す、点滅する縦棒 | のことです。

22. resize プロパティ

resize プロパティを none に設定すると、テキストエリアのサイズ変更を防げます。

textarea {  
  resize: none;  
}

23. only-child

CSS の疑似クラス :only-child は、兄弟要素を持たない要素にマッチします。同等のセレクタとしては :first-child:last-child や :nth-child(1):nth-last-child(1) も書けますが、前者の方が重みが少し低くなります。

24. grid を使って中央揃え

.parent {  
  display: grid;  
  place-items: center;  
}

25. text-indent

text-indent プロパティは、ブロック要素の最初の行のテキストの前に挿入されるスペースの量（字下げ）を定義します。

p {  
  text-indent: 5.275rem;  
}

26. list style type

CSS プロパティ list-style-type は、リスト要素のマーカー（例：丸点、記号、カスタムカウンタースタイル）を設定します。

li {  
  list-style-type: "🟧";  
}