CSSの基本構造

Posted on by

CSS（Cascading Style Sheets）は、ウェブページの見た目を設定するためのスタイルシート言語です。
CSSの基本構造は、ルールセット（ruleset）と呼ばれるもので構成されています。
ルールセットは、セレクタ（selector）、プロパティ（property）、および値（value）で構成されます。

CSSの基本構造

CSSルールセットの構造

CSSルールセットは、特定のHTML要素に対してスタイルを適用するための命令です。
ルールセットは以下のように構成されていす。

セレクタ {
    プロパティ: 値;
}

セレクタ（Selector）

セレクタは、どのHTML要素にスタイルを適用するかを指定します。
セレクタにはいくつかの種類があります。

要素セレクタ

要素の名前を直接指定して、その要素にスタイルを適用します。

p {
    color: blue;
}

これは、すべての <p> 要素のテキストを青色に設定します。

クラスセレクタ

クラス属性を持つ要素にスタイルを適用します。
クラス名の前にドット（.）を付けます。

.highlight {
    background-color: yellow;
}

これは、クラス highlight を持つすべての要素の背景色を黄色に設定します。

IDセレクタ

ID属性を持つ要素にスタイルを適用します。
ID名の前にシャープ（#）を付けます。IDは一意である必要があります。

#header {
    font-size: 24px;
}

属性セレクタ

特定の属性を持つ要素にスタイルを適用します。

input[type="text"] {
    border: 1px solid #ccc;
}

これは、type 属性が text のすべての <input> 要素にボーダーを設定します。

擬似クラスセレクタ

要素の特定の状態にスタイルを適用します。

a:hover {
    color: red;
}

これは、マウスホバー時にリンクの色を赤に設定します。

プロパティ（Property）

プロパティは、スタイルの特性を指定します。
プロパティには、多くの種類がありますが、以下は一般的なものです。

color

テキストの色を指定します。

p {
    color: blue;
}

font-size

フォントサイズを指定します。

h1 {
    font-size: 36px;
}

background-color

背景色を指定します。

.highlight {
    background-color: yellow;
}

margin

要素の外側の余白を指定します。

div {
    margin: 20px;
}

padding

要素の内側の余白を指定します。

div {
    padding: 10px;
}

border

要素のボーダーを指定します。

img {
    border: 1px solid #000;
}

値（Value）

値は、プロパティに適用される具体的な設定です。
値には、色、サイズ、数値、キーワードなどがあります。

色の値

色は名前、16進数、RGB、RGBA、HSL、HSLAで指定できます。

p {
    color: blue;            /* 色の名前 */
    color: #0000ff;         /* 16進数 */
    color: rgb(0, 0, 255);  /* RGB */
    color: rgba(0, 0, 255, 0.5); /* RGBA (透明度) */
    color: hsl(240, 100%, 50%);  /* HSL */
    color: hsla(240, 100%, 50%, 0.5); /* HSLA (透明度) */
}

サイズの値

サイズは、px、em、rem、%、vh、vwなどの単位で指定できます。

p {
    font-size: 16px;
    margin: 1em;
    padding: 10%;
}

キーワードの値

いくつかのプロパティは、特定のキーワードを受け入れます。

div {
    display: block;        /* ブロック要素 */
    display: inline;       /* インライン要素 */
    position: relative;    /* 相対位置 */
    position: absolute;    /* 絶対位置 */
}

まとめ

CSSの基本構造は、セレクタ、プロパティ、値から成り立っています。
セレクタはどの要素にスタイルを適用するかを指定し、プロパティはどの特性を変更するかを指定し、
値はその特性の具体的な設定を指定します。
これらを組み合わせることで、ウェブページの見た目とレイアウトを柔軟に制御することができます。