忘れがちなHTML5

# ■ ドキュメントタイプ宣言
~~~html
<!DOCTYPE html>
~~~

# ■ 言語指定 : lang
~~~html:日本語指定
<html lang="ja">
~~~

~~~html:英語指定
<html lang="en">
~~~

# ■ HEADタグ
## ヘッダ情報 : head
~~~html
<head>
  <!--head情報-->
</head>
~~~

## 文字エンコード指定 : meta charset
~~~html
<meta charset="UTF-8">
~~~
~~~html
<meta charset="Shift_JIS">
~~~

## タイトル指定 : title
~~~html
<title>Titl Name</title>
~~~

## スタイル指定 : style
~~~html
<style type="text/css">
  h1 {
    color: #ffffee;
    font-size: 70px;
    font-family: lobster;
    text-align: center;
  }
</style>
~~~

# ■ 見出し : h
~~~html
<h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>
<h4>見出し4</h4>
<h5>見出し5</h5>
<h6>見出し6</h6>
~~~
<h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>
<h4>見出し4</h4>
<h5>見出し5</h5>
<h6>見出し6</h6>

# ■ セクション
## 文書本体 : body
~~~html
<body>
  <!--文書本体を記述-->
</body>
~~~

## 記事 : article
~~~html
<article>
  <!--記事を記述-->
</article>
~~~

## セクション : section
~~~html
<section>
  <!--汎用的なセクションを記述-->
</section>
~~~

## ナビゲーション : navi
~~~html
<navi>
  <!--リンクを記述-->
</navi>
~~~

## 補足 : aside
~~~html
<aside>
  <!--補足を記述-->
</aside>
~~~

# ■ テキスト表示
## 区切り : hr
~~~html
<hr>
~~~
<hr>
## 改行 : br
~~~html
<br>
~~~

## Bold : b
~~~html
<b>Bold</b>
~~~
<b>Bold</b>

## Italic : i
~~~html
<i>Italic</i>
~~~
<i>Italic</i>

## 上付き・下付き : sup/sub
~~~html
上付き<sup>上付き</sup>
下付き<sub>下付き</sub>
~~~
上付き<sup>上付き</sup>
下付き<sub>下付き</sub>

## 削除 : del
~~~html
<del>削除</del>
~~~
<del>削除</del>

## 下線 : ins
~~~html
<ins>下線</ins>
~~~
<ins>下線</ins>

## コード : code
~~~html
<code>a = 0;</code>
~~~
<code>a = 0;</code>

## 整形済みテキスト表示 : pre
~~~html
<pre>整形済み
テキスト
</pre>
~~~
<pre>整形済み
テキスト
</pre>

## ハイライト表示 : mark
~~~html
<mark>ハイライト表示</mark>
~~~
<mark>ハイライト表示</mark>
ハイライト表示

# ■ TABLEタグ
## 表作成 : table
~~~html
<table>
  <!--tr, th, tdを記述-->
</table>
~~~

## 境界線表示 : border
~~~html
<table border="">
</table>
~~~

## 表タイトル : caption
~~~html
<table>
  <caption>fifa rank</caption>
</table>
~~~

## グループ化 : colgroup
~~~html
<table>
  <colgroup span="1" style="width:20px; background-color:#E0F8E6;">
  <colgroup span="3" style="width:100px; background-color:#E0F8E6;">
</table>
~~~

## 行定義 : tr
~~~html
<table>
  <tr>
    <!--th, tdを記述-->
  </tr>
</table>
~~~

## 見出し定義 : th
~~~html
<table>
  <tr>
    <th>national</th>
    <th>rank</th>
  </tr>
</table>
~~~

## データ定義 : td
~~~html
<table>
  <tr>
    <th>#</th>
    <th>national</th>
    <th>rank</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Japan</td>
    <td>44th</td>
  </tr>
</table>
~~~

## 縦方向セル結合 : rowspan
~~~html
<table>
  <tr>
    <th>#</th>
    <th>area</th>
    <th>national</th>
    <th>fifa rank</th>
  </tr>
  <tr>
    <td>1</td>
    <td rowspan="2">asia</td>
    <td>Japan</td>
    <td>44th</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Iran</td>
    <td>34th</td>
  </tr>
