基本書式

基本書式

前節では CSS は style 要素内に記述されていました。

<style>
  body {
    font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN",
      sans-serif;
  }
  h1 {
    color: gray;
  }
  p {
    text-align: center;
  }
  .class1 {
    padding: 5rem;
    background-color: #f0f0f0;
    border-radius: 5px;
  }
</style>

次の書式を続けて記載していきます。

セレクタ {
    プロパティ1：値1;
    プロパティ2：値2;
}

セレクタ

セレクタは、スタイルを適用する HTML 要素を指定するために使用されます。セレクタには、要素セレクタ、クラスセレクタ、ID セレクタ、属性セレクタなど、さまざまな種類があります。例えば、p セレクタはすべての p 要素にスタイルを適用し、.intro セレクタはクラス属性が intro の要素にスタイルを適用します。

プロパティ

プロパティは、スタイルの特定の側面を定義するために使用されます。プロパティには、色、フォントサイズ、マージン、パディングなど、さまざまな種類があります。例えば、color プロパティはテキストの色を指定し、font-size プロパティはフォントサイズを指定します。

値

値は、プロパティに対して具体的なスタイルを指定するために使用されます。値には、色の名前や数値、単位などが含まれます。例えば、color プロパティの値として blue を指定すると、テキストの色が青になります。また、font-size プロパティの値として 16px を指定すると、フォントサイズが 16 ピクセルになります。

例

この例では、p セレクタを使用してすべての p 要素に対して、color プロパティを blue に、font-size プロパティを 16px に設定しています

p {
  color: blue; /* テキストの色を青にする */
  font-size: 16px; /* フォントサイズを16ピクセルにする */
}