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

# はじめに
今更Progateをやり始めたマンです。（HTML/CSS）
RUNTEQのカリキュラムでやってるんですが、意外といいですね。
きれいに書ける。

そんな独学だったマンが知らなかったこと、あたらめて調べたことを箇条書き的に残しておきます。
気になる見出しがあればご覧ください。

01/11 [第２弾記事](https://qiita.com/kohki_takatama/items/0289420eb9c3bb673348)投稿しました。CSSはいったんこれで終了です。

# メモず
##### `<head>`要素内に記述した内容はWebページには表示されません。

`<head>`と`<body>`の違い。
シンプルだけど、なんとなくで言語化されてなかった部分。
##### list-style プロパティは親要素から適用されない。
```html
    <div class="header">
      <div class="header-list">
        <ul>
          <li>プログラミングとは</li>
          <li>学べるレッスン</li>
          <li>お問い合わせ</li>
        </ul>
      </div>
    </div>
```
```css
.header {
  list-style: none;
}
```
この時の表示は、
```
・プログラミングとは
・学べるレッスン
・お問い合わせ
```
つまり、`list-style: none`が適用されていない。

ちゃんと`li`に対して書かないといけない。
```css
li {
  list-style: none;
}
```
ただし、`ul`に対して書いても適用される。
```css
ul {
  list-style: none;
}
```
表示
```
  プログラミングとは
  学べるレッスン
  お問い合わせ
```
##### 他の「直接適用する必要がある」リスト
ChatGPT
>1. **`margin`** と **`padding`**: これらはボックスモデルの一部で、要素の外側の余白（margin）と内側の余白（padding）を設定します。これらは子要素には継承されません。
>    
>2. **`border`**: 枠線のスタイル、幅、色を設定します。これも子要素には継承されません。
  >  
>3. **`width`** と **`height`**: 要素の幅と高さを設定します。これらは子要素に継承されないため、子要素に特定のサイズを適用したい場合は個別に設定する必要があります。
  >  
>4. **`background`** 関連プロパティ: 背景色や背景画像の設定は継承されません。各要素で個別に指定する必要があります。
  >  
>5. **`position`**: 要素の配置方法（static, relative, absolute, fixed, sticky）を指定します。これも継承されません。
##### css 省略形は「上」「右」「下」「左」の順で適用される。もしくは「上下」「左右」あるいは「上」「左右」「下」
例
```css
.logo {
  padding: 20px 10px 20px 10px;
}
```
```css
.logo {
  padding: 20px 10px;
}
```
どちらも同じ。
##### `froat`の語源
ChatGPT
>  CSSの`float`プロパティの語源は、文字通り「浮かぶ」や「浮遊する」といった意味から来ています。このプロパティは、元々はテキストを画像の周りに「流れるように」配置するために作られました。画像がテキストの中に「浮いている」ように見えることからこの名前が付けられたと考えられています。

> `float`プロパティを使用すると、指定された要素が通常の文書の流れから「浮き上がり」、その要素の周りに他の要素（通常はテキスト）が流れるように配置されます。例えば、`float: left;` は要素を左側に浮かせ、右側にテキストや他のコンテンツが流れるように配置されることを意味します。

> この用語は、CSSの初期の頃から使用されており、ウェブデザインにおいてレイアウトを構築するための基本的な手段の一つとして長い間使われてきました。ただし、最近ではFlexboxやGrid Layoutなどの新しいレイアウト技術が登場し、`float`の使用はレイアウト構築目的では減少傾向にあります。それでも、`float`は特定の文脈や小さなレイアウト調整において依然として有用です。

##### `ブロック要素`と`インライン要素`
> 前後で改行が入り、親要素の幅一杯に広がる要素をブロック要素といいます。これまで勉強してきた\<div>要素や\<h1>要素、\<p>要素はブロック要素です。それに対して、\<span>要素や\<a>要素のように改行されない要素をインライン要素といいます。

- インライン要素には`width`や`height`、`上下のmargin`が指定できない
  →`display: inline-block;"`でインラインブロック要素"に変更する。
- （横方向）中央揃えの方法
	- ブロック要素：`margin: 0 auto`
	- インライン要素・インラインブロック要素・テキスト：`text-align: center`
##### `mergin`、`border`、`padding`の違い（使い分け）
> ###### `margin`は要素の外側の**余白**、`border`は要素の周囲を囲む**線**、`padding`は要素内の**余白**をそれぞれ管理します。
> 1. **`margin`**: これは要素の外側の余白を指します。`margin`は要素とその周囲の他の要素との間の空間を作成します。これは透明な領域であり、背景色やボーダーなどは適用されません。
>     
> 2. **`border`**: これは要素の境界線を指し、コンテンツの四辺を囲む区切り線を作成します。
>    ※初期状態では表示されません。
>    `border`は幅（太さ）、スタイル（実線、点線など）、色を指定できます。`border`はコンテンツと `padding` の外側に配置されます。
>     
> 3. **`padding`**: これは要素の境界（`border`）とそのコンテンツ（テキストや画像など）との間の内側の余白を指します。`padding`は背景色や背景画像に影響され、増やすことで要素内のコンテンツとその境界との間のスペースが広がります。

##### `wrapper`と`contents`のニュアンスの違い
###### `wrapper`: この用語は、通常、他の要素を含むコンテナーまたは親要素を指します。
> `wrapper`は、ウェブページの特定の部分を囲むために使用され、その内部に配置される要素に共通のスタイリングやレイアウト特性を適用するためのものです。例えば、ページの主要なセクションを中央に配置するための`wrapper`があり、その中に複数のコンポーネントやコンテンツが含まれることがあります。`wrapper`は、内部の要素を構造的に整理し、共通のスタイルやパディング、マージンを適用するために使用されます。
###### `contents`: この用語は、`wrapper`や他の要素の内部に含まれる実際のコンテンツを指します。
> これにはテキスト、画像、リンク、ボタン、フォーム、その他のHTML要素が含まれることがあります。`contents`は、ウェブページの情報や機能を提供する主要な部分であり、ユーザーが直接対話する要素です。

> 要するに、`wrapper`は主にコンテンツを構造的に囲むための要素であり、`contents`はその`wrapper`内に含まれる実際の情報やデータです。

##### `opacity`のニュアンス："不"透明度
**「不透明度」を意味するため、0が透明、1が不透明になる。**
>   「Opacity」（オパシティ）という言葉の語源は、ラテン語の「opacus」から来ています。この言葉はもともと「影」という意味を持っていました。時間が経つにつれ、「opacus」は英語の「opaque」（不透明な、曇った）という形で取り入れられ、これが「opacity」（不透明度）という言葉に進化しました。

##### 複数クラスの指定
```html
<div class="btn blue">
```
この時、
```css
.btn {

}

.blue {

}
```
の2つのクラスを指定している。
##### 透明にする方法：`opacity`と`rgba`の違い
###### `opacity`
要素全体の透明度
###### `rgba`
その色部分のみの透明度
バックグラウンドのみ透明、など。

##### アニメーション`transition: property sec`
`hover`と組み合わせて使う
##### 縦方向 中央ぞろえテクニック`line-height`
本来行間調整に使うが、「高さの中心」に文字が配置されるため、`height = line-height`にすると、文字が（縦方向の）中央に配置される
##### "重ねる"方法：`position: absolute`
親要素に`position: relative`を指定し、子要素で`position: absolute`を指定すると、親要素の左上を基準に配置することができる。
##### なお、`position: relative`は混乱を招く
> `position: relative;` は「自身の小さな位置調整」と「子要素の `position: absolute;` に対する基準点設定」という2つの主な用途があります。これらの機能が一つのプロパティに統合されているため、特定の状況で少し混乱を招くことがあります。
##### `position: fixed`でスクロールしても位置固定
##### 重なり調整：`z-index: num`
大きいほど上、小さいほど下

# 終わりに
Progateなんだかんだ楽しいんですよね。
いろんなところでｵｽｽﾒされてるのも納得。
引き続き頑張ります。

記念
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">最初の一歩！ <a href="https://t.co/cUpY6MgLSD">pic.twitter.com/cUpY6MgLSD</a></p>&mdash; たま / SamuraiStats⚾ (@SamuraiStats) <a href="https://twitter.com/SamuraiStats/status/1744894971944280291?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">中級もクリア！<br>なんだかんだ楽しい。Progate食わず嫌いだったw <a href="https://t.co/gQ4hDPatyW">pic.twitter.com/gQ4hDPatyW</a></p>&mdash; たま / SamuraiStats⚾ (@SamuraiStats) <a href="https://twitter.com/SamuraiStats/status/1744928207588184339?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">dojoレッスンもクリア！<br><br>codewarsしかり、ITパスポートのサイトしかり、<br>業界として「道場」ってよく使うなあ <a href="https://t.co/BRZDsBlrwR">pic.twitter.com/BRZDsBlrwR</a></p>&mdash; たま / SamuraiStats⚾ (@SamuraiStats) <a href="https://twitter.com/SamuraiStats/status/1744943112848654789?ref_src=twsrc%5Etfw">January 10, 2024</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>