CSSタイプセレクター

CSSタイプセレクター （要素タイプセレクターとも呼ばれます ）は、HTML要素をそのタイプでターゲットにするために使用されます。タイプは、

などの組み込みのHTML要素のいずれかです。 、

、<ボタン> 。

タイプセレクター構文

次の構文を使用して、タイプセレクターを介して要素のスタイルを設定します

element-name {
    property-name: value;
}

たとえば、タイプセレクタを使用してこのボタン要素のスタイルを設定しましょう：

<button>Click me!</button>

CSS：

button {
    font-size: 32px;
    padding: 1rem;
    color: red;
}

結果：

タイプセレクターを使用すると、ウェブサイトの要素を広くスタイル設定します。

したがって、Webサイトに10個のボタン要素があり、上からCSSを使用する場合、すべてのボタンに同じスタイルが適用されます。このかもしれないし、そうでないかもしれない 状況に応じて、あなたが望むものになりましょう。

基本スタイル

幅広い基本スタイルをHTML要素に直接設定することをお勧めします。ただし、基本的なスタイルはできるだけ具体的でないようにする必要があります。これは、UI全体で意味のある視覚的な一貫性を強制し、不必要なコードの繰り返しを回避する方法として機能する必要があります。

一貫性を保ちたいことが多い領域：

• フォント（書体とも呼ばれます）
• フォントサイズ
• 線の高さ
• 色
• 間隔（空白）

たとえば、UIで選択したフォントファミリと一貫性を保つことをお勧めします。 5種類のフォントを使用したくない場合は、UIが奇妙で一貫性のないものになります。ほとんどのWebサイトでは、1〜最大3つの異なるフォントファミリが必要です。

Webサイトで2種類のフォントを使用するとします。

1. 段落とリストのセリフ
2. 他のすべてのサンセリフ。

この場合、幅広いタイプセレクターを使用してこれらのフォントファミリーを適用することは完全に理にかなっています。

/* Roboto is a sans serif*/
html, body {
  font-family: roboto;  
}

/* Merriweather is a serif*/
p, li {
  font-family: merriweather;
}

上記のCSSでは、Merriweatherを使用する段落とリストを除いて、すべてのHTML要素がRobotoフォントを使用します。

タイプセレクターを使用しない場合

ページ上のその要素のすべての表現に影響を与えるため、ストロークの広い要素を「オーバースタイル」することは一般的に悪い習慣です。

たとえば、CSSではこれを行わないでください：

button {
  font-size: 1.125rem;
  padding: 1.5rem;
  margin-top: 1rem;
  border-radius: 8px;
  border: 1px solid #444444;
  color: green; 
  background-color: black; 
  transition: all 1s ease-in;
}

上記は、すべてに一連のスタイルを適用します あなたのウェブサイトのボタン要素。 Webサイトにさまざまな役割を持つ複数のボタンがある可能性があります。基本的なUIデザイン（特にタイポグラフィ）の一貫性を保つ必要がありますが、すべてがまったく同じように見えたり動作したりすることはおそらく望ましくありません。特にマージン値のようなものは、特定の要素タイプに広く適用するのは危険です。

もちろん、クラスセレクターを使用すると、要素の基本スタイルをいつでもオーバーライドできます。ただし、クラスを使用する目的は、要素セレクターから渡された基本スタイルを元に戻したりオーバーライドしたりするために多くの時間を費やすことではありません。

要素でクラスを使用する目的は次のとおりです。

• 拡張する それを必要とする特定の状況での要素の基本スタイル。たとえば、ヒーローセクションの召喚状ボタンを他のどこよりも少し大きくしたい場合があります。
• 再利用性。クラスは無限に再利用できるため、柔軟性と効率性が向上します。その好例は、単一目的のユーティリティクラスに基づくTailwind CSSフレームワークであり、機能CSSとしても知られています。

要約：

• タイプセレクターを使用して、一貫性を通じてブランドの視覚的アイデンティティを強化する一般的なスタイルのベースラインを確立します。
• クラス（場合によってはID）を使用して、基本スタイルの上に構築し、特定の環境での役割に基づいて要素のスタイルを設定します。