CSS【基礎】

## スタイルシートについて
<details><summary>インラインスタイルシート</summary>

```html
<div style="color: red; width: 100%;">あいうえお</div>
```
- 要素に対して直接styleを指定する
</details>
<details><summary>外部スタイルシート</summary>

```html
<link rel="stylesheet" type="text/css" href="style.css" >
```
- rel属性
    - リンクファイルとの関係性を指定
- type属性
    - cssのMIMEタイプを指定
    - 規定値は`text/css`なので省略可能
- href属性
    - 対象のcssファイルのパスを指定
</details>

<details><summary>内部スタイルシート</summary>

```html
<style> h1 { color: red; } </style>
```
- style要素は`head`要素に記載する
</details>


<details><summary>適用優先順位</summary>

1. インラインスタイルシート
1. 外部スタイルシート or 内部スタイルシート(後に記述したcssが適用される)
1. ユーザースタイルシート
1. ユーザーエージェントスタイルシート

* ユーザースタイルシート...ユーザーがブラウザに設定したスタイルシート（ユーザー独自の設定が可能）
* ユーザーエージェントスタイルシート...ブラウザの規定設定
</details>

## セレクタ
<details><summary>タイプセレクタ</summary>

```css
div { color: red; }
```
- 適用範囲は、指定したすべての要素（例でいうと、`div`要素すべて）
</details>

<details><summary>クラスセレクタ</summary>

```css
/* css */
.message { color: red; }
/* もしくは */
div.message { color: red; }
```
```html
<!-- HTML -->
<div class="message">Hello World!!</div>
```
- 適用範囲は、指定した任意の範囲
</details>

<details><summary>IDセレクタ</summary>

```css
/* css */
#message {color: red;}
```
```html
<!-- HTML -->
<div id="message">Hello World!!</div>
```
- 1つの要素のみ（複数の要素で共有できない）
* ブラウザによっては、複数要素に同じIDを指定できる
</details>

<details><summary>ユニバーサルセレクタ</summary>

```css
/* css */
*.message {
  color: red;
}
```
```html
<!-- HTML -->
<div class="message">Hello World!!</div>
<text class="message">Hello World!!</div>
```
- すべての要素に適用
</details>

属性セレクタ
<details><summary>要素 [ 属性名 ]</summary>

`<a>` 要素で、`title` 属性を持つもの
```css
a[title] {
  color: purple;
}
```
</details>

<details><summary>要素 [ 属性名 = "値" ]</summary>

```css
/* css */
/* <a> 要素で href が "https://hoge.com" と一致するもの */
a[href="https://hoge.com"]
{
  color: green;
}
```
```html
<!-- HTML -->
<a href="https://hoge.com">HOGE リンク</a>
```
指定した属性名と値が一致する要素（**`完全一致`**）
</details>

<details><summary>要素 [ 属性名 ~= "値" ]</summary>

```css
/* css */
div[class~="logo"] {
  color: red;
}
```
```html
<!-- HTML -->
<!-- どちらも赤色になる -->
<div class="logo">LOGO</li> 
<div class="logo menu">LOGO MENU</li>
```
指定した属性名と属性値ちを持つ要素（複数の属性値の中に含まれていても可）
</details>

<details><summary>要素 [ 属性名 |= "値" ]</summary>

```css
/* css */
div[class|="name"] {
color: red;
}
```
```html
<!-- HTML -->
<div class="name">HOGE TARO</div>
<div class="name-a">HOGE A TARO</div>
```
指定した属性名、属性値、もしくはハイフン区切りの属性値に一致する要素
</details>

<details><summary>要素 [ 属性名 ^= "値" ]</summary>

```css
/* css */
/* "#" で始まる内部リンク */
a[href^="#"] {
  background-color: gold;
}
```
```html
<!-- HTML -->
<a href="#InSensitive">Insensitive internal link</a>
```
指定した属性名、値が **`前方一致`** する要素
</details>

<details><summary>要素 [ 属性名 $= "値" ]</summary>

