CodePen で学ぶスタイルシート実践

# はじめに

本記事は社内勉強会資料として作成しています

GitHub でやりたかったものの、 GitHub だと CodePen を埋め込むことができなかったので、、、

## CodePen

Web の学習にピッタリのサービス

https://codepen.io/

![スクリーンショット 2022-07-15 17.10.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/3d3acde4-59d0-c35e-8f07-b319fa839700.png)

HTML, CSS, JavaScript をオンラインで編集・保存し、
リアルタイムに画面表示を確認できる

- ローカル環境に何も準備する必要がない
- GitHub アカウントなどで使い始められる
- 無償で無制限に Pen を作成できる
- SCSS も使える

![スクリーンショット 2022-07-15 17.13.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/5b1103fa-0559-fe16-24ff-34d67c90a0df.png)

- TypeScript も使える

![スクリーンショット 2022-07-15 17.13.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/42a6760e-1ce0-8874-e8ae-d262ea206c26.png)

- Vue や Flutter も使える

![スクリーンショット 2022-07-15 17.14.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/0ea40a71-4732-04cd-9ab8-f292d902964e.png)

次回以降、 SCSS や Vue も実践予定

## CSS 基礎

CSS = Cascading Style Sheets カスケーディングスタイルシート

階層的に外観を定義できる

### HTML の基本構文

HTML = Hyper Text Markup Language

文書へ印による意味を付加した言語
文書の構造を表す

- タグ: 情報に意味を持たせるための印（マーク）
`<タグ>` 、 `</タグ>` で情報を囲う
中に文字列や子要素が存在しない場合、 `<タグ />` とする

- 属性: タグの持っている情報
一つのタグに複数の属性を持つことができる

- 要素: タグで囲んだ情報
要素の中に階層的に要素を含むことができる

```html
<タグ 属性名="属性値">
  <タグ 属性名="属性値">
    文字列
  </タグ>
  <タグ 属性名="属性値" 属性名="属性値" />
</タグ>
```

#### 代表的なタグ

