100日後くらいに個人開発するぞ！day029

# 今日はHTML＆CSSを総復習してみた！【前編】

## 開始タグと終了タグ
* `<x>`開始タグ
* `</x>`終了タグ
## 見出しをつける
* `<h>見出し</h>`
    * hはheadingの頭文字
    * `<h1>,<h2>,<h3>,,,<h6>,,,`と数字が大きくなるにつれて見出しは小さくなる
## 段落をつける
* `<h2>タイトル</h2>`
    * `<h2>`要素で囲むと改行される
    * `<p>テキスト</p>`
        * pはparagraphの頭文字
## コメント
* `<!--コメント-->`で囲むとブラウザに表示されない

## リンクをつける
* `<a ref="URL">アンカーテキスト</a>`

## 画像をつける
* `<img src="画像URL">`
* テキストを囲むことがないので終了タグが不要


## リストをつける
* 親要素：囲む方の要素
    * `<ul>子要素</ul>`：黒点が先頭につく
    * `<ol>子要素</ol>`：数字が連番でつく
* 子要素：囲まれる要素
    *`<li>テキスト</li>`
    * 入れ子構造がある場合はインデント（字下げ）をすることで親子関係が分かりやすくなる



## CSSとは
- HTMLの要素に対して色・大きさ・配置を指定しページをデザインするための言語
    - 例：HTMLのh1要素の色を赤にする場合
        - `h1{color:red;}`
- HTMLとは別のファイルに記述する
- 変更項目を「プロパティ」、要素名を「セレクタ」と言います
- プロパティの末尾にコロん(:)を付け、行末にセミコロン(;)を付ける必要がある
- CSSを書くときもインデント（字下げ）を行う
- コメントは`/*コメント*/`で囲う
## 文字の色
- 文字の色はcolorプロパティで変更できる
- `color:#ff000;`のように16進数のカラーコードで色を指定する
    - 主要な色であれば`color:red;`のように指定できる
    - 「#dddddd」のように値が連続する場合は「#ddd」と短縮できる
## 文字の大きさ
- 文字の大きさはfont-sizeプロパティで変更できる
- font-sizeはpx(ピクセル)という単位を用いて指定する
    - 例：h1の大きさを50pxにする場合
        - `h1{font-size:50px;}`
## 文字の種類
- 文字の種類はfont-familyプロパティで変更できる
- 「font-family:フォント名;」で変更できる
    - 例：h1のフォントをserifにしたい場合
        - h1{font-family:serif;}
- フォント名にスペースがある場合はダブルクォーテーションで囲む
    - 例：h1のフォントをAvenir Nextにしたい場合
        - `h1{font-family:"Avenir Next";}`
- font-familyには様々なフォントを指定できる
    - 「明朝体」：serif,YuMicho
    - 「ゴシック体」：sans-serif,"Lucida Grande"
## 幅と高さ
- 要素の横幅を変更するにはwidthプロパティを用いる
    - 例：h1の横幅を50pxに変えたい場合
        - `h1{width:50px;}`
- 要素の高さを変更するにはheightプロパティを用いる
    - 例：h1の高さを50pxに変えたい場合
        - `h1{height:50px;}`
## 背景の色
- 背景の色を変えるにはbackground-colorプロパティを用いる
- 例：h1の背景色を#ddddddに変えたい場合
    - `h1{background-color:#dddddd;}`
## 特定のHTML要素を変更したい場合
- 特定の要素だけCSSを適用するにはHTMLタグをclass名で命名し、「.」を付けて指定する必要がある
    - 例：HTML内の一部のリストだけを指名する場合
        - `<ul>`
            - `<li class="selected">リスト１</li>`
            - `<li>リスト２</li>`
            - `<li>リスト３</li>`
        - `</ul>`
    - 例：CSSで命名した要素をclassで指定する場合
        - `.selected{color:red;}`
- 複数の要素に同じclassをつけると全てに同じCSSが適用される


## HTMLの全体構造
- HTMLファイルには決められた型を書いていく必要がある
    - `<html>`要素の中に`<head>`要素と`<body>`要素が必要です。
        - `<head>`要素にはページに関する情報を記述
        - `<body>`要素には実際に表示したい内容を記述
- HTMLバージョンを指定する
    - HTMLのファイルではHTMLのバージョンを宣言する必要がある
    - 最新バージョンのHTMLを使うために宣言される`<!DOCTYPE html>`はDOCTYPE宣言と呼ばれる
## `<head>`要素の特徴
- `<head>`要素ではWebページの設定に関する情報を書く
- `<head>`要素内に記述した内容はWebページには表示されない
- `<head>`要素には必ず入れる3つの要素がある
    - ①文字コードの指定
    - ②ページタイトルの設定
    - ③CSSの読み込み
## `<head>`要素の3つ
- ①文字コードの指定
    - 定型文：`<meta charset="文字コード">`
    - 文字コードを指定することで文字化けを防ぐことができる
    - HTMLで推奨されてるコードは"UTF-8"
- ②ページタイトルの設定
    - 定型分：`<title>タイトル</title>`
    - 指定されたタイトルはブラウザのタブ上に現れる
- ③CSSの読み込み
    - 定型文：`<link rel="stylesheet" href="CSSのファイル名">`
    - CSSを反映するにはHTMLの方で読み込む必要がある
## 全体のレイアウト
- webページのレイアウトは3つの要素で構成されている
    - ヘッダー：ページの上部メニュー
    - メイン：ページの主なコンテンツ
    - フッター：ページ下部のメニュー