```css
/* css */
/* ".com" で終わるリンク */
a[href$=".com"] {
  color: red;
}
```
```html
<!-- HTML -->
<a href="http://hoge.com">HOGE Link</a>
```
指定した属性名、値が **`後方一致`** する要素
</details>

<details><summary>要素 [ 属性名 *= "値" ]</summary>

```css
/* css */
a[href*="hoge"] {
  color: red;
}
```
```html
<!-- HTML -->
<a href="http://hoge.com">HOGE Link</a>
```
指定した属性名、値が **`部分一致`** する要素
</details>

<details><summary>要素 [ 属性名 = "値" i]</summary>

```css
a[href="insensitive" i] {
  color: cyan;
}
```
属性値の後の「i」は、大文字、小文字の区別をしない
</details>

<details><summary>要素 [ 属性名 = "値" s]</summary>

```css
a[href="insensitive" s] {
  color: cyan;
}
```
属性値の後の「s」は、大文字、小文字を区別する
</details>

## 擬似クラス


<details><summary>:active</summary>
マウスクリックされている間など、アクティブ状態の時
</details>

<details><summary>:link</summary>
未訪問のLink
</details>

<details><summary>:visited</summary>
訪問済のLink
</details>

<details><summary>:nth-child(n)</summary>

- (親)要素内にある、すべての(子)要素の先頭からn番目の要素
- nには`odd`, `even`, 加算, 減算が設定可
    - `add`...奇数番目
    - `even`...偶数番目
- `:nth-last-child(n)`の擬似クラスもあるが、これは末尾の子要素からn番目の要素となる
```css
/* CSS */
li:nth-child(3) {
  border: 2px solid orange;
}
li:nth-last-child(2) {
  border: 2px solid blue;
}
```
```html
<!-- HTML -->
<ul>
  <li>One</li>
  <li>Two</li>
  <li>three</li> <!-- この子要素にorage borderが当たる -->
  <li>four</li> <!-- この子要素にblue borderが当たる -->
  <li>five</li>
</ul>
```
</details>

<details><summary>:nth-of-type(n)</summary>

- 子要素内にある、指定した要素の中で先頭からn番目の要素
- nには`odd`, `even`, 加算, 減算が設定可
- `:nth-last-of-type(n)`の擬似クラスもあるが、これは末尾の指定した子要素からn番目の要素となる

```css
/* CSS */
dd:nth-of-type(even) {
  border: 2px solid orange;
}
```
```html
<!-- HTML -->
<dl>
  <dt>Vegetables:</dt>
  <dd>1. Tomatoes</dd>
  <dd>2. Cucumbers</dd> <!-- border orange -->
  <dd>3. Mushrooms</dd>
  <dt>Fruits:</dt>
  <dd>4. Apples</dd> <!-- border orange -->
  <dd>5. Mangos</dd>
  <dd>6. Pears</dd> <!-- border orange -->
  <dd>7. Oranges</dd>
</dl>
```
</details>

<details><summary>:first-child</summary>

- :nth-child(1)の状態
- :nth-last-childもあり、これは末尾の子要素となる
```css
/* CSS */
p:first-child {
  color: lime;
  background-color: black;
  padding: 5px;
}
```
```html
<!-- HTML -->
<div>
  <p>このテキストは選択されます。</p>
  <p>このテキストは選択されません。</p>
</div>

<div>
  <h2>このテキストは選択されません。: `p` ではありません。</h2>
  <p>このテキストは選択されません。</p>
</div>
```
</details>

<details><summary>:first-of-type</summary>

- :nth-of-type(1)の状態
- :nth-last-childもあり、これは`:nth-last-of-type(1)`の状態となる
```css
/* CSS */
article :nth-of-type(1) {
  background-color: pink;
}
```
```html
<!-- HTML -->
<article>
  <div>これは最初の `div` です。</div>
  <div>これは<span>内側で最初の `span`</span> です。</div>
  <div>
    これは<em>内側で最初の `em`</em>で、一方これは<em>最後の `em` </em>です。
  </div>
  <div>これは<span>スタイル付けされた内側の `span`</span>です</div>
  <p>これは `p` で修飾しています。</p>
  <div>これは最後の `div` です。</div>
</article>
```
**出力結果**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2239673/4fea463c-b1ae-4e81-a68d-7fd9622eb3f7.png)
</details>