<p class="codepen" data-height="800" data-default-tab="html,result" data-slug-hash="jOzBGER" data-user="ryowakabayashi" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ryowakabayashi/pen/jOzBGER">
  HTML</a> by Ryo Wakabayashi (<a href="https://codepen.io/ryowakabayashi">@ryowakabayashi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

- `div`: `divided` 分割された要素
ブロック要素 = 縦に積まれ、大きさを調整可能な要素として扱う

- `span`: `span` 期間
インライン要素 = 横に並び、大きさを調整できない要素として扱う

- `p`: `paragraph` 段落

- `a`: `anchor` 出発点、到達点
リンクを表す

- `h1` ~ `h6`: `heading` 見出し
数字は見出しのレベル

- `ul`: `unordered list` 順序なしリスト
- `ol`: `ordered list` 順序ありリスト
- `li`: `list item` リストの項目

- `table`: 表
- `tr`: `table row` 表の行
- `td`: `table data` 表のセル

### CSS の基本構文

- Selector: HTML 内の対象要素を指定する
- Property: 外観の属性（色、配置など）を指定する
- Value: 外観の値（赤、右寄せなど）を指定する

```css
Selector {
  Property: Value;
}

Selector {
  Property: Value;
  Property: Value;
  Property: Value;
}
```

## Selector

### Selector 基礎

<p class="codepen" data-height="380" data-default-tab="css,result" data-slug-hash="OJvRZdG" data-user="ryowakabayashi" style="height: 369.25762939453125px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ryowakabayashi/pen/OJvRZdG">
  Basic Selectors</a> by Ryo Wakabayashi (<a href="https://codepen.io/ryowakabayashi">@ryowakabayashi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

- すべて (全称セレクタ)
`*` ですべての要素を対象にする

- タグ （タイプセレクタ）
`div` や `p` 、 `sapn` など、 HTML のタグ（`<タグ名>内容</タグ名>`のように使われる）
そのまま指定する
指定したタグの要素全てが対象になる

- class
HTML のクラス属性（`<タグ名 class="クラス名">内容</タグ名>`のように使われる）
先頭 `.` を付けて指定する
クラスは HTML 文書内で重複可能
指定したクラスを持つ要素全てが対象になる

- id
HTML の id 属性（`<タグ名 id="ID">内容</タグ名>`のように使われる）
先頭 `#` を付けて指定する
id は HTML 文書内で一意（重複しない）値になっている
指定したIDを持つ要素一つが対象になる

### Selector の組み合わせ

<p class="codepen" data-height="470" data-default-tab="css,result" data-slug-hash="xxWRxMG" data-user="ryowakabayashi" style="height: 463.762451171875px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ryowakabayashi/pen/xxWRxMG">
  Selector Basic Combination</a> by Ryo Wakabayashi (<a href="https://codepen.io/ryowakabayashi">@ryowakabayashi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

- 論理和（または、OR）
Selector を `,` で区切ると論理和になる

- 論理積（かつ、AND）
Selector を隣接させると、論理積になる

### 家族要素

<p class="codepen" data-height="530" data-default-tab="css,result" data-slug-hash="gOeLONX" data-user="ryowakabayashi" style="height: 521.2579345703125px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ryowakabayashi/pen/gOeLONX">
  Family Selector</a> by Ryo Wakabayashi (<a href="https://codepen.io/ryowakabayashi">@ryowakabayashi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

- 子孫
Selector を ` ` (半角スペース)で区切ると、子孫要素（親の中に含まれる要素）を示す

- 子
Selector を `>` で区切ると、子要素（親の直下にある要素のみ）を示す

- 兄弟
Selector を `~` で区切ると、同じ階層で指定要素以降の要素を示す

- 隣接兄弟
Selector を `+` で区切ると、指定要素に隣接する要素を示す

### 擬似クラス

Pseudo Class （スードクラス）

`:<擬似クラス名>` で状態や順番を示す

<p class="codepen" data-height="1100" data-default-tab="css,result" data-slug-hash="NWYbGWj" data-user="ryowakabayashi" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ryowakabayashi/pen/NWYbGWj">
  Pseudo Class</a> by Ryo Wakabayashi (<a href="https://codepen.io/ryowakabayashi">@ryowakabayashi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

- 否定
`:not(<Selector>)` で否定（指定した Selector に該当しないもの）を示す

- リンク状態
`:link` で未アクセスのリンクを示す
`:visited` でアクセス済のリンクを示す

- マウスオーバー
`:hover` でマウスカーソルが上にあるときを示す

- 入力状態
`:active` でクリックされているときを示す
`:focus` でフォーカスが当たっている状態（入力中）を示す
`:enabled` で入力可能状態を示す
`:disabled` で入力不能状態を示す
`:invalid` で入力値不正状態を示す
`:valid` で入力値適正状態を示す

### 順番指定

擬似クラスによって、何番目の要素かを示す

<p class="codepen" data-height="1050" data-default-tab="css,result" data-slug-hash="BarQyNV" data-user="ryowakabayashi" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ryowakabayashi/pen/BarQyNV">
  Number Selector</a> by Ryo Wakabayashi (<a href="https://codepen.io/ryowakabayashi">@ryowakabayashi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

- 最初の子要素
`:first-child` で最初の子要素を示す
`.child:first-child` のように指定したが、 `.child` が最初の子要素ではない（別の要素が先にある）場合は効かないので注意
特定の要素のうち最初の子要素、を指定する場合は `:first-of-type` を使用する

- 最後の子要素
`:last-child` で最後の子要素を示す

- 特定の要素のうち最初・最後の子要素
`:first-of-type` で、特定の要素のうち最初の子要素を示す
`:last-of-type` で、特定の要素のうち最後の子要素を示す

- 指定した順番の子要素
`:nth-child(<順番>)` で指定した順番の子要素を示す
`:nth-of-type(<順番>)` で特定の要素のうち指定した順番の子要素を示す

- 最後から数えて指定した順番の子要素
`:nth-last-child(<順番>)` で最後から数えて指定した順番の子要素を示す
`:nth-last-of-type(<順番>)` で特定の要素のうち最後から数えて指定した順番の子要素を示す

- 奇数・偶数・倍数番の子要素
`:nth-child(odd)` で奇数番の子要素を示す
`:nth-child(even)` で偶数番の子要素を示す
`:nth-child(<任意の数>n)` で指定した数の倍数番の子要素を示す

### 擬似要素

Pseudo Element （スードエレメント）

実際にはタブではないものを要素として扱う

<p class="codepen" data-height="600" data-default-tab="css,result" data-slug-hash="poLNvLo" data-user="ryowakabayashi" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ryowakabayashi/pen/poLNvLo">
  Pseudo Element</a> by Ryo Wakabayashi (<a href="https://codepen.io/ryowakabayashi">@ryowakabayashi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

- 最初の行
`::first-line` で最初の行を示す

- 最初の文字
`::first-letter` で最初の文字を示す

- 要素の前後
`::before` で要素の前を示す
`::after` で要素の後を示す
`content` プロパティで内容（文字列や画像など）を指定する
`attr()` を使って属性情報を表示することもできる

### 属性指定

<p class="codepen" data-height="820" data-default-tab="css,result" data-slug-hash="mdxOyaG" data-user="ryowakabayashi" style="height: 400.198486328125px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ryowakabayashi/pen/mdxOyaG">
  Attribute Selector</a> by Ryo Wakabayashi (<a href="https://codepen.io/ryowakabayashi">@ryowakabayashi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

- 属性を持つ要素
`[<属性名>]` で、指定した属性を持つ要素を示す

- 属性の値が指定したものである要素
`[<属性名>=<値>]` で、属性が指定した値と等しい要素を示す
`[<属性名>*=<値>]` で、属性が指定した値を含む要素を示す
`[<属性名>^=<値>]` で、属性が指定した値で始まる要素を示す
`[<属性名>$=<値>]` で、属性が指定した値で終わる要素を示す

### Selector の優先順位

<p class="codepen" data-height="660" data-default-tab="css,result" data-slug-hash="KKoWWVR" data-user="ryowakabayashi" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ryowakabayashi/pen/KKoWWVR">
  Priority</a> by Ryo Wakabayashi (<a href="https://codepen.io/ryowakabayashi">@ryowakabayashi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

- `!important` が付くと最優先になる
- タグの `style` 属性に書くと優先される
- より具体的な指定が優先される（　id > class > type > 全称）
- より後に書いた方が優先される
- 優先されるスタイルがなければブラウザのデフォルトスタイルが適用される
  （`div` なら `display: block` など）

`!important` を書かないといけないような CSS は正しく設計できていない
設計を見直すべき

CSS を見たときの優先度と実際の優先度を一致させるため、
より具体性の高いセレクタほど後に書くようにする

## Property

### サイズ

<p class="codepen" data-height="700" data-default-tab="css,result" data-slug-hash="bGvqJGW" data-user="ryowakabayashi" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ryowakabayashi/pen/bGvqJGW">
  Size</a> by Ryo Wakabayashi (<a href="https://codepen.io/ryowakabayashi">@ryowakabayashi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

`width` と `height` でサイズを指定する

- ピクセル指定
`px` 単位で指定する

- パーセント指定
親要素に対する割合を `%` 単位で指定する
高さは親に高さが指定されていないと効かない

- ビューポート指定
ビューポート = ブラウザの画面サイズ
ビューポートの幅に対する割合を `vw` 、
ビューポートの高さに対する割合を `vh` で指定する
`vmin` は `vw` と `vh` の小さい方
`vmax` は `vw` と `vh` の大きい方

- 中身に合わせる
`min-content` で最も長い単語の幅に合わせ、中身は折り返す
`max-content` で折り返さずに中身が全て収まる幅になる
`fit-content` は基本的には `max-content` と同じだが、はみ出す場合は折り返す

- 計算値
`calc()` で計算式を適用できる

### 色

<p class="codepen" data-height="500" data-default-tab="css,result" data-slug-hash="xxWRZxZ" data-user="ryowakabayashi" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ryowakabayashi/pen/xxWRZxZ">
  Colors</a> by Ryo Wakabayashi (<a href="https://codepen.io/ryowakabayashi">@ryowakabayashi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

- 背景色
`background-color` で指定する

- 文字色
`color` で指定する

- ボーダー色
`border-color` で指定する

4つの指定方法がある

- 16進数で `#<R2桁><G2桁><B2桁>` の形式 (`#000000` 〜 `#ffffff`)
- 10進数 (0 〜 255) で `rgb(<R> <G> <B>)`　の形式
- 10進数 (0 〜 255) で `rgba(<R>, <G>, <B>, <A>)`　の形式 (A はアルファ=非透明度)
- 140種類の色名

`linear-gradient` や `radial-gradient` でグラデーションが指定できる

#### 透明色

<p class="codepen" data-height="400" data-default-tab="css,result" data-slug-hash="gOemEJP" data-user="ryowakabayashi" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ryowakabayashi/pen/gOemEJP">
  Opacity</a> by Ryo Wakabayashi (<a href="https://codepen.io/ryowakabayashi">@ryowakabayashi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

`background-color` の `rgba` でアルファを指定した場合、背景色のみが透明になる
`opacity` を指定した場合、要素全体が透明になる

#### CSS で指定できる色名一覧

<p class="codepen" data-height="500" data-default-tab="css,result" data-slug-hash="QWmKrxL" data-user="ryowakabayashi" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ryowakabayashi/pen/QWmKrxL">
  Colors</a> by Ryo Wakabayashi (<a href="https://codepen.io/ryowakabayashi">@ryowakabayashi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### 文字

#### 文字寄せ

<p class="codepen" data-height="440" data-default-tab="css,result" data-slug-hash="poLeWKj" data-user="ryowakabayashi" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ryowakabayashi/pen/poLeWKj">
  Text Align</a> by Ryo Wakabayashi (<a href="https://codepen.io/ryowakabayashi">@ryowakabayashi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

`text-align` で左右方向の文字寄せができる

`vertical-align` で上下方向の文字寄せができるが、
`line-light` 基準でインライン要素にしか使えない

#### 折り返し

<p class="codepen" data-height="820" data-default-tab="css,result" data-slug-hash="PoRpgRK" data-user="ryowakabayashi" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ryowakabayashi/pen/PoRpgRK">
  Wrap</a> by Ryo Wakabayashi (<a href="https://codepen.io/ryowakabayashi">@ryowakabayashi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

`overflow-wrap` もしくは `word-break` で折り返しを指定できる

`break-all` では単語の区切りを無視して常に折り返し、
`break-word` では単語がはみ出す場合だけ単語内で折り返す

#### 省略

<p class="codepen" data-height="570" data-default-tab="css,result" data-slug-hash="jOzBobJ" data-user="ryowakabayashi" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ryowakabayashi/pen/jOzBobJ">
  Ellipsis</a> by Ryo Wakabayashi (<a href="https://codepen.io/ryowakabayashi">@ryowakabayashi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

`text-overflow: ellipsis` で3点リーダ `…` による省略ができる

他との組み合わせでツールチップ表示も可能

#### 文字装飾

<p class="codepen" data-height="750" data-default-tab="css,result" data-slug-hash="QWmGypo" data-user="ryowakabayashi" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ryowakabayashi/pen/QWmGypo">
  Text</a> by Ryo Wakabayashi (<a href="https://codepen.io/ryowakabayashi">@ryowakabayashi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

文字装飾を指定できる

基本的にダサくなるので使わない

- フォント
`font-family` で指定する

- 文字サイズ
`font-size` で指定する
`px` でピクセル単に指定する
`em` で親要素との比で指定する
`rem` でルート要素との比で指定する

- 文字の太さ
`font-weight` で指定する
`normal` で通常、 `bold` で太字を指定する
100 〜 900 で詳細に指定する

- 1行の高さ
`line-height` で指定する

- 上線、下線
`text-decoration` で指定する
色や波線も指定可能

- 文字の影
`text-shadow` で指定する

- 文字間の距離
`letter-spacing` で指定する

- 単語間の距離
`word-spacing` で指定する

#### フォント一覧

<p class="codepen" data-height="600" data-default-tab="css,result" data-slug-hash="yLKVeqy" data-user="ryowakabayashi" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ryowakabayashi/pen/yLKVeqy">
  Fonts</a> by Ryo Wakabayashi (<a href="https://codepen.io/ryowakabayashi">@ryowakabayashi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### 余白

<p class="codepen" data-height="830" data-default-tab="css,result" data-slug-hash="abYBZWx" data-user="ryowakabayashi" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ryowakabayashi/pen/abYBZWx">
  Margin And Padding</a> by Ryo Wakabayashi (<a href="https://codepen.io/ryowakabayashi">@ryowakabayashi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

- 要素の内側
`padding` で要素の内側の余白を指定する

- 要素の外側
`margin` で要素の外側の余白を指定する
`auto` を指定すると、横方向の中央に配置できる

指定する値の数で適用箇所が異なる

- 1: 全方向
- 2: 縦 横
- 3: 上 横 下
- 4: 上 右 下 左

`-top` や `-left` で特定の方向だけを指定できる

### ボーダー

<p class="codepen" data-height="720" data-default-tab="css,result" data-slug-hash="JjLWWbP" data-user="ryowakabayashi" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ryowakabayashi/pen/JjLWWbP">
  Borders</a> by Ryo Wakabayashi (<a href="https://codepen.io/ryowakabayashi">@ryowakabayashi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

`border: <太さ> <ボタータイプ> <色>` でボーダーを指定する

`border-radius` で角丸にすることができる

### カーソル

<p class="codepen" data-height="350" data-default-tab="css,result" data-slug-hash="KKoWOpZ" data-user="ryowakabayashi" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ryowakabayashi/pen/KKoWOpZ">
  Cursor</a> by Ryo Wakabayashi (<a href="https://codepen.io/ryowakabayashi">@ryowakabayashi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

`cursor` でマウスカーソルを変更する

`url(), auto` で画像をカーソルに指定することも可能

### 配置

#### Position

`position` プロパティで画面内にどのように配置するかを指定する

<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="JjLbKrg" data-user="ryowakabayashi" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ryowakabayashi/pen/JjLbKrg">
  Position</a> by Ryo Wakabayashi (<a href="https://codepen.io/ryowakabayashi">@ryowakabayashi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

- 通常配置
`static` で通常の配置を指定する
`top` や `left` で位置を指定することはできない

- 絶対配置
`absolute` で親（`position: relative` の要素、それがなければ 画面全体）を基準として配置する

- 相対配置
`relative` で通常配置の位置を基準として配置する

- 固定配置
`fixed` で画面全体の中で、スクロールしても変わらないよう配置する

- 粘着配置
`sticky` で親要素内でスクロールしても留まるよう配置する

#### Display

`display` プロパティで表示の仕方を指定する

<p class="codepen" data-height="850" data-default-tab="css,result" data-slug-hash="xxWRZeL" data-user="ryowakabayashi" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ryowakabayashi/pen/xxWRZeL">
  Display</a> by Ryo Wakabayashi (<a href="https://codepen.io/ryowakabayashi">@ryowakabayashi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

- 非表示
`display: none` で非表示にする

- ブロック
`display: block` でブロック要素として指定する
ブロック要素は縦に並び、高さや幅を指定できる

- インライン
`display: inline` でインライン要素として指定する
インライン要素は横に並び、高さや幅を指定できない
縦方向のマージンを指定できない
中にブロック要素を配置させない（文字を入れるだけの要素）

- インラインブロック
`display: inline-block` でインラインブロック要素として指定する
インラインブロック要素は横に並び、高さや幅を指定できる

#### フレックスボックスレイアウト

`display: flex` を指定した要素の中はフレックスボックスレイアウトになる

フレックスボックス内では折り返しや均等配置が行いやすい

<p class="codepen" data-height="800" data-default-tab="css,result" data-slug-hash="poLNyeN" data-user="ryowakabayashi" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ryowakabayashi/pen/poLNyeN">
  Flex</a> by Ryo Wakabayashi (<a href="https://codepen.io/ryowakabayashi">@ryowakabayashi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

- 方向
`flex-direction: row` で横方向に並べる
`flex-direction: column` で縦方向に並べる
それぞれ `-reverse` をつけることで逆順に並べる

- 折り返し
`flex-wrap: wrap` で折り返す
`flex-wrap: nowrap` で折り返さない（はみ出す）

- 縦方向配置
`align-items: start` で上寄せ
`align-items: end` で下寄せ
`align-items: stretch` で上下に伸ばす
`align-items: center` で中央寄せ

- 横方向配置
`justify-content: start` で左寄せ
`justify-content: end` で右寄せ
`justify-content: center` で中央寄せ
`justify-content: space-around` で両端に余白のある均等割
`justify-content: space-between` で両端に余白のない均等割
`justify-content: space-evenly` で両端に各要素と同じ余白を追加した均等割

非常によく使う組み合わせ

```css
.center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.space-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
```

#### グリッドレイアウト

`display: grid` を指定した要素の中はグリッドレイアウトになる

行と列から成る碁盤の目のように要素を配置する

<p class="codepen" data-height="1070" data-default-tab="css,result" data-slug-hash="MWVbyzO" data-user="ryowakabayashi" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ryowakabayashi/pen/MWVbyzO">
  Grid</a> by Ryo Wakabayashi (<a href="https://codepen.io/ryowakabayashi">@ryowakabayashi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

- 各行、列のサイズ
`grid-template-rows` で各行の高さを指定する
`grid-template-columns` で各列の幅を指定する
`fr` は残りを表す

- 配置
指定しなければ左上から順に1行、１列のサイズで配置される
`grid-row` と `grid-column` で位置（行番号、列番号）を指定できる
行番号は上端を 1 、列番号は左端を 1 として数える
`/` 区切りで範囲指定すると、複数行、複数列に跨った範囲を指定できる

### アニメーション

#### Transition

<p class="codepen" data-height="640" data-default-tab="css,result" data-slug-hash="GRxNYxb" data-user="ryowakabayashi" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ryowakabayashi/pen/GRxNYxb">
  Transition</a> by Ryo Wakabayashi (<a href="https://codepen.io/ryowakabayashi">@ryowakabayashi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

`transform` で要素を変形させる
`transition` で変形にかける時間を指定する

通常状態に明示的に変形前の値を設定しておき、
擬似クラスなどに変更後の値を設定する

JavaScript と組み合わせ、ボタンクリック時の動作などを定義できる

#### Keyframe

<p class="codepen" data-height="550" data-default-tab="css,result" data-slug-hash="rNdWMPM" data-user="ryowakabayashi" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ryowakabayashi/pen/rNdWMPM">
  Animation</a> by Ryo Wakabayashi (<a href="https://codepen.io/ryowakabayashi">@ryowakabayashi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

`@keyframes` にアニメーションの動作を定義する
各%の時点での変形を定義し、各要素では変形にかける時間、繰り返し回数などを指定する

### レスポンシブ

<p class="codepen" data-height="700" data-default-tab="css,result" data-slug-hash="vYRxexR" data-user="ryowakabayashi" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ryowakabayashi/pen/vYRxexR">
  Responsive</a> by Ryo Wakabayashi (<a href="https://codepen.io/ryowakabayashi">@ryowakabayashi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

メディアクエリ `@media` を指定することで、表示する媒体によって外観を切り替える

`@media print` で印刷時の外観を指定する

`@media screen` 通常の画面表示時の外観を指定する

`min-width()` と `max-width()` により、画面サイズの下限、上限を指定する

## Stylelint

https://stylelint.io/

CSS の構文を解析し、チェックするツール

自動修正も可能

CSS の品質を安定させるためには必須

デモサイトで動かしてみる

https://stylelint.io/demo

### Stylelint の導入

https://stylelint.io/user-guide/get-started

`npm install` でプロジェクトに導入する

Shared Config = 共有設定を入れると、一般的な設定でチェックできる

https://github.com/stylelint/stylelint-config-standard

Prettier の整形との整合性を取る

https://github.com/prettier/stylelint-config-prettier

プロパティの順序を統一した方が可読性が高いので、順序のチェックも導入する

https://www.npmjs.com/package/stylelint-config-recess-order

`indentation` を設定しておくと、インデントのチェック、移動修正もできる

## 開発者ツール

様々な開発者用情報を閲覧できる

ほとんどのブラウザに搭載されている

- HTML 要素の表示、エミュレーション
スタイルの変更も可能

![スクリーンショット 2022-07-19 17.52.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1485835/2b31579d-f5ac-1fd8-c7da-1addb95dfe18.png)

- JavaScript 用コンソール
- ネットワークの監視、シミュレーション
- パフォーマンス監視
- ストレージ、キャッシュ、ソースコードの確認

### CSS を確認してみよう

様々な企業やサービスのサイトの CSS を見て参考にする

https://www.google.com/

https://www.apple.com/jp/

https://www.amazon.co.jp/

https://www.oec.co.jp/