JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

CSSで1つの要素に複数のスタイルルールを定義する方法

CSSで1つの要素に複数のスタイルを定義するには？

Web制作をしていると、1つの要素に対して複数のスタイルルールを適用したい場面がよくあります。CSSでは、複数のプロパティとその値を1つの宣言ブロックにまとめて定義することができます。

以下の例では、h1要素に対して文字色・字間・余白・テキスト変換など、複数のスタイルを一度に指定しています。

h1 {
    color: #36C;
    font-weight: normal;
    letter-spacing: .4em;
    margin-bottom: 1em;
    text-transform: lowercase;
}

記述ルールのポイント

「プロパティ: 値」のペアは、必ずセミコロン（;）で区切るのが基本ルールです。なお、ブロックの最後にあるセミコロンは省略可能ですが、後からスタイルを追加した際の記述漏れを防ぐため、付けておくことをおすすめします。

また、宣言はすべて1行にまとめて記述しても問題ありませんが、1行に1つの宣言を記述する方が可読性が高まり、後から修正や管理もしやすくなります。

  1. CSSでhr要素（水平線）のスタイルを設定する方法をわかりやすく解説

    CSSを使ってhr要素（水平線）のスタイルを設定するには、borderプロパティを活用します。hr要素はデフォルトではシンプルな1本の線として表示されますが、border-topやborder-radiusなどを組み合わせることで、実線・破線・二重線・点線・角丸など、さまざまなデザインに自由にカスタマイズできます。以下に、代表的な5種類の水平線スタイルを実装したサンプルコードを紹介します。サンプルコード<!DOCTYPE html> <html> <meta name="viewport" content="width=device-

  2. CSSでラベルのスタイルを設定する方法｜色分けラベルの作り方

    CSSを使用すれば、<span>タグにクラスを割り当てるだけで、色分けされた見やすいラベル（バッジ）を簡単に作成できます。ステータスやカテゴリの表示に役立つため、Webアプリケーションや管理画面などでよく使われるテクニックです。 サンプルコード 以下は、CSSでラベルのスタイルを設定する具体的なコード例です。 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"