- レイアウトは`<div>`要素で構成されている
    - ヘッダーの`<div>`要素
        - `<div class="header">`
        - `</div>`
    - メインの`<div>`要素
        - `<div class="main">`
        - `</div>`
    - フッターの`<div>`要素
        - `<div class="footer">`
        - `</div>`
## エディタの自動補完機能
- タグ名を入力し「Tab」キーを押すと終了タグまで自動で記述してくれる
    - 例：「div」と打つ→「Tab」キー→`<div></div>`が記述される


## ヘッダーの構造
- （HTML）ヘッダーの枠組みをロゴの<div>要素とリストの<div>要素で作成
    - 例
        -  `<div class="header">`
            -  `<div class="header-logo">Progate</div>`
            -  `<div class="header-list"> </div>`
        -  `</div>`
- （CSS）リスト要素はlist-styleプロパティを用いてnoneを指定することで先頭のマークを消す
    - 例 `li{list-style: none;}`
## ヘッダーの要素を横並びにする
- 要素を横並びにする場合はfloatプロパティを用いる
    - 例：リストを左から順に横並びにする場合
        - `li{float:left;}`
    - 例：ヘッダーのロゴとリストを横並びにする場合
        - `.header-logo{float:left;}`
## ヘッダーの余白
- 要素に余白を入れる場合はpaddingプロパティを用いる
    - 上下左右の全ての方向に同じ幅の余白を入れる場合
        - 全方向に20pxの余白：`{padding:20px;}`
    - 上下左右のそれぞれの方向に異なる幅の余白を入れる場合
        - 上だけ20px：`{padding-top:20px;}`
        - 下だけ20px：`{padding-bottom:20px;}`
        - 左だけ20px：`{padding-left:20px;}`
        - 右だけ20px：`{padding-right:20px;}`
- [省略形①]上下左右のそれぞれの方向に異なる幅の余白を入れる場合（上から時計回りに指定）
    - 上40px右30px下20px左10px：`{padding:40px 30px 20px 10px;}`
- [省略形②]上下左右のそれぞれの方向に異なる幅の余白を入れる場合（上下・左右で指定）
    - 上20px右10px下20px左10px：`{padding:20px 10px;}`


## フッターの構造
- フッターは基本的に`<div>`でロゴとリストで分けたHTML構造になっている

## 入れ子のセレクタ
- 入れ子の中にある任意の要素にCSSを反映させる時はclass名と要素名をセレクタにする
    - class名footer-listの`<div>`内にある`<li>`要素だけ右寄せにする
    - 例：`.footer-list li{float:right;}`


## `<span>`要素
- `<span>`要素とは
- HTMLの文中の一部にCSSを適用させたい場合にHTMLを`<span>`要素で囲んで`<span>`タグへCSSを指定する
- 例：h1タイトルの一部を赤色にしたい場合
    - HTML
        - `<h1>ようこそ<span>Hollo World</span>へ</h1>`
    - CSS
        - `span{color:red;}`
## ブロック要素とインライン要素
- ブロック要素：前後で改行が入り、親要素の幅いっぱいに広がる要素
    - 例：`<div>`要素、`<h1>`要素、`<p>`要素
- インライン要素：改行されない要素
    - 例：`<span>`要素、`<a>`要素
## ボーダー（枠線）
- ボーダーを着けたい場合はborderプロパティを用いて太さ・種類・色を指定します
- 定型分：`{border:太さ 種類 色;}`
- 特定の場所にのみ付けたい場合は「border-方向」を指定します
    - 上だけに付けたい場合：border-top
    - 下だけに付けたい場合：border-bottom
    - 右だけに付けたい場合：border-right
    - 左だけに付けたい場合：border-left


## ボックスモデル
- ボックスモデルはHTMLの全ての要素にborderがあり、要素と枠線の間の余白がpadding、枠線と外側の余白がmarginで構成されていると認識する概念


## paddingとmargin
- padding：HTMLの要素とborderの間の余白を作る
    - 例：全方位に10pxの余白を作りたい場合
        - `{padding:10px}`
- margin:borderと外側の余白を作る
    - 例：全方位に10pxの余白を作りたい場合
        - `{margin:10px;}`
## 上下左右の余白を細かく指定したい場合
- 上下左右の特定の余白だけ指定したい場合
    - 上だけ20px：`{padding(もしくはmargin)-top:20px;}`
    - 下だけ20px：`{padding(もしくはmargin)-bottom:20px;}`
    - 左だけ20px：`{padding(もしくはmargin)-left:20px;}`
    - 右だけ20px：`{padding(もしくはmargin)-right:20px;}`
- [省略形①]上下左右のそれぞれの方向に異なる幅の余白を入れる場合（上から時計回りに指定）
    - 上40px右30px下20px左10px：`{padding(もしくはmargin):40px 30px 20px 10px;}`
- [省略形②]上下左右のそれぞれの方向に異なる幅の余白を入れる場合（上下・左右で指定）
    - 上20px右10px下20px左10px：`{padding(もしくはmargin):20px 10px;}`


### 入力欄を作る要素
- input要素：入力された１行のテキストを受け取る要素
- textarea要素：入力された複数行のテキスト入力を受け取る要素

### 送信ボタンの作り方
- 送信ボタンはinput要素を用いて作る
    - type属性を指定して入力する内容の種類を選べる
        - submitを指定すると送信ボタンになる（テキストはデフォルトで「送信」になる）
            - 例：`<input type="submit">`
        - value属性を指定して表示されるテキストを変更できる
            - 例：`<input type="submit" value="送信">`

### 複数のセレクタに同じCSSを指定する方法
- 複数のセレクタに同じCSSを指定するには複数のセレクタをコンマ(,)で区切ることで同じCSSを適用できる
    - 例：`input,testarea{border:3px solid #ff0000}`