HTML・CSSの学び直し。


# HTML
## タグ構成
~~~HTML
<h1 id="id1">かちかちやま</h1>
~~~
- 要素：`h1`のタグ全体
    - 要素名：`h1`
- 属性（プロパティ）：`id="id1"`
    - 属性名：`id`
    - 属性値：`id1`
- リンクについて
    - アンカーリンク：ウェブページ内の特定の位置へ直接ジャンプできるように設定されたリンク

## 属性について
- 属性は、タグに「もっと詳しい情報」を伝えるためのものです。
    - タグに「付け足し説明」をしてあげるイメージ。

### 書き方
```HTML
<tag 属性名="値">コンテンツ</tag>
```
- 属性名：何を指定するかの名前
- 値：その属性に与える具体的な情報

### 例
```HTML
<a href="https://example.com">リンク</a>
```
→ `href` が「属性」で、「リンク先URL」を指定してる


### よく使う属性
| 属性名           | よく使うタグ       | どんなときに使う？（意味）                                        |
|------------------|--------------------|---------------------------------------------------------------|
| `id`             | すべてのタグ        | 1つだけの名前をつける。<br>CSSやJSで特定の要素を操作したいとき。   |
| `class`          | すべてのタグ        | 複数の要素に名前をつけて、グループでまとめて操作できる。         |
| `href`           | `<a>`              | リンク先のURLを指定する。                                        |
| `src`            | `<img>`など         | 画像や動画のファイル場所を指定する。                             |
| `alt`            | `<img>`            | 画像が表示できないときに出る代わりのテキスト。                   |
| `title`          | すべてのタグ        | マウスを乗せたときに出てくる説明文（ツールチップ）。             |
| `target`         | `<a>`              | `_blank`にすると新しいタブでリンクが開く。                        |
| `type`           | `<input>`           | 入力欄の種類（例：`text`、`password`、`email`など）。            |
| `value`          | `<input>`           | 入力欄やボタンの中の初期値を指定。                              |
| `name`           | `<input>`           | フォームで送信するときのデータ名（サーバー側で使われる）。       |
| `placeholder`    | `<input>`           | 入力欄に薄く表示されるヒント文字。                              |
| `checked`        | `<input type="checkbox">` | 最初からチェックを入れておく。                         |
| `disabled`       | フォームタグ         | 選択や入力ができなくなる。                                        |
| `required`       | フォームタグ         | 入力が必須になる（空だと送信できない）。                         |

## 終了タグが不要な要素
HTMLには2種類のタグがあります。

### 1. 内容を持つタグ

開始タグと終了タグでコンテンツを囲むタイプです。

* **例**:
    * `<p>ここにテキストが入る</p>`
    * `<div>色々な要素を囲む</div>`
    * `<a>リンクのテキスト</a>`
    * `<h1>見出し</h1>`

### 2. 内容を持たないタグ

開始タグだけで完結し、終了タグは不要なタイプです。
これらのタグは、それ自体が機能や情報を示し、中にコンテンツを置くことはありません。

* **例**:
    * `<input>` (入力フォーム)
    * `<img>` (画像)
    * `<br>` (改行)
    * `<hr>` (水平線)
    * `<meta>` (メタ情報)
    * `<link>` (CSSファイルなどの外部リソースのリンク)

# CSS

## セレクタ

セレクタとは、**CSSをどの要素に対して適用するのか**を指定するものです。

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

## CSSセレクタの種類
- 1.ユニバーサルセレクタ：`*`（全部の要素にマーク）
- 2.タイプセレクタ：`p`や`div`などタグ名そのもの
- 3.クラスセレクタ：`class`で指定したもの（例：`.menu`）
- 4.IDセレクタ：`id`で指定したもの（例：`#header`）
- 5.属性セレクタ：`[type="text"]`のように、属性で選ぶ
- 6.擬似クラス：`:hoverや:nth-child()`のような状態や順番の指定
- 7.擬似要素：タグがつけられない範囲に対してCSSを適用するセレクタ

複雑なものをメインに、詳しく解説していきます。

### 属性セレクタ
HTMLのタグには、いろんな属性（`href` や `type`、`disabled` など）がついています。
その属性をもとにスタイルを当てられるのが、属性セレクタです。

```CSS
[属性名] {
  スタイル;
}
```

下記のとき、よく利用されます。
- フォームの種類ごとに見た目を変えたい（`input`の`type`属性）
- リンク先が外部サイトか内部かでスタイルを変えたい（`href`属性）
- `disabled`されてるボタンだけ見た目を変えたい
- クラス名に特定の文字が含まれる要素をまとめて選びたい

#### 使用例

