CSSルールで複数のプロパティの値を宣言する方法

投稿日: 2022-04-20 2022-04-20
タグ: css, Spin Up

序章

このチュートリアルでは、CSSルールで複数のプロパティの値を宣言する方法を学習します。 1つのルールで複数のプロパティを宣言すると、サイズ、色、配置など、多くのスタイルの指示を要素に一度に適用できます。また、単一のHTMLドキュメント内のさまざまなコンテンツにさまざまなスタイルを適用できるようにするさまざまなCSSルールの作成についても説明します。

前提条件

このチュートリアルに従うには、このシリーズの前のチュートリアルCSSおよびHTML練習プロジェクトのセットアップ方法の指示に従って必要なファイルとフォルダーをセットアップしたことを確認してください。

複数の宣言を含むCSSルールの作成

CSSルールに複数の宣言を追加するには、styles.cssファイルの<h1>ルールを変更してみてください（または、チュートリアルシリーズに従わなかった場合はコードスニペット全体を追加してください）。追加の強調表示された宣言が含まれています。

h1 {
  color: blue;
  font-size: 100px;
  font-family: Courier;
  text-align: center;
}

ファイルを保存し、ブラウザにHTMLドキュメントをリロードします。（HTMLファイルをロードする手順については、チュートリアルステップブラウザでオフラインHTMLファイルを表示する方法を参照してください）。これで、テキストがページの中央に配置され、サイズが100ピクセルになり、Courierフォントでレンダリングされます。

Styled header text

次のセクションでは、CSSルールを追加して、Webページのコンテンツのスタイル設定の可能性を拡張します。

HTMLコンテンツのスタイルを設定するための複数のCSSルールの作成

このセクションでは、HTML <p>要素を使用して、index.htmlファイルにテキストを追加します。 <p>タグにのみ適用される新しいCSSルールセットを使用してプロパティを変更してみます。

index.htmlファイルで、CSSルールの理解と作成のチュートリアルで追加した既存の<h1>A sample title<h1>行の下に<p>Some paragraph text</p>を含む行を追加します。

index.html

<h1>A sample title</h1>
<p>Some paragraph text</p>

index.htmlファイルを保存し、ブラウザウィンドウにリロードして、ファイルがどのように表示されるかを確認します。ブラウザは、次の例のように、「サンプルタイトル」という青い見出しと、その下に「いくつかの段落テキスト」というスタイルのない段落をレンダリングする必要があります。

Webpage output with a blue heading and an unstyled element

次に、CSSルールを追加して<p>要素のスタイルを設定しましょう。 styles.cssファイルに戻り、ファイルの最後に次のルールセットを追加します。

styles.css

. . .
p {
  color: green;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}

ファイルを保存してブラウザウィンドウにリロードし、ファイルがどのように表示されるかを確認します。これで、<p>テキストは、作成したCSSルールで宣言したスタイルになります。

Webpage output with styled text

<h1>および<p>要素のCSSルールができたので、HTMLドキュメントでこれらのタグでマークアップしたテキストは、[でこれらの要素に対して宣言したスタイルルールを採用します。 X203X]

getdocs

8684