div（グループ化する）
div（ディブ）タグは複数のタグを1つにまとめてグループ化できることです。異なるタグをまとめるのに便利なタグとなっています。
<body>
<div class=”group1″>
<h3>グループ1</h3>
<p>グループ1</p>
</div>
<div class=”group2″>
<h3>グループ2</h3>
<p>グループ2</p>
</div>
<div class=”group3″>
<h3>グループ3</h3>
<p>グループ3</p>
</div>
</body>
.group1{
background-color: aqua;
}
.group2{
background-color: chartreuse;
margin: 50px;
}
.group3{
background-color: darkorange;
margin: 100px;
}
table、tr、th、tdタグ（表を作成）
table（テーブル）タグとはtr（table row テーブルロウ)横方向の行を作る、th（table headline テーブルヘッドライン)見出しを作る、td（table data テーブルデータ)項目を作るタグなどを組み合わせて表を作るためのタグです。
<body>
<table border=”1″>
<tr>
<th>特徴</th>
<th>プロパティ</th>
</tr>
<tr>
<td>字が中央</td>
<td>text-algan</td>
</tr>
<tr>
<td>背景が緑</td>
<td>background-color</td>
</tr>
</table>
</body>
tableタグ内にboder=”1″を入れることで表内に線を引くことができます。
select、optionタグ（メニューを作成）
select（セレクト）タグはプルダウンメニューを作成するタグとなっておりタグ内にoption（オプション）タグを入れることで選択肢が追加できます。
<body>
<h3>好きな色</h3>
<select name=”color” id=”#”>
<option value=”red”>赤</option>
<option value=”blue”>青</option>
<option value=”yellow”>黄色</option>
<option value=”white”>白</option>
<option value=”black”>黒</option>
</select>
</body>
inputタグ(ボタン)
input(インプット)タグは
| 属性 | 効果 |
| button | ボタン |
| checkbox | チェックボックス |
| color | カラーパレット |
| datetime-local | カレンダー(年（西暦）/月/日 時:分) |
| date | カレンダー(/月/日のみ) |
| メール | |
| text | テキスト |
<body>
<p>ボタン</p>
<input type=”button”>ボタン
<p>チェックボックス</p>
<input type=”checkbox”>
<p>カラーパレット</p>
<input type=”color”>
<p>カレンダー(年（西暦）/月/日 時:分)</p>
<input type=”datetime-local”>
<p>カレンダー(年/月/日のみ)</p>
<input type=”date”>
<p>メール</p>
<input type=”email”>
<p>テキスト</p>
<input type=”text”>
</body>
label（ラベルを張る）
label（ラベル）タグとはフォームの中で項目と構成部品（inputタグやtextareaタグなど）を関連つけるタグです。
<body>
<label for=”text”>text</label>
<input id=”text” type=”text”>
</body>
for属性は裏で関連付けるための名前みたいなもので
関連つけるタグにid属性を入れfor属性でつけた名前を入れることでできます。
textの部分をクリックしてもtextの記入欄をクリックしたことになります。
textarea(テキスト記入欄)
textarea(テキストエリア)タグは複数行の記入欄を作成することができます。
<body>
<p>textarea</p>
<textarea cols=”40″ rows=”10″ placeholder=”ここに記入して下さい”></textarea>
</body>
textareaタグには属性が複数つけることが可能です。それぞれ属性にも意味があるので一部ご紹介します。
| 属性 | 意味 |
| name | フォームが送信されたときにデータポイントに関連つけられた名前を設定できる |
| id | labelタグの名前を入れることで紐付けできる |
| rows | 記入欄の縦幅を指定できる |
| cols | 記入欄の横幅を指定できる |
| placeholder | 助言や指示を書く、記入欄に文字を入力すると消える裏文字的なもの |
button（ボタン）
button(ボタン)タグは、ボタンを作成するために使います。
フォームの「送信」や「リセット」のボタンを設置するためによく使われます。その他に「クリックしたらJavaScriptで何らかの処理を行いたい」という場合にもよく使われます。type属性があり属性によって使う用途が変わってきます。
| 属性 | 用途 |
| button | 自分で操作するボタン |
| submit | 送信するボタン |
| reset | リセットするボタン |
<body>
<p>ボタン</p>
<button>ボタン</button>
<p>submit</p>
<button type=”submit”>submit</button>
<p>reset</p>
<button type=”reset”>reset</button>
</body>
コメント