```HTML
<input type="text" placeholder="名前">
<input type="submit" value="送信">
<input type="checkbox" checked>
<a href="https://example.com/page1">ページ1</a>
<a href="https://example.com/page2">ページ2</a>
```

```CSS
/* typeが"text"のinput要素にスタイルを適用 */
input[type="text"] {
  border: 1px solid green;
  padding: 5px;
}

/* typeが"submit"のinput要素にスタイルを適用 */
input[type="submit"] {
  background-color: #007bff;
  color: white;
  border: none;
}

/* hrefが特定のURLと完全に一致するa要素にスタイルを適用 */
a[href="https://example.com/page1"] {
  font-weight: bold;
}
```

### 擬似クラス
- 「特定の状態になった要素」にスタイルを当てるための特別なセレクタです。
- 例えば、「マウスがのったとき」とか、「最初の子だけ」とか、HTMLでは書けない**状態や条件**にCSSを適用できます。

いくつか種類があるので、それぞれ解説していきます。

#### 1.式擬似クラス
- 「子要素の中で〇番目の子だけにスタイルを当てたい！」というときに使える、ちょっぴり便利なルール付きセレクタです。
- 式には`odd`（奇数）/`even`（偶数）のキーワード、数字のみも可となります。

##### a:`:nth-child(n)`
「親の中でn番目の要素」にスタイルを当てる
```CSS
li:nth-child(2) {
  color: red;
}
```
➡️ `li`の2番目の要素だけが赤くなる！

##### b:`nth-of-type(n)`
同じタグ（要素）の中でn番目を指定したいとき！
```CSS
p:nth-of-type(1) {
  color: blue;
}
```
➡️ `<p>`の中で最初のやつだけ青に！

##### c:`nth-last-of-type(n)`
「同じタグの中で、後ろから数えて〇番目」にスタイルを当てたいとき！
```CSS
p:nth-last-of-type(1) {
  color: red;
}
```
➡️ 最後の`<p>`タグだけが赤くなる！

※偶数指定の方法はいくつかあります。
- `even`
```CSS
#footlinks section:nth-child(even){
}
```

- `2n`
```CSS
#footlinks section:nth-child(2n){
}
```

- `n + 2`
```CSS
#footlinks section:nth-child(n + 2){
}
```

#### 2.兄弟擬似クラス

##### a:`first-child`/ `last-child`
最初または最後の要素に指定できる！
```CSS
/* 最初と最後のアイテムを強調 */
li:first-child,
li:last-child {
  background-color: gold;
  font-weight: bold;
}
```

##### b:`first-of-child`/`last-of-child`
同じタグの中で最初の子または最後の子に指定できる！

#### 3.その他擬似クラス
HTMLのルート要素（＝ページ全体の一番上）に指定する
```CSS
要素:root
```

選択された要素に指定
```CSS
要素:focus
```

チェックされた要素に指定
```CSS
要素:checked
```

要素が子要素を持たない（内部が空である）場合にスタイルを適用

```CSS
要素:empty

/* 中身が空のdivに背景色を適用 */
    div:empty {
      background-color: lightcoral;
      color: white;
      text-align: center;
      padding: 20px;
    }
```

指定した要素（セレクタ）を除外する
```CSS
要素:not(セレクタ)

/* div以外の要素に背景色を付ける */
*:not(div) {
      background-color: lightgray;
    }
```
#### リンクに使う4つの擬似クラスの優先順位
以下の4つには優先順位があるよ👇
```CSS
a:link → a:visited → a:hover → a:active
```
| 擬似クラス      | 意味               |
| ---------- | ---------------- |
| `:link`    | まだクリックしていないリンク   |
| `:visited` | 一度訪れたことがあるリンク    |
| `:hover`   | マウスを上にのせているとき    |
| `:active`  | リンクをクリックして押してる最中 |

### 擬似要素
- タグがつけられない範囲に対してCSSを適用するセレクタ
- インライン要素として作成されるので、ブロックレベルにしたいときは`display`を設定すること

#### 使用例紹介

- 段落やブロックの「最初の行」だけを対象にスタイルを変えられる擬似要素
```CSS
p::first-line {
  font-weight: bold;     /* 最初の行だけ太字に */
  color: red;            /* 赤色に */
}
```

- 段落やブロックの「最初の1文字」だけを特別に装飾できる擬似要素
```CSS
p::first-letter {
  font-size: 2em;        /* 文字を大きく */
  color: blue;           /* 青色に */
  float: left;           /* 左に浮かせて段落と並べる */
  margin-right: 5px;     /* 文字の右に余白 */
}
```
- ある要素の「あと」に、見た目だけの内容を追加できる機能 
```CSS
h1::after {
  content: "🌸";
}
```