</table>
~~~

## 横方向セル結合 : colspan
~~~html
<table>
  <tr>
    <th>#</th>
    <th colspan="2">national</th>
    <th>fifa rank</th>
  </tr>
  <tr>
    <td>1</td>
    <td>asia</td>
    <td>Japan</td>
    <td>44th</td>
  </tr>
</table>
~~~

# ■ リスト
## 番号なしリスト : ul
~~~html
<ul>
  <li>Japan</li>
  <li>Australia</li>
  <li>Iran</li>
</ul>
~~~
<ul>
  <li>Japan</li>
  <li>Australia</li>
  <li>Iran</li>
</ul>

## 番号付きリスト : ol
~~~html
<ol>
  <li>Japan</li>
  <li>Australia</li>
  <li>Iran</li>
</ol>
~~~
<ol>
  <li>Japan</li>
  <li>Australia</li>
  <li>Iran</li>
</ol>

## アルファベット付きリスト : ol
~~~html
<ol type="a">
  <li>Japan</li>
  <li>Australia</li>
  <li>Iran</li>
</ol>
~~~

# ■ フォーム
## フォーム作成 : form
~~~html
<form action="test.php" method="POST">
  <!--フォーム部品の定義-->
</form>
~~~


## 部品作成 : input
~~~html
<input type="フォーム部品名" value="値">
<input type="image" src="test.png">
~~~

|フォーム部品||
|:---:|:---:|
|text|テキストボックス|
|password|パスワード入力欄|
|button|ボタン|
|radio|ラジオボタン|
|checkbox|チェックボックス|
|submit|送信ボタン|
|image|画像ボタン|

## 部品作成 : select
~~~html:リストボックス
<select name="test">
  <option value="val1" selected>test1</option>
  <option value="val2">test2</option>
</select>
~~~

# ■ コメント
~~~html
<!--コメント-->
~~~

# ■ インラインスタイルシート
~~~html
<h1 style="color: #00eeee; font-size: 50px; font-family: lobster; text-align: center; background-color: red;">FIFA RANK</h1>
~~~

# ■ スタイルシートクラス指定
~~~html
<head>
<meta charset="utf-8">
<style>
.fifa {color: #00eeee; font-size: 50px; font-family: lobster; text-align: center; background-color: red;}
</style>
</head>
<h1 class="fifa">FIFA RANK</h1>
~~~

# ■ フォント(CSS)
## フォント指定 : font-family
~~~html
h1 {
  font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}
~~~

## 文字サイズ : font-size
~~~html
h1 {
  font-size: 16px;
}
~~~

## 文字の太さ : font-weight
~~~html
h1 {
  font-weight: normal;
}
~~~
```normal``` ：標準
```bold```   ：太字

## 斜体 : font-style
~~~html
h1 {
  font-style ： italic;
}
~~~

## 文字の色指定 ：color
~~~html
h1 {
  font-style ： red;
}
~~~

# ■ テキスト(CSS)
## 表示位置 ：text-align
~~~html
h1 {
  text-align: center;
}
~~~
```center``` ：中央揃え
```left``` ：左寄せ
```right``` ：右寄せ

## 下線 ：text-decoration
~~~html
h1 {
  text-decoration: underline;
}
~~~

# ■ 背景(CSS)
## 背景色 ：background-color
~~~html
h1 {
  background-color: red;
}
~~~

# ■ テーブル(CSS)
## 枠線 ：border-collapse
~~~html
table {
  border-collapse: collapse;
}
~~~
```collapse``` ：隣接する
```separate``` ：セルごとに分離

## 幅 ：width
~~~html
table {
  width: 100px;
}
~~~

# ■ リスト(CSS)
## リストマーカー種別 ：list-style-type
~~~html
ul {
  list-style-type: disc;
}
~~~
```disc``` ：中黒
```circle``` ：円
```square``` ：四角
```decimal``` ：連番
```lower-roman``` ：ローマ数字(小文字)
```upper-roman``` ：ローマ数字(大文字)