スタイルシート言語/CSS

CSS（Cascading Style Sheets）は、HTML文書の外観を制御するスタイルシート言語です。CSSを使うと、文字サイズや色、配置、背景色、ボーダー、マージンなど、HTMLで表示される要素のデザインを制御することができます。

以下は、CSSの基礎的な構文やルールを紹介する簡単なチュートリアルです。

HTML文書へのスタイルの適用方法

CSSは、HTML文書のSTYLE要素内に記述するか、外部の.cssファイルに記述して、HTML文書から読み込むことができます。

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

例えば、以下のCSSコードは、h1タグ内の文字色を赤色にするスタイルシートです。

h1 {
    color: red;
}

CSSを外部ファイルに保存して、HTML文書から読み込むこともできます。外部ファイルを読み込むには、以下のような記述をHEAD要素に追加します。

<head>
    <link rel="stylesheet" href="style.css">
</head>

"style.css"というファイルを読み込んでいます。読み込むファイル名やパスは、自分が作成したファイル名に合わせて変更してください。

CSSのセレクタは、HTML要素を選択するための記述です。セレクタによって、選択したHTML要素に対してスタイルを変更することができます。

以下にいくつかの例を示します。

タイプセレクター(Type Selector)は、HTML要素のタイプに基づいて要素を選択します。例えば、次のように記述します。

h1 {
  color: red;
}

すべての<h1>要素に対して、赤いテキスト色を指定します。

IDセレクター(ID Selector)は、HTML要素のID属性に基づいて要素を選択します。例えば、次のように記述します。

#header {
  background-color: gray;
}

id="header"属性を持つ要素に対して、グレーの背景色を指定します。

クラスセレクター(Class Selector)は、HTML要素のクラス属性に基づいて要素を選択します。例えば、次のように記述します。

.button {
  border: 1px solid black;
  background-color: white;
}

class="button"属性を持つ要素に対して、1ピクセルの黒い線で囲まれ、白い背景色を指定します。

属性セレクター(Attribute Selector)は、HTML要素の属性に基づいて要素を選択します。例えば、次のように記述します。

a[href^="https://"] {
  color: blue;
}

href属性の値がhttps://で始まるすべての<a>要素に対して、青いテキスト色を指定します。

擬似クラス(Pseudo-Class)は、HTML要素の状態に基づいて要素を選択します。例えば、hover状態にある要素にスタイルを適用するには、次のように記述します。

a:hover {
  text-decoration: underline;
}

マウスが<a>要素の上にあるときに、テキストに下線を表示します。

擬似要素(Pseudo-Element)は、HTML要素の一部分にスタイルを適用するために使用されます。例えば、::before擬似要素を使用して、要素の前に内容を挿入することができます。

p::before {
  content: ">> ";
  font-weight: bold;
}

すべての<p>要素の前に、>> というテキストを挿入します。

以下は、よく使用されるCSSプロパティの一覧です。プロパティ名をアルファベット順に並べました。

プロパティ名	説明
align-content	複数行のフレックスアイテムの垂直方向の配置を調整します。
align-items	フレックスアイテムの垂直方向の配置を調整します。
align-self	個々のフレックスアイテムの垂直方向の配置を調整します。
background	背景色、背景画像、および背景画像の位置を設定します。
border	要素の境界線のスタイル、幅、色を設定します。
box-shadow	要素に影を追加します。
color	テキストの色を設定します。
display	要素の表示方法を設定します。
flex	フレックスコンテナ内のフレックスアイテムのサイズ、順序、および配置を設定します。
font-family	テキストのフォントファミリーを設定します。
font-size	テキストのフォントサイズを設定します。
font-weight	テキストの太さを設定します。
height	要素の高さを設定します。
justify-content	フレックスアイテムの水平方向の配置を調整します。
margin	要素の余白を設定します。
padding	要素の内側の余白を設定します。
position	要素の位置を設定します。
text-align	テキストの水平方向の配置を調整します。
text-decoration	テキストの下線や取り消し線などの効果を設定します。
text-transform	テキストの大文字/小文字を変換します。
width	要素の幅を設定します。
z-index	要素の重なり順序を設定します。

これは一般的なCSSプロパティの一部であり、すべてを網羅するものではありません。また、各プロパティには多くのオプションがあり、それらはすべてここに記載することはできません。