↑
HTML5
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>HTML5_Template</title>
<link rel="icon" href="favicon.ico">
<link rel="icon" href="favicon.svg" type="image/svg+xml">
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<p>
HTML5_Template
</p>
</body>
</html>
↑
link
同じタブで開く
<a href="Linked_URL">同じタブで開く</a>
新規タブで開く（内部向け）
<a href="Internal_Linked_URL" target="_blank">新規タブで開く（内部向け）</a>
新規タブで開く（外部向け）
<a href="External_Linked_URL" target="_blank" rel="noopener noreferrer">新規タブで開く（外部向け）</a>
↑
table
スタイルシート
<style>
table {
border-collapse: separate;
/*
border-collapse: collapse;
*/
}
table, th, td {
border: 1px blue solid;
}
</style>
HTML
<table>
<caption>caption</caption>
<tr><th>h-1</th><th>h-2</th></tr>
<tr><td>d-1</td><td>d-2</td></tr>
</table>
↑
list
<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>
入れ子（親リストの<li>タグ内に記述）
<ul>
<li>親リスト1
<ul>
<li>子リスト11</li>
<li>子リスト12</li>
<li>子リスト13</li>
</ul>
</li>
</ul>
番号付きリストは、「ul」→「ol」
↑
form
スタイルシート
<style>
label, input[type="checkbox"] {
cursor: pointer; /* ラベルとチェックボックスのマウスカーソルをポインタ（指マーク）に変更 */
}
textarea {
vertical-align: top; /* ラベルの名前を上寄せにする */
height: calc( 1.3em * 5 ); /* テキストエリアの高さを行数で指定する */
line-height: 1.3; /* 行高さを指定する */
}
</style>
HTML
<form action="sample.php" method="post">
<div>
<label for="name">名前</label>
<input type="text" id="name" name="name" placeholder="名前を入力" required autofocus>
</div>
<div>
<label for="color_checkbox1">
<input type="checkbox" id="color_checkbox1" name="colors[]" value="white">白
</label>
<label for="color_checkbox2">
<input type="checkbox" id="color_checkbox2" name="colors[]" value="black" checked>黒
</label>
<label for="color_checkbox3">
<input type="checkbox" id="color_checkbox3" name="colors[]" value="red">赤
</label>
</div>
<div>
<label for="pref">都道府県</label>
<select id="pref" name="pref">
<option value="01">北海道</option>
<option value="02" selected>青森県</option>
<option value="03">岩手県</option>
</select>
</div>
<div>
<label for="comment">コメント</label>
<textarea id="comment" name="comment" required></textarea>
</div>
<div>
<button type="submit">登録</button>
</div>
</form>
form 内の特定のボタンのみデータの送信先を変更する（formaction 属性）
<form action="sample.php" method="post">
-----
-----
-----
<button type="submit">登録</button>
<button type="submit" formaction="sample2.php">削除</button>
</form>
form 要素の外側にある送信ボタンを使う（form 属性）
<form action="sample.php" method="post" id="form1">
-----
-----
-----
</form>
<button type="submit" form="form1">送信</button>
↑
顔文字
(^^;
(^^ゞ
(T_T)
(>_<)
(^o^)v
(ーー;)
(^O^)／
m(_ _)m
(￣□￣；)
(+_+) 気絶中
(￣ー+￣)ｷﾗﾘ
φ(.. )メモメモ
(-。-)y-゜゜゜゜
(・o・)ゞ了解！
てへぺろ(・ω<)
バキッ！！☆／(x_x)
(o_ _)ﾉ彡☆ｷﾞｬﾊﾊ!! ﾊﾞﾝﾊﾞﾝ!
ｷﾀ━━━━(ﾟ∀ﾟ)━━━━ｯ!!
↑
特殊文字
| < | < |
| > | > |
| ' | ' |
| " | " |
| & | & |
| ¥ | ¥ |
| ♥ | ♥ |
| © | © |
| |
| ↵ | ↵ |
| ⏎ | ⏎ |
| ␣ | ␣ |
| ☀ | ☀ |
| ☪ | ☪ |
| ✉ | ✉ |
| ✔ | ✔ |
| 💢 | 💢 |
| ① | ① |
| ② | ② |
| ③ | ③ |
| ④ | ④ |
| ⑤ | ⑤ |
| ⑥ | ⑥ |
| ⑦ | ⑦ |
| ⑧ | ⑧ |
| ⑨ | ⑨ |
| ⑩ | ⑩ |
| ❶ | ❶ |
| ❷ | ❷ |
| ❸ | ❸ |
| ❹ | ❹ |
| ❺ | ❺ |
| ❻ | ❻ |
| ❼ | ❼ |
| ❽ | ❽ |
| ❾ | ❾ |
| ❿ | ❿ |
↑
例示専用のドメインと IP アドレス
- ドメイン
- トップレベルドメイン
- .example
- セカンドレベルドメイン
- example.com
- example.net
- example.org
- トップレベルドメイン
- IP アドレス
- IPv4
- 192.0.2.0/24
- 198.51.100.0/24
- 203.0.113.0/24
- IPv6
- 2001:db8::/32
- IPv4
↑
コメントアウト
<!--
コメントアウト
-->
↑
- guitar site WAVE -