## 結合子
セレクタ同士をつなげて、もっと細かく狙いたい場所を指定できるものです。
よく使う結合子をご紹介します。

**1. セレクタ1>セレクタ2：子セレクタ（直下の子だけに適用）**
- セレクタ1の子要素であるセレクタ2にスタイルを適用します。
    - セレクタ1: 親となる要素。
    - セレクタ2: セレクタ1 の**直接の子**要素。
```CSS
ul > li {
  font-weight: bold;
}
```
- `<ul>`の直下の`<li>`だけに適用する
- 例えば、
`<ul><li>OK</li><div><li>NG</li></div></ul>`の場合、2つ目の`<li>NG</li>`は選ばれない。

**2.セレクタ1 セレクタ2：子孫セレクタ**
- 「セレクタ1 の中に含まれる（子孫である）**すべての セレクタ2**にスタイルを適用する」という意味になります。
    - 親となる要素をセレクタ1で指定します。
    - セレクタ1 の子孫にあたる要素をセレクタBで指定します。
```CSS
nav li,
nav a {
   background-color: yellow;
}
```
- `nav li` → `<nav>`の中にある`<li>`要素すべてに、黄色の背景がつく。
- `nav a` → `<nav>`の中にある`<a>`要素すべてに、黄色の背景がつく。

:::note info
上記の例のように、違うセレクタを「`,`」でまとめてグループ化して、そのグループに同じスタイルを一気に適用できます！
:::

**3.セレクタ1+セレクタ2：隣接兄弟セレクタ**
- **同じ親要素を持つ要素の中**で、「セレクタ1」の直後にある「セレクタ2」にスタイルを適用します。
    - セレクタ1 : 基準となる要素。
    - セレクタ2 : セレクタ1 の直後に続く兄弟要素。 
```HTML
<div class="parent">
  <p>最初の段落</p>
  <p>二番目の段落</p>
  <span>これはスパン</span>
  <p>三番目の段落</p>
</div>

<p>これは兄弟ではない段落</p>
```
~~~CSS
/* p要素の直後に続くp要素にスタイルを適用 */
p + p {
  color: blue;
  margin-top: 20px;
}
~~~
- 最初の段落 の直後に続く 二番目の段落 は青色になり、`margin-top` が適用されます。
- 二番目の段落 の直後には `<span>`要素が続くため、三番目の段落 は `p + p`の対象になりません。
- これは兄弟ではない段落 は`div.parent`の外にあり、同じ親を持たないので、対象外です。

**4.セレクタ1~セレクタ2：一般兄弟セレクタ**
- 同じ親要素を持つ要素の中で、「セレクタ1」の後にあるすべての「セレクタ2」にスタイルを適用します。
    - セレクタ1: 基準となる要素。
    - セレクタ2: セレクタ1 の後に続くすべての兄弟要素。
```HTML
<div class="parent">
  <p>最初の段落</p>
  <p>二番目の段落</p>
  <span>これはスパン</span>
  <p>三番目の段落</p>
</div>

<p>これは兄弟ではない段落</p>
```

```CSS
/* p要素の後に続くすべてのp要素にスタイルを適用 */
p ~ p {
  color: green;
  border-left: 3px solid green;
  padding-left: 5px;
}
```
- 最初の段落 の後に続く 二番目の段落 は緑色になり、左ボーダーが適用されます。
- 最初の段落 の後に続く 三番目の段落 も緑色になり、左ボーダーが適用されます。間に `<span>`が挟まっていても適用されます。
- これは兄弟ではない段落 は同じ親ではないので、対象外です。


:::note info
結合子では、`ul.myList`など、ある要素のクラス名・id名などの指定も可能です。
:::

**5.スペースがないクラス**
```CSS
セレクタA.セレクタB
```
スペースがない場合、「セレクタA」と「セレクタB」の両方のクラス（またはタグとクラス）を同時に持っている要素を指定します。

## CSSセレクタの優先順位
- CSSでは、`!important`のついている指定は最優先として扱います。
- 残りは、使用しているセレクタの種類から優先度を計算します。
    - 計算結果の優先度が同じだった場合、後の指定を優先

#### 優先度早見表
| セレクタの種類          | 優先度ポイント | 例                        |
|-------------------------|----------------|-----------------------------|
| インラインスタイル      | 1000点         | `<p style="color: red;">`  |
| IDセレクタ（`#id`）     | 100点          | `#header`                  |
| クラス（`.class`）<br>属性（`[type="text"]`）<br>擬似クラス（`:hover`など） | 10点 | `.btn`, `[type="text"]`, `:hover` |
| タグセレクタ（`div` など）<br>擬似要素（`::before`など） | 1点 | `div`, `p`, `::after`      |
| ワイルドカード（`*`）    | 0点             | `*`（ほぼ優先度なし）        |

