最近学んだことリスト【CSS】2

# はじめに
今更Progateをやり始めたマンです。
[前回の記事](https://qiita.com/kohki_takatama/items/f3a516bece97ea407435)に引き続き、知らなかったことを残しておきます。
見ずらい内容なので、気になった見出しがあればご覧ください。

# メモず
##### メディアクエリ`@media (max-width: [num])`
画面幅の大きさでクエリできる。
`max-width: 1000px`なら、`1000px`**以下**の画面の時に当てはまる。
この時の`1000px`をブレイクポイントと呼ぶ。
スマホ：`~670px`
タブレット：`671px~1000pc`
PC：`1001px~`
##### `*`：すべての要素
`html`に対して書くよりスマートな上、継承の問題を回避できる。

##### `box-sizing: border-box;`
標準のルールは`box-sizing: content-box`で、`padding`と`border`を要素サイズの外として扱う。
`box-sizing: border-box;`は`padding`と`border`を要素サイズの内として扱う。
デメリットは一部の古いブラウザとの互換性・計算の複雑さ・継承されないことがあるが、フレキシブルなレイアウトを容易にするメリットは大きい。`*`と組み合わせて使おう。

##### `viewport`の呪文
`<meta name="viewport" content="width=device-width, initial-scale=1.0">`
ビューポートの幅をデバイスの幅に合わせ、初期のズームレベルを1に設定
##### 子要素はまとめて書け"ない"
通常のCSSでは、
```css
header h1 {}
header h2 {}
```
を
```css
header {
  h1 {}
  h2 {}
}
```
と書くことはできない。

ただし、プリプロセッサを使えば可能。
その場合は、プリプロセッサを通して通常のCSSに変換・実行される
##### `float`を回避する`clear`
> 子要素が全てfloatでも、親要素が高さを持つように設定してみましょう。 floatはclear: left;で「浮いている」状態を解除できます。 ここではclear: left;を適用するためだけの空のタグを用意しましょう。 空タグとclearでfloatを解除するのはよく使うテクニックなので、覚えておくようにしましょう。

`clear`という言葉から「相手要素の`float`状態を消してしまう」イメージをしたが
「自分要素が`float`を`float`として扱わなくなる(回避する)」ということ

> `clear` プロパティは以下の値を取ることができます：

> - `none`: 要素は `float` された要素の横に配置されます（デフォルト）。
> - `left`: 要素は左側に `float` された要素の下に配置されます。
> - `right`: 要素は右側に `float` された要素の下に配置されます。
> - `both`: 要素は両側に `float` された要素の下に配置されます。

##### `display: flex`
CSS3で導入されたレイアウトモデル
> 1. **方向の独立性**：`flex-direction` プロパティを使用して、子要素（フレックスアイテム）を水平（`row`）または垂直（`column`）に配置することができます。これにより、横並びだけでなく縦並びも容易に実現できます。
>     
> 2. **コンテナ内での自動調整**：フレックスアイテムは、利用可能なスペースに応じてサイズを自動的に調整できます。`flex-grow`、`flex-shrink`、`flex-basis` などのプロパティによって、アイテムの拡大や縮小の挙動を制御できます。
> 
> 3. **整列と配置の容易さ**：`align-items`、`justify-content`、`align-self` などのプロパティを使用して、アイテムの縦横の整列や配置を簡単に調整できます。
>     
> 4. **レイアウトの単純化**：従来のフロートやポジショニングに比べ、フレックスボックスはより直感的で柔軟なレイアウトを可能にし、特に複雑なレイアウトやレスポンシブデザインにおいてその威力を発揮します。

他
- `flex-wrap: wrap`折り返し

##### コンテンツの高さ=`height` or `height + padding`?
`height + padding`がコンテンツの高さになる。
`height: 500px; padding-top: 50px`だとコンテンツ表示の領域の高さは`550px`になる（例えば`background-color`の適用範囲）。
もしコンテンツ全体で`500px`にしたい&`padding-top: 50px`で余白を作りたいときは、
- 子要素に`padding`を適用する。
- `box-sizing: border-box`を使用する。
##### `text-align`の規定値は`left`もしくは`start`。アラビア語も考慮すると`start`が望ましい。
> `text-align` プロパティのデフォルト値（規定値）は通常 `start` です。ただし、実際のブラウザの挙動では、多くの場合 `left` がデフォルトとして扱われます。

> `text-align: start;` は、要素のテキストをその要素の「開始位置」に揃えることを意味します。これは、文書の書かれている言語の書字方向に依存します。たとえば、左から右へ書かれる言語（英語など）では、`start` は `left` と同じ挙動をします。一方、右から左へ書かれる言語（アラビア語やヘブライ語など）では、`start` は `right` と同じになります。

> 多くのウェブサイトは左から右への書字方向を採用しているため、`text-align` のデフォルト値が `left` として振る舞うことが一般的です。しかし、国際化されたウェブコンテンツでは `start` が適切な選択となる場合もあります。これにより、異なる書字方向を持つ言語に対して自動的に適切なテキスト揃えが行われるためです。


# 終わりに
とりあえずProgateのHTML / CSSは修了しました。
楽しかった。次はRubyかな？


## 記念
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">ずっと気になってたんだけど、Congratulation&quot;s&quot;が見切れてるw<br>CSSミスるとこうなるよ、という具体例なのだろうか……w <a href="https://t.co/Mrk0p51gk8">pic.twitter.com/Mrk0p51gk8</a></p>&mdash; たま / SamuraiStats⚾ (@SamuraiStats) <a href="https://twitter.com/SamuraiStats/status/1745198992810770923?ref_src=twsrc%5Etfw">January 10, 2024</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">道場レッスン、なぜかうまくいかなくてうんうんうなってたら、divがdiuになってたw</p>&mdash; たま / SamuraiStats⚾ (@SamuraiStats) <a href="https://twitter.com/SamuraiStats/status/1745224219192127980?ref_src=twsrc%5Etfw">January 10, 2024</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">Progate、ちょっと愚痴<br>HTML道場上級-3<br>.headingクラスを使うと仕様書外まで変更しちゃうので<br>工夫して仕様書内の要素だけ変更するようにした。でも答えが仕様書外まで変える仕様だった。 <a href="https://t.co/7FefikmANl">pic.twitter.com/7FefikmANl</a></p>&mdash; たま / SamuraiStats⚾ (@SamuraiStats) <a href="https://twitter.com/SamuraiStats/status/1745250495026126926?ref_src=twsrc%5Etfw">January 11, 2024</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">HTML / CSS すべて修了！ <a href="https://t.co/TAT5ScCcBd">pic.twitter.com/TAT5ScCcBd</a></p>&mdash; たま / SamuraiStats⚾ (@SamuraiStats) <a href="https://twitter.com/SamuraiStats/status/1745251710552195514?ref_src=twsrc%5Etfw">January 11, 2024</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>