<details><summary>:only-child</summary>

- 兄弟要素がない要素にstyleが当たる
```css
/* CSS */
li:only-child { color: red; }
```
```html
<!-- HTML -->

<!-- この li 要素には color: red があたる -->
<ol>
  <li>Robert Downey, Jr.</li>
</ol>

<!-- この li 要素は、兄弟要素があるので、styleはあたらない -->
<ol>
  <li>Robert Downey, Jr.</li>
  <li>Robert Downey, Jr.</li>
</ol>
```
</details>

<details><summary>:empty</summary>

- 子要素を持たない要素
```css
/* CSS */
div:empty {
  height: 1em;
  background-color: red
}
```
```html
<!-- HTML -->
<p>コメントがある場合でもcsssが適用される</p>
<div><!-- Simple Comment --></div>

<p>子要素 p があるのでcssが適用されない</p>
<div><p></p></div>
```
</details>

<details><summary>:target</summary>

- URL のフラグメントに一致する id を持つ固有の要素
[Playgrounf | MDN](https://developer.mozilla.org/ja/play)
</details>

<details><summary>:lang</summary>

- 言語が一致する要素
```css
*:lang(ja) {
  outline: 2px solid deeppink;
}
```
```html
<!-- HTML -->
<p lang="ja">
  この要素が赤枠で囲まれます。
</p>
```
</details>

## 擬似要素
<details><summary>::aftere</summary>

- 指定された要素の末尾にコンテンツを追加
</details>

<details><summary>::before</summary>

- 指定された要素の先頭にコンテンツを追加
</details>

<details><summary>::first-letter</summary>

- 指定した要素の先頭文字
</details>

<details><summary>::first-line</summary>

- 指定した要素の先頭行
</details>


使用例
```css
/* 先頭に☆が付く */
div::before {content: "☆"; }
```

## 結合子

<details><summary>A > B</summary>

- Aの子要素Bにstyleが適用(例で言うと、順序なしアイテムのli要素に対してstyleが適用)
```css
/* css */
ul > li { border: 5px solid red; }
```
```html
<!-- HTML -->
<ul>
  <li>順序なしアイテム</li>
  <li>
    順序なしアイテム
    <ol>
      <li>アイテム 1</li>
      <li>アイテム 2</li>
    </ol>
  </li>
</ul>
```
</details>

<details><summary>A + B</summary>

- 隣接する兄弟要素に適用される(Bに適用される)
```css
/* css */
h1 + p {
  font-weight: bold;
  background-color: #333;
  color: red;
  padding: 0.5em;
}
```
```html
<!-- HTML -->
<article>
  <h1>見出し</h1>
  <p>ここに適用される</p>
  <p>ここには適用されない</p>
</article>
```
</details>

<details><summary>A ~ B</summary>

- 後続する兄弟要素に適用される。（Bの要素に適用）
```css
/* css */
h1 ~ p {
  font-weight: bold;
  background-color: #333;
  color: red;
  padding: 0.5em;
}
```
```html
<!-- HTML -->
<article>
  <h1>見出し</h1>
  <p>これに適用</p>
  <div>適用されない</div>
  <p>これに適用</p>
</article>
```
</details>

## プロパティ
<details><summary>color</summary>

- rgba(255, 0, 0, 0)の時、4つ目の値が「0」の時は透過する
- `color: #000000;`で表現する際、2桁毎に`color: #赤緑青` となる。
    - 例：#000000 (黒)、#FFFFFF (白)、＃FF0000（赤）
</details>

<details><summary>transform</summary>

- 要素を移動、回転、拡大・縮小、傾斜させる事ができる
- 
##### 設定値
- translate(X軸、Y軸)...要素を移動する(translateX, translateYもある)
- rotate...要素を回転する(rotateX, rotateYもある)
- scale...要素を拡大・縮小する(scaleX, scaleYもある)
- skewX, skewY...要素を傾斜する
```css
#div {
  translate: 5px 10px 20px; /* 右に5px, 下に10px, 20px拡大する */
}
```
</details>

##### Table関連

<details><summary>border-collapse</summary>

- セルの枠線を 繋げる or 切り離す
- 設定値
    - collapse...繋げる（共有する）
    - separate...切り離す(初期値)
</details>

<details><summary>border-spacing</summary>

- 隣り合うセルの境界同士の間隔を設定
</details>

<details><summary>caption-side</summary>

- キャプション(タイトルみたいなもの)の位置（上下）を設定する
</details>

<details><summary>empty-cells</summary>

- 空セルの 表示 / 非表示 の設定
- 設定値
    - show...表示
    - hide...非表示
</details>

<details><summary>table-layout</summary>

- テーブルの列幅の 自動 / 固定 を設定
- 設定値
    - auto...自動
    - fixed...固定
</details>

<details><summary>transition</summary>

- cssプロパティの変化速度を制御するショートハンドプロパティ
例
```css
/* colorプロパティが5秒かけて変化する */
div { transition: color 5s; }

/* colorプロパティが10秒後に5秒かけて変化する */
/* transition-property transition-duration transition-deray */
div { transition: color 5s 10s; }
```
</details>

<details><summary>transition-duration</summary>

- 変化にかかる時間を　秒 s, ミリ秒 msで設定
</details>

<details><summary>transition-deray</summary>

- 変化が開始するまでの時間を 秒 s, ミリ秒 ms で設定
</details>

<details><summary>transition-property</summary>

- transitionを適用させるプロパティ名の設定
</details>

<details><summary>transition-timing-function</summary>

- 変化のタイミングを3次ベジェ曲線で設定
- おm設定値
    - ease...トランジションの半ばまで変化量が増加し、最後にはまた遅くなる
    - linear...トランジションは均等の速度になる
    - ease-in...最初は遅く、トランジションの速度は完了まで増加する
    - ease-out...速い速度で始まり、速度を次第に遅くなる
</details>

## アニメーションと @ keyframes
<details><summary>@ keyframes</summary>

```css
@keyframes slidein {
  from { transform: translateX(0%); }
  to { transform: translateX(100%); }
}
```
- @ keyframesの後は、`animation-name`と一致させる必要がある
- 設定値
    - from...アニメーションの始まりである 0% と同じ
    - to...アニメーションの終わりである 100% と同じ
    - from, toの部分は % で表現することも可能
</details>

<details><summary>animation-name</summary>

アニメーションのキーフレーム名の指定
</details>

<details><summary>animation-deray</summary>

アニメーションの開始時間
</details>

<details><summary>animation-duration</summary>

アニメーションの実行時間を指定する
</details>

<details><summary>animation-iteration-count</summary>

アニメーションの繰り返し回数を設定。
infinityで無限に繰り返す。
</details>

<details><summary>animation-timing-function</summary>

変化のタイミングを3次ベジェ曲線で設定。
ease-in...徐々に加速する
ease-out...徐々に減速する
</details>

<details><summary>animation-direction</summary>

アニメーションの実行方向を指定。
- normal...通常実行
- reverse...逆実行
- alternate...通常と逆実行の両方
</details>

<details><summary>animation-play-state</summary>

アニメーションの実行状態。
- running...実行中
- paused...停止
</details>

<details><summary>animation-fill-mode</summary>

アニメーションの実行前後に適用するスタイルを設定。
- fowards...実行後のスタイル
- backwards...実行前のスタイル
- both...両方
</details>


<details><summary>animation</summary>

- アニメーション関連のショートハンドプロパティ
```css
/* @keyframes duration | timing-function | delay |
iteration-count | direction | fill-mode | play-state | name */
animation: 3s ease-in 1s 2 reverse both paused slidein;
```
</details>