例：同じ`<p>`タグにすべて当たるとしても…
`#main`が最も強い → 緑になります！
~~~CSS
/* 優先度：10点 */
.btn {
  color: blue;
}

/* 優先度：1点 */
p {
  color: red;
}

/* 優先度：100点 */
#main {
  color: green;
}
~~~

## `color`：文字色
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2627033/b91ad518-fc01-4413-b85b-58d7b5688c25.png)

```CSS
color : #eee;
```

## `background`：背景設定
- HTML要素の背景色や、背景画像を設定できます。
- `background`プロパティで設定できるのは、`Content`、`Padding`、`Border` の領域となります。
　
よく使うプロパティは以下です。

| **プロパティ**               | **内容**          |
| ----------------------- | --------------- |
| `background-color`      | 背景の色            |
| `background-image`      | 背景に画像を設定する      |
| `background-repeat`     | 背景画像を繰り返すかどうか   |
| `background-position`   | 背景画像の表示位置       |
| `background-size`       | 背景画像のサイズ        |
| `background-attachment` | スクロール時の背景の動き    |
| `background-blend-mode` | 複数の背景画像や色を「混ぜる」 |


個人的に複雑なものを、解説していきます。

### 1.`background-repeat`
背景画像を繰り返すかどうかを指定します。
```CSS
div {
  background-repeat: no-repeat; /* 繰り返さない */
}
```
| 値         | 意味           |
| --------- | ------------ |
| repeat    | 縦横に繰り返す（初期値） |
| no-repeat | 繰り返さない       |
| repeat-x  | 横だけ繰り返す      |
| repeat-y  | 縦だけ繰り返す      |

### 2.`background-position`
背景画像の表示位置を指定します。
```CSS
div {
  background-position: center top;
}
```
#### 指定方法
1.キーワード指定

| 値                   | 意味     |
| ------------------- | ------ |
| left, right, center | 横方向の位置 |
| top, bottom, center | 縦方向の位置 |

```CSS
background-position: left top;  /* 画像の左上を切り取って表示 */
background-position: center center;  /* 画像の中央を切り取って表示  */
background-position: right bottom;  /* 画像の右下を切り取って表示  */
```

1つだけ設定した際は、
横方向と縦方向の両方に同じ値が適用されます。
```CSS
/*横も縦も中央に設定*/
background-position: center;
```

2.数値指定
```CSS
background-position: 20px 10px;  /* 左から20px、上から10pxの位置 */
background-position: 50% 50%;    /* 横・縦ともに中央 */
background-position: 100% 0%;    /* 右上 */
```
### 3.`background-size`
背景画像の大きさを調整します。
```CSS
div {
  background-size: cover;
}
```
| 値       | 意味                       |
| ------- | ------------------------ |
| auto    | 元のサイズ（初期値）               |
| cover   | 要素を覆うようにリサイズ             |
| contain | 要素の中に収まるようにリサイズ          |
| 幅 高さ    | `100px 50px` のように指定 |


### 4.`background-attachment`
背景画像を「固定して動かさない」か「コンテンツと一緒にスクロールさせる」かを決めます。
```CSS
div {
  background-attachment: fixed;
}
```
| 値      | 意味            |
| ------ | ------------- |
| scroll | 一緒にスクロール（初期値） |
| fixed  | 背景だけ固定して動かない  |
| local  | コンテンツに合わせて動く  |
- `scroll`は、スクロールして見上げたり見下ろしたりすると、画像も一緒に動いて見えなくなったり、再び見えたりします。
- `fixed`は、上下にスクロールしても、背景画像は常に同じ位置に固定されて見えます。
- `local`は、要素のコンテンツと一緒に背景がスクロールします。

### 5.`background-blend-mode`
- 背景画像や背景色が複数ある場合に、それらをどのように合成するかを制御するために使用されます。
- このプロパティは、以下の要素の組み合わせに適用されます。
    - `background-image` (複数指定可)
    - `background-color`
- これらの背景が重なっている場合に、それぞれがどのように混ざり合って最終的な色になるかを指定します。

```CSS
background-image: url("画像1.jpg"), url("画像2.jpg");
background-color: rgba(255, 0, 0, 0.5);
background-blend-mode:  <mode>;
```

