【CSS】基本的な書き方やプロパティまとめ

解説ではなくチートシートのようなものなので、細かい説明は省略しています。
（初心者のため間違いなどあったらすみません）



## CSSの書き方（読み込み方）

##### HTMLファイルで読み込み

HTMLファイル内で、以下の**いずれか**の方法を使ってCSSファイルを読み込み、スタイルが反映されるようにします。

```html:index.html
1. CSSファイルに記述し、HTMLファイルのheadタグ内でCSSファイルを読み込む（一般的な方法）
<link rel="stylesheet" href="styles.css" type="text/css">

2. HTMLのタグの中に直接記述
<p style="color:blue">テキスト</p>

3. HTMLファイルのheadタグ内に記述
<style type="text/css">
  color: blue;
</style>
```

##### CSSファイルの準備
CSSファイルの冒頭には、以下を記述します。

```css:styles.css
@charset "UTF-8";
```
あと、必須ではないけれど、最初にリセットCSSで各ブラウザに設定されているデフォルトのCSSをリセットしておくと混乱が減る。



## よく使うプロパティなど

##### コメント
/* このように記述します */

##### 文字
- color: 文字色
- font-size: 文字サイズ
- font-weight: 文字の太さ（400/normal:普通, 600/bold:太字）
- font-family: 文字の種類
- letter-spacing: 文字間隔
- line-height: 行の高さ
- text-align: 文字の左寄せ、中央寄せ、右寄せ
- text-decoration: noneで下線を消す
- font-style: 文字を筆記体（italic）や斜体（oblique）に

##### 余白・位置
- margin: 外側の余白
    - (margin: 0 auto; で真ん中寄せ)
- padding: 内側の余白
- position: ボックスの配置方法の指定
    - relative ->相対位置
    - absolute ->絶対位置
    - fixed ->絶対位置（スクロールしても固定）
- top, right, bottom, left: 親要素の端からの距離を指定

##### 要素の大きさ
- width: 幅の指定
- height: 縦の指定

##### 背景
- background-color: 背景色を指定
- background-image: url(ここにURLを入れる); ->背景画像を設定
    - （以下2つを一緒に指定すると、背景画像をいい感じに設定できる）
    - background-size: cover;
    - background-position: center;

##### 線
- border: 1px（太さ） solid（スタイル） blue（色）; ->線のスタイルを一括で指定
    - スタイル...solid（直線）, dashed（点線）
- border-bottom: 要素の下のみの線のスタイルを指定（top, right, leftも同様に可能）

##### 表示
- display:
    - block ->ブロック要素にする（幅と高さを指定できる）
    - inline-block ->インラインブロック要素にする（横幅と高さを指定できる。前後の要素と横に並ぶ）
    - inline ->インライン要素にする（幅と高さを指定できない。上下の余白を調整できない） 
    - none ->非表示にする
    - flex ->子要素をいい感じに並べる（オプションたくさんあるので詳しくはぐぐる）

##### その他、よく使う
- opacity: 透過（0～1）
- border-radius: 丸角にする
- box-shadow: 影をつける(左右の向きpx 上下の向きpx ぼかしpx 広がりpx 色 (内側指定);)
- z-index: 要素の重なり順
- overflow: はみ出る部分の指定
- transform: アニメーションをつける
- transition: アニメーションにかかる時間を設定する



## セレクタの指定の仕方
##### セレクタとは
スタイルを指定する対象のことです。

```styles.cs
p(セレクタ) {
 color(プロパティ): blue(値);
}
```

##### 複数の要素選択や、関係による絞り込み

- 複数の要素の間に**半角スペース**を入れると、親要素の下のすべての指定した子要素に適用
ex）sectionの中のすべてのpに適用

- **「,（カンマ）」**を入れると、すべての要素に適用
ex）h2, h3, h4 {... ->h2 h3 h4すべてのpに適用

- **「>」**を入れると、最初の要素の1階層下の要素に適用
ex）section > p {... ->section直下にあるpに適用

- **「+」**を入れると、最初の要素と同一階層で後続に登場する1つの要素に適用
ex）h3 + p {... ->h3と同じ階層で1つ後にあるpに適用

- **「~」**を入れると、最初の要素と同一階層で後続に登場するすべての要素に適用
ex）h3 ~ p {... ->h3と同じ階層で後に出てくるすべてのpに適用



## セレクタの擬似クラス・擬似要素

##### 擬似クラスで、リンクに指定

- セレクタ:hover ->カーソルが要素の上にある時
- セレクタ:visited ->訪問済みのリンク
- セレクタ:link ->未訪問のリンク
- セレクタ:active ->クリックしている時


##### 擬似クラスで、1部のみに指定

- セレクタ:first-of-type ->最初の要素を指定
- セレクタ:last-of-type ->最後
- セレクタ:nth-of-type(n) ->n番目
- セレクタ:nth-of-type(even) ->偶数
- セレクタ:nth-of-type(odd) ->奇数
- セレクタ:not(n) ->n以外


##### 疑似要素

- セレクタ::before ->要素の直前にコンテンツを追加（contentプロパティが必要）
- セレクタ::after  ->要素の後にコンテンツを追加（contentプロパティが必要）
- セレクタ::first-letter ->要素の1文字目を指定
- セレクタ::first-line ->要素の1行目を指定



## サイズ・単位

##### ブラウザの高さ・幅に対してサイズを指定

- vw（viewport widthの略） ->ブラウザの幅を100vwとしてサイズを指定
- vh（viewport heightの略） ->ブラウザの高さを100vhとしてサイズを指定


##### フォントサイズの単位

- px ->絶対値。相対指定。
- % ->相対値。親要素を100%としてサイズを指定
- em ->相対値。親要素を1emとしてサイズを指定
- rem ->相対値。ルート(html)を1emとしてサイズを指定


---

4年前に初めてコーディングを勉強した頃に書いたメモが出てきたので、まとめてみました。
今でも初心者なので、間違いなどあれば教えていただけると喜びます。（雑すぎて間違いも何もない気もしますが）

フロントエンドエンジニアになりたいと思って勉強をはじめ、気付いたらデザイナーになっていたので、今でも中途半端なまま。。。
コーディングもちゃんと実務レベルまで引き上げたい。頑張る。