HTMLCSSの重要な要素とプロパティと擬似プロパティと

## はじめに
インターンではSwiftを使ってモバイルアプリの勉強をしていたのですが、就職活動やインターン先のエンジニアの方々とお話をたくさんさせて頂いてWebについて勉強したくなり、今の会社に内定をいただきました。内定先は自分次第でなんでも学べるので満足しています！
現在私は内定先でインターンをしています。まずはHTMLCSS、次にJavaScript、次に...というように段階を踏んで勉強させてもらっています。そこでまだ途中経過ではありますが、課題の中で学んだHTMLとCSSの重要な要素とプロパティを忘れないうちに箇条書きでアウトプットしときます。追加していくかも

## 重要な要素とプロパティ

### margin
- borderの外側の上下左右の余白を設定するプロパティ
- 左右のマージンをautoにすると、左右中央に要素を配置できる

### padding
borderで指定された境界とその中のコンテンツの間の上下左右の余白を設定するプロパティ

### border
ボックス内の枠線を指定する際に使用するプロパティ
border: solid #FFF; こんな感じ

### border-radius
角丸をまとめて指定する

### float
- 要素を横並びにするという役割を持ったプロパティ
- 文字を回り込ませることができるプロパティ

### clearfix
- floatで左寄せ（もしくは右寄せ）になった要素の回り込みを解除する
- 指定したい要素の親要素にclassで指定

```html
<div class="clearfix">
 <div class="box">
  <img src="___.jpg">
  <p class="text">Hello World</p>
 </div>
</div>
```

```css
.clearfix::after{
  content: "";
  display: block;
  clear: both;
}
```

### table-layout
- テーブルの表示方法を指定する際に使用
- 指定できるのは、テーブルの列幅を自動レイアウト（auto）、固定レイアウト（fixed）

### :nth-child
要素を選択するパターンを表す引数を1つ取る

```css
li:nth-child(x) {
}
```

### :first-child
数が変わっても常に最初を指定し続ける
:nth-child(1)でもOK

```css
li:first-child {
}
```

### :last-child
数が変わっても常に最後を指定し続ける

```css
li:last-child {
}
```

### display
ブロックレベル・インライン・テーブル・ルビ・フレックスコンテナ等の、要素の表示形式を指定する際に使用

### display: block
要素が横までいっぱいに広がり、縦に並んでいく

### display: inline
要素が平ぺったく横に並んでいく

### display: inline-block
- 並びはinline的、中身はblock的
- 文章中にインラインで要素を設置する事ができ、かつwidthやheightを指定する事ができる

### display: table
絶対にカラム落ちせず、すべてのカラムの高さは、一番縦長と同じ高さになる
(カラム・・・文字の位置やデータの長さを表す単位)

### display: table-cell
- 親要素と子要素の関係があり、親要素に横幅を指定して、margin: 0 auto;と指定すれば、左右中央に設置することができる
- 子要素の縦幅を均一に揃えてくれて、子要素にvertical-align: middle;を指定すれば、上下中央に揃えることができる
- ulにtable-layout:fixedを指定すれば、小要素の幅を均等にする事もできる

### display: flex
並列になる

### vertical-align
- 行のなかでのテキストや画像などの縦方向の揃え位置を指定する際に使用
- 適用できるのは、インライン要素とテーブルセルのみ

### align-items
コンテナ内のアイテムの縦方向のデフォルト揃え位置を指定する

### justify-content
コンテナ内全体の横方向の揃え位置を指定する

### position
ボックスの配置方法（基準位置）を指定する

### position: absolute
- 絶対位置の配置
- 親ボックスにpositionプロパティのstatic以外の値が指定されている場合には、親ボックスの左上が基準位置となり、親ボックスにpositionプロパティのstatic以外の値が指定されていない場合には、ウィンドウ全体の左上が基準位置となる

### position: relative
- 相対位置への配置
- positionプロパティでstaticを指定した場合に表示される位置が基準位置となる

### z-index
重なりの順序を指定する

### :before :after
HTMLには書かれていない擬似要素をCSSで作ることができる
:before // 要素の直前に内容を追加
:after // 要素の直後に内容を追加

### appearance(-webkit-appearance)
ユーザーが利用するプラットフォームに応じて、要素がその環境における標準的なUIのような外観になるよう指定する

### label
フォームの一行テキストボックス・チェックボックス・ラジオボタン等の構成部分とその項目名（ラベル）を明確に関連付けるための要素

### form
入力・送信フォームを作成する

### input(type="text")
一行テキストボックスを作成する

### input(type="radio")
ラジオボタンを作成する

### input(type="checkbox")
チェックボックスを作成する

### textarea
複数行のテキスト入力欄を作成する

### select
セレクトボックスを作成する

### button (inputも可能)
ボタンを作成する

### outline
アウトラインのスタイル・太さ・色を指定する

### :checked
チェックされているユーザーインターフェース要素にスタイルを適用する

### :focus
ユーザーの操作で要素がフォーカスされた際のスタイルを指定
ex.フォームの入力欄にカーソルを合わせてテキスト入力できるようになった状態

```css
.input:focus {
  box-shadow: 0 0 7px #00BCD4;
}
```

### :active
クリック中の要素にスタイルを適用する
ex.リンクにカーソルが乗ったり、クリックされた場合のスタイルを変化させる

### transition
transition効果（時間的変化）をまとめて指定する
               
### transform
要素に2D変形、または、3D変形を適用する

### :hover
カーソルが乗っている要素にスタイルを適用する

### animation
要素にキーフレームアニメーションを適用する場合に、 アニメーションについてまとめて指定する