| モード名          | 効果のイメージ                                 |
| ------------- | --------------------------------------- |
| `normal`      | ブレンドは行われず、一番上の背景が下の背景をそのまま覆い隠します。|
| `multiply`（使用頻度高）| 上下の色を掛け合わせます。暗い色が優先され、全体的に暗くなります。白い部分は透明になり、黒い部分は黒のまま残ります。 |
| `screen`（使用頻度高） | 上下の色を反転させて掛け合わせます。明るい色が優先され、全体的に明るくなります。黒い部分は透明になり、白い部分は白のまま残ります。|
| `overlay`（使用頻度高） | `multiply`と`screen`を組み合わせたようなモードです。下のレイヤーの明るい部分はより明るく、暗い部分はより暗くなります。コントラストが上がります。|
| `darken`      | 上下のピクセルを比較し、より暗い色のピクセルが表示されます。|
| `lighten`（使用頻度高）| 上下のピクセルを比較し、より明るい色のピクセルが表示されます。|
| `color-dodge` | 下のレイヤーを明るくし、コントラストを下げます。 |
| `color-burn`  | 下のレイヤーを暗くし、コントラストを上げます。        |
| `difference`  | 上下の色の差分を表示します。似た色だと黒っぽく、異なる色だと鮮やかになります。|
| `luminosity`  | 下のレイヤーの色相と彩度を保ち、上のレイヤーの明度を適用します。

:::note info
`background-image`を複数指定した場合:
- 最初に書いた画像が一番手前（一番上）のレイヤー。
- 次に書いた画像がその下（奥）のレイヤー。
- 一番最後に書いた画像が、そのすぐ下のレイヤーになります。
そして、すべての`background-image`の一番下に、`background-color`が配置されます。

※画像が1枚しかないときは、画像と色の比較となります。
:::
レイヤーのイメージ図は下記です。
```
[一番手前（一番上）のレイヤー: background-image (1つ目)]
[その下のレイヤー: background-image (2つ目)]
[さらにその下のレイヤー: background-image (3つ目)]
-------------------------------------------------
[一番奥（一番下）のレイヤー: background-color]
```

**適用される順番**
- 指定された複数の背景画像（一番下層の画像から順に、`background-color`とブレンドされる）、または一番上の背景画像と`background-color`の間に適用されます。
- 複数の`background-image`がある場合、一番上の画像から順に、そのすぐ下の画像や色とブレンドされていきます。
- 例えば、`background-image: url(img1.png), url(img2.png); background-color: blue;`の場合、`img1.png`と`img2.png`がブレンドされ、その結果が blue とブレンドされます。ブレンドモードを複数指定することで、それぞれのブレンド方法を制御できます。

### `background`一括指定
- `background`プロパティをそれぞれ一括で指定することも可能です。
- 各プロパティの順番は決まっていますが、必ずしも全部書く必要はありません。
    - 書かない部分はデフォルト値が使われるから、必要なものだけ書けばOKです。
:::note info
`position`と`size`を両方指定したい場合のみ決まりがあります。
→はじめに`position`の値をかき、`/` で区切ってsizeをかきましょう！
:::

#### 基本構文
```CSS
background: [color] [image] [repeat] [position] [attachment] [size];
```

#### 使用例
```CSS
div {
  background: url("flower.jpg") no-repeat center center / cover #fefefe;
}
```
上記はそれぞれに分割すると、下記の意味となります。
```CSS
background-image: url("flower.jpg");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
background-color: #fefefe;
```

## テキストプロパティ
### フォント関連
| プロパティ名        | 意味・効果               | よく使う値例                                                      | 補足                                                               |
| ------------- | ------------------- | ----------------------------------------------------------- | ---------------------------------------------------------------- |
| `font-style`  | 文字のスタイルを指定します。  | `normal`, `italic`, `oblique`                               | `italic`で斜体、`normal`で通常、`oblique`で斜め体。          |
| `font-weight` | 文字の**太さ**を指定します。    | `normal`, `bold`, `lighter`, `100`, `700`                   | `bold`で太字、数字で細かく指定可能（100が細く、700が太く）。                     |
| `font-size`   | 文字の**大きさ**を指定します。   | `16px`, `1em`, `larger`, `smaller`                          | **`px`**や**`em`**、相対単位でも指定可能。                                    |

上記以外にも色々あるので、紹介していきます。

### 1.`text-align`
- テキスト（文字）を左寄せ・中央寄せ・右寄せにできるCSSです。
- ブロックレベル要素にしか指定できないプロパティです。
- **インライン要素に設定したい時は、ブロックレベルに指定すると、中のインライン要素全体が設定されます。**

主な値は下記です。
| 値         | 説明             |
| --------- | -------------- |
| `left`    | 左に寄せる（初期値）     |
| `center`  | 真ん中に揃える        |
| `right`   | 右に寄せる          |
| `justify` | 両端揃え（行の左右がそろう） |


### 2.`letter-spacing`
- 文字間隔を設定できます。

### 3.`vertical-align`
- `img`を設定すると、下に余白ができることがあります。
    - これは`img`タグがインライン要素であり、インライン要素の挙動として文字を表示するために領域確保をする時、gやjなどの下にはみ出る「しっぽ」分も確保しているため起こり得ます。
- 画像にはしっぽがないので、隙間があるように見えます。
    - 解決するために`vertical-align`を設定するとよいでしょう。

```CSS
img {
  vertical-align: buttom;
}
```

#### 指定できる値
- `baseline`: 初期値。
- `top`: 要素の上端に揃える。
- `buttom`: インラインのディセンダ領域削除。画像の下の隙間を削除したい時などに利用する。
- `text-top`: 親要素のテキストの上端に揃える。
- `text-buttom`: 親要素のテキストの下端に揃える。
- 文字の位置を`baseline`から下に`9px`下げることもできる。
```CSS
nav a {
  vertical-align: -9px;
}
```

#### 表にも指定可
- 表セルの中の文字や画像の見え方を変更できる

| 値          | 意味           | よくある見え方       |
| ---------- | ------------ | ------------- |
| `top`      | 上に寄せる        | セルの上端にくっつく    |
| `middle`   | 中央に配置する（初期値） | だいたい真ん中に見える   |
| `bottom`   | 下に寄せる（セルの一番下の枠線に揃える）| セルの下端にくっつく    |


![スクリーンショット 2025-05-19 10.26.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2627033/688c4f39-38c8-4b6f-a236-2e51610c021d.png)

### 4.`line-height`
行の高さ（行間） を指定するために使われます。

```CSS
line-height: 30px;
```
- 上記は、「その要素内のテキストの一行の高さが30ピクセルになる」という指示です。
- 例えば、font-sizeが16pxのテキストに`line-height: 30px;`を設定した場合、文字自体の高さは`16px`ですが、一行全体が占める垂直方向の空間は`30px`になります。
- 残りの`30px - 16px = 14px`が、テキストの上下に均等に（`7px`ずつ）分配される行間（`leading`）として機能します。

#### `px`以外の`line-height`の値
##### 1.単位なしの数値 (推奨されることが多い)
```CSS
line-height: 1.5;
```
- これは「フォントサイズの倍率」として機能します。
- `例えば、font-size: 16px;`なら`1.5`は`24px`になります。
この方法だと、`font-size`が変わっても自動的に行間が調整されるため、レスポンシブデザインに適しています。
##### 2.`em`
```CSS
line-height: 1.5em;`
```
- これは「その要素のフォントサイズ」を基準にした倍率です。
- `em`単位は入れ子になった場合に親の影響を受けるため、`font-size`が変化すると、行の高さも連鎖的に変化する可能性があります。

##### 3.`%`
```CSS
line-height: 150%;
```
- これも「その要素のフォントサイズ」を基準にした割合です。
- `em`と同じように動作します。

## リスト
| 用途     | タグ             | 順序あり？ | 主な使い方         |
| ------ | -------------- | ----- | ------------- |
| 箇条書き   | `<ul><li>`     | ❌     | メニュー・買い物リストなど |
| 順序付き手順 | `<ol><li>`     | ✅     | 手順、ランキングなど    |
| 用語の説明  | `<dl><dt><dd>` | -     | 辞書のような説明リスト   |

### リストに使用できるプロパティ
| プロパティ名                | 意味・効果                | よく使う値例                                        | 補足                      |
| --------------------- | -------------------- | --------------------------------------------- | ----------------------- |
| `list-style-type`     | リストマークの種類を変える        | `disc`, `circle`, `square`, `decimal`, `none` | マークの見た目を変更できる           |
| `list-style-position` | リストマークの位置を変える        | `outside`, `inside`                           | `inside`にするとマークがテキストと揃う |
| `list-style-image`    | リストマークを画像に変更する       | `url('star.png')`, `none`                     | 小さなアイコン画像を指定できる         |
| `list-style`          | 上記3つをまとめて指定するショートハンド | `square inside`, `url('dot.png') outside`     | 一括で指定したいときに便利！          |

## From
| 要素名            | 設定できる属性       | 意味・効果                  | よく使う値例                                                               | 補足                                                  |
| -------------- | ------------- | ---------------------- | -------------------------------------------------------------------- | --------------------------------------------------- |
| **`input`**    | `type`        | 入力フィールドの種類を指定          | `text`, `password`, `email`, `radio`, `checkbox`, `submit`, `button` | 例: テキスト入力用は `type="text"`、パスワード用は `type="password"` |
|                | `value`       | 初期値を指定                 | `"sample"`                                                           | 初期状態で入力される値を設定                                      |
|                | `placeholder` | 入力欄にヒントテキストを表示         | `"Enter your name"`                                                  | 入力欄に薄く表示されるヒント文字                                    |
|                | `name`        | フォーム送信時の識別名            | `"username"`                                                         | サーバーに送信するデータ名                                       |
|                | `required`    | 必須項目として指定              | `required`                                                           | この項目が必須であることを指定                                     |
|                | `maxlength`   | 入力できる最大文字数             | `10`                                                                 | 最大文字数を指定                                            |
| **`textarea`** | `rows`        | テキストエリアの高さ（行数）         | `4`                                                                  | 表示する行数を指定                                           |
|                | `cols`        | テキストエリアの幅（文字数）         | `50`                                                                 | 幅を指定                                                |
|                | `placeholder` | ユーザーへのヒントテキスト          | `"Enter your message"`                                               | 入力がないときに表示されるヒント文字                                  |
|                | `name`        | フォーム送信時の識別名            | `"message"`                                                          | サーバーに送信するデータ名                                       |
|                | `required`    | 必須項目として指定              | `required`                                                           | 入力を必須にする                                            |
| **`button`**   | `type`        | ボタンの種類を指定              | `submit`, `reset`, `button`                                          | 例: `submit` は送信ボタン、`reset` はリセットボタン                 |
|                | `name`        | ボタンに名前をつける             | `"submitButton"`                                                     | サーバーに送信する際の識別に使う                                    |
|                | `disabled`    | ボタンを無効化する              | `disabled`                                                           | ユーザーがクリックできないようにする                                  |
| **`select`**   | `name`        | フォーム送信時の識別名            | `"options"`                                                          | サーバーに送信するデータ名                                       |
|                | `multiple`    | 複数選択を可能にする             | `multiple`                                                           | 複数のオプションを選択可能にする                                    |
|                | `size`        | 表示される選択肢の行数            | `5`                                                                  | 表示行数を指定                                             |
| **`fieldset`** | `disabled`    | フォームの入力を無効化（フォーム全体に影響） | `disabled`                                                           | フォーム内のすべての要素を無効化                                    |
|                | `form`        | 関連するフォームのID            | `form="form1"`                                                       | `<form>`タグのIDと関連付ける                                 |
|                | `legend`      | フィールドセットのタイトルを指定       | `"Personal Info"`                                                    | グループ化されたフォーム要素のタイトル                                 |

- `input`: ユーザーがデータを入力するための最も基本的なフォーム要素。type属性で入力の種類を指定します。

- `textarea`: 複数行のテキストを入力できる領域。行数や幅を指定でき、長文の入力に使用します。

- `button`: ユーザーがクリックして操作を実行するボタン。type属性で役割（送信、リセットなど）を指定します。

- `select`: ドロップダウンリストを作成するための要素。複数選択可能にすることもできます。

- `fieldset`: フォーム内の関連する要素をグループ化するためのコンテナ。legendタグでタイトルを付けることができます。

### リサイズプロパティ
| プロパティ                  | 意味・効果                     | 使用例                                |
| ---------------------- | ------------------------- | ---------------------------------- |
| `resize: none;`        | サイズ変更を**完全に禁止**する         | `textarea { resize: none; }`       |
| `resize: both;`        | **縦横どちらにも**サイズ変更できる（初期値）  | `textarea { resize: both; }`       |
| `resize: vertical;`    | **縦方向のみ**サイズ変更できる         | `textarea { resize: vertical; }`   |
| `resize: horizontal;`  | **横方向のみ**サイズ変更できる         | `textarea { resize: horizontal; }` |
| `resize: inline;`（非推奨） | **インライン方向のみ**（ブラウザ対応が少ない） | ほとんど使わないでOK                        |

## テーブル
### 基本構造
<details><summary>サンプルコード</summary>

```
/*html*/
<table>
      <tr>
        <th>セル１</th>
        <th>セル２</th>
        <th>セル３</th>
      </tr>
      <tr>
        <th>セル４</th>
        <th>セル５</th>
        <th>セル６</th>
      </tr>
</table>
    
/*style*/

table,
th,
td {
  border: 1px solid blueviolet;
}
```
</details>


![スクリーンショット 2025-05-12 10.21.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2627033/17dba42d-7824-447c-a670-7ced3746c99a.png)

### セルの連結
<details><summary>サンプルコード</summary>

```
/*html*/
 <table>
      <tr>
        <th colspan="3">セル１</th>
      </tr>
      <tr>
        <th>セル４</th>
        <th>セル５</th>
        <th>セル６</th>
      </tr>
    </table>
    <br />
    <table>
      <tr>
        <th>セル１</th>
        <th>セル２</th>
        <th rowspan="3">セル３</th>
      </tr>
      <tr>
        <th>セル４</th>
        <th>セル５</th>
      </tr>
</table>
```
</details>

![スクリーンショット 2025-05-12 10.23.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2627033/9748202e-97c2-418f-be4f-5f65561950bf.png)

### 表の横列のグループ化
| タグ        | 意味         | どんな部分に使う？             |
| --------- | ---------- | --------------------- |
| `<thead>` | 表の「見出し部分」  | タイトルや列名（例：商品名、価格など）   |
| `<tbody>` | 表の「中身（本文）」 | 実際のデータ（例：商品リスト、点数など）  |
| `<tfoot>` | 表の「まとめや合計」 | 合計行や注釈など（例：合計金額、備考など） |

<details><summary>サンプルコード</summary>

```
/*html*/
 <table>
      <thead>
        <tr>
          <th>商品名</th>
          <th>価格</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>りんご</td>
          <td>100円</td>
        </tr>
        <tr>
          <td>バナナ</td>
          <td>80円</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td>合計</td>
          <td>180円</td>
        </tr>
      </tfoot>
</table>
```
</details>

### その他プロパティ

#### `border-collapse`
:テーブルのセル間の境界線（ボーダー）をどう表示するかを決めるプロパティ
```CSS
border-collapse: collapse;
```
| 値          | 意味                           |
| ---------- | ---------------------------- |
| `collapse` | セルの境界線を**1本にまとめる**（通常使われる）   |
| `separate` | セル間に**スペースを入れて、境界線を別々に表示する** |

#### `caption-side`
:テーブルのキャプションがどこに表示されるかを決めるプロパティ
```CSS
table {
  caption-side: top;
}
```

| 値        | 意味               |
| -------- | ---------------- |
| `top`    | キャプションを**上部**に表示 |
| `bottom` | キャプションを**下部**に表示 |

## `iframe`
自分のページの中に、別のページを埋め込むことができます、

たとえばこんなことができます：
    - YouTube動画をページに埋め込む
    - Googleマップを表示する
    - 他の自分のページを小窓で見せる

```HTML
<iframe src="https://example.com" width="300" height="200"></iframe>
```
| 属性名               | 説明                         |
| ----------------- | -------------------------- |
| `src`             | 表示するページのURL                |
| `width`           | 横幅（px または %）               |
| `height`          | 高さ（px または %）               |
| `title`           | iframeの内容を説明する（アクセシビリティ向け） |
| `frameborder`     | 枠線の有無（古いやり方。CSS推奨）         |
| `allowfullscreen` | フルスクリーン許可（動画などで使用）         |
| `loading`         | 読み込みタイミング（`lazy`で遅延読込）     |

## calc関数
CSSで長さを指定するときに、計算式を使えるようにする関数です。

:::note info
単位が違うものもOKです。（%、px、em、vh など）
例：`calc(2em + 30px)`
:::

## アウトライン
フォーカスの見た目をコントロールするときに、使用されるプロパティです。

### borderと似ているけれど違う
| 比較ポイント                | `outline`           | `border`          |
| --------------------- | ------------------- | ----------------- |
| 配置・レイアウトに影響           | **しない**（レイアウトが崩れない） | **する**（要素の大きさに影響） |
| 角の丸み（`border-radius`） | **効かない**            | **効く**            |
| 表示位置             | ボックスのボーダー周り（外側）         | ボーダー（内側）       |
|指定| 上下左右別々に指定することは不可 |上下左右別々に指定することが可|
| 主な用途                  | キーボード操作時のフォーカス表示など  | 枠線のデザイン装飾など       |


### 各プロパティの紹介
| プロパティ名             | 意味・説明                                  | 例                         |
| ------------------ | -------------------------------------- | ------------------------- |
| `outline-width`    | アウトラインの太さ                              | `1px`, `2px` など           |
| `outline-style`    | 線のスタイル（`solid`, `dotted`, `dashed` など） | `solid`（実線）               |
| `outline-color`    | 線の色                                    | `blue`, `rgba(...)` など    |
| `outline`（ショートハンド） | 上3つをまとめて一括で指定                          | `outline: 2px solid red;` |
| `outline-offset`   | アウトラインを**外側にどれだけ離すか**を指定               | `outline-offset: 4px;`    |

###  よくある使い方の例
####  フォーカス時の見た目変更（例：フォーム入力中）
```CSS
input:focus {
  outline: 2px solid #66f;
  outline-offset: 2px;
}
```

## `content`
CSSで「内容（テキストや画像など）を追加するため」のプロパティ！
「疑似要素」の中だけで使用できます。

```HTML
<h1>CSSで内容を追加する方法</h1>
```
```CSS
h1::before {
  content: '特別コラム：';
  display: block;
  font-size: small;
  color: #f6d;
}

h1::after {
  content: url(images/sakura.png);
  display: block;
}
```

---

未来の自分のために、誰かのためにこの記事が役に立てば幸いです✨🧚🏻