HTML5 CSS3

CSSの基本的な書方

CSS は書き方の書式みたいになっている

CSSは、HTML文書にスタイルを追加するための言語です。CSSを使うことで、HTML要素の外観やレイアウトを制御することができます。以下は、CSSの基本的な書き方の例です。

  1. スタイルの指定方法 HTML要素にスタイルを指定するには、以下のように書きます。
セレクター {
  プロパティ: 値;
  プロパティ: 値;
  プロパティ: 値;
  ...
}
　
  1. セレクターの指定方法 CSSでスタイルを適用する要素を選択するには、セレクターを使います。セレクターは、HTML要素のタグ名、クラス、IDなどを指定することができます。以下は、セレクターの例です。
/* タグ名を指定する場合 */
p {
  プロパティ: 値;
}

/* クラスを指定する場合 */
.class名 {
  プロパティ: 値;
}

/* IDを指定する場合 */
#id名 {
  プロパティ: 値;
}
  1. プロパティと値の指定方法 CSSで指定できるプロパティは多数あります。以下は、代表的なプロパティの例です。
/* テキストの色を指定する */
color: red;

/* 背景色を指定する */
background-color: yellow;

/* テキストのフォントサイズを指定する */
font-size: 16px;

/* テキストを中央揃えにする */
text-align: center;

/* 要素の幅を指定する */
width: 200px;

/* 要素の高さを指定する */
height: 100px;

/* 要素の枠線を指定する */
border: 1px solid black;
  1. CSSファイルの読み込み方法 CSSは、HTML文書内に直接記述することもできますが、外部のCSSファイルを読み込むこともできます。外部のCSSファイルを読み込むには、以下のように書きます。
bashCopy code<head>
  <link rel="stylesheet" href="スタイルファイルのパス">
</head>

セレクターの種類

CSSでHTML要素を指定する方法には、いくつかの種類があります。

タグセレクター

HTML要素のタグ名を指定して、スタイルを適用します。例えば、以下のように書くことで、すべての段落にスタイルを適用します。

p {
  font-size: 16px;
  color: #333;
}

クラスセレクター

HTML要素にクラス名を付けて、そのクラス名を指定してスタイルを適用します。例えば、以下のように書くことで、クラス名が「text-center」の要素にスタイルを適用します。

.text-center {
  text-align: center;
}

IDセレクター

HTML要素にIDを付けて、そのIDを指定してスタイルを適用します。IDは、文書内で一意である必要があります。例えば、以下のように書くことで、IDが「header」の要素にスタイルを適用します。

#header {
  background-color: #EEE;
}

子孫セレクター

HTML要素の親子関係を指定して、スタイルを適用します。例えば、以下のように書くことで、クラス名が「container」の要素内にあるすべての段落にスタイルを適用します。

 {
  font-size: 16px;
  color: #333;
}

-HTML5 CSS3