<!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>
同じタブで開く
<a href="Linked_URL">Same_Tab</a>
新規タブで開く（内部向け）
<a href="Internal_Linked_URL" target="_blank">Internal_New_Tab</a>
新規タブで開く（外部向け）
<a href="External_Linked_URL" target="_blank" rel="noopener noreferrer">External_New_Tab</a>
スタイルシート
<style> table { border-collapse: separate; /* Default */ /* border-collapse: collapse; */ border: 2px solid #000000; } table th { border: 1px solid #ff0000; padding: 8px 10px; color: #50eaff; background-color: #fff5e5; } table td { border: 1px solid #000000; padding: 3px 10px; color: #666666; background-color: #ffffff; text-align: left; } </style>
HTML
<table> <caption>Caption</caption> <tr> <th>H_1</th> <th>H_2</th> <th>H_3</th> </tr> <tr> <td>D_12</td> <td>D_22</td> <td>D_32</td> </tr> <tr> <td>D_13</td> <td>D_23</td> <td>D_33</td> </tr> </table>
<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」
スタイルシート
<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_ _)ﾉ彡☆ｷﾞｬﾊﾊ!! ﾊﾞﾝﾊﾞﾝ!
ｷﾀ━━━━(ﾟ∀ﾟ)━━━━ｯ!!
| < | < |
| > | > |
| ' | ' |
| " | " |
| & | & |
| ¥ | ¥ |
| ♥ | ♥ |
| © | © |
| |
| ↵ | ↵ |
| ⏎ | ⏎ |
| ␣ | ␣ |
| ☀ | ☀ |
| ☪ | ☪ |
| ✉ | ✉ |
| ✔ | ✔ |
| 💢 | 💢 |
| ① | ① |
| ② | ② |
| ③ | ③ |
| ④ | ④ |
| ⑤ | ⑤ |
| ⑥ | ⑥ |
| ⑦ | ⑦ |
| ⑧ | ⑧ |
| ⑨ | ⑨ |
| ⑩ | ⑩ |
| ❶ | ❶ |
| ❷ | ❷ |
| ❸ | ❸ |
| ❹ | ❹ |
| ❺ | ❺ |
| ❻ | ❻ |
| ❼ | ❼ |
| ❽ | ❽ |
| ❾ | ❾ |
| ❿ | ❿ |
- ドメイン
- トップレベルドメイン
- .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
<!-- コメントアウト -->