記事概要
HTMLのbody要素について、まとめる。
まとめ(body要素)
header要素
Webページ最上部のヘッダー専用のブロックレベル要素
※head要素とは異なる
main要素
主要なコンテンツを記載する要素
footer要素
Webページ最下部のフッター専用のブロックレベル要素
h1 ~ h6要素(見出し要素)
文章の見出しを作る要素
<h1>見出し1</h1>
<h2>見出し2</h2>
p要素
文章の段落を表す要素
<p>段落</p>
br要素
テキストを改行するための要素
文章はここで<br>改行される
b要素
文字を太くする要素
文章は<b>ここが太字</b>になる
a要素
- テキストをリンクにする要素
- クリックすると特定のページに移動する
href属性
リンクの移動先を指定する属性
<a href="https://www.google.com/">クリックすると、Googleへ移動</a>
サンプルコードのhtml/index_a.htmlを参照
span要素
- テキストの一部だけを装飾するために使用される要素
- 部分的にテキストの装飾を変更するために使用する
文章の一部のみ<span>装飾する</span>ことができる
div要素
- 特定の意味が無い要素
- 汎用的に様々な用途で使うことができる
- レイアウトを作成する際に重宝される
ul要素
順序のないリストを示すブロックレベル要素
li要素
- リストの項目を示すブロックレベル要素
- ul要素の子要素として記述する
<div>
リスト
<ul>
<li>アイテム1</li>
<li>アイテム2</li>
<li>アイテム3</li>
</ul>
</div>
サンプルコードのhtml/index_ul_li.htmlを参照
img要素
Webサイト上に画像を表示することができる要素
src属性
画像の場所を指定する属性
alt属性
画像が表示されなかった場合に代替テキストなどを表示するための属性
<img src="images/sample-1.jpg" alt="サンプル画像です">
サンプルコードのhtml/index_img.htmlを参照
form要素
- フォーム関連要素の集まりを表すブロック要素
-
<form></form>のなかに、入力フォームや送信フォームを作成
action属性
リクエスト先のURLを指定する属性
<!-- ローカルサーバーで起動しているアプリケーションの場合、「localhost:3000/items」へ、フォームに記載した内容がリクエストとして送信される -->
<form action="/items" method="post">
</form>
method属性
リクエストに使用されるHTTPメソッドを指定する属性
<!-- フォームに記載した内容を送信する際のHTTPメソッドとして、データを送信する際に使用するPOSTを指定している -->
<form action="/items" method="post">
</form>
input要素
フォームの入力欄や実行ボタンなどを作成することができるインライン要素
type属性
様々な種類のフォーム部品を作り出せる属性
| type属性 | 装飾結果 |
|---|---|
| text | １行のテキスト入力欄を作成します |
| checkbox | チェックボックスを複数作成することができます |
| radio | 複数の中から１つしか選択できない、ラジオボタンを作ります |
| submit | 送信ボタンを作ります |
| hidden | 画面上には表示されないinput要素を作成できる |
※<input name="room[user_ids][]" type="hidden" value=<%= current_user.id %>>とすると、画面上に項目が表示されない
placeholder属性
入力フォームに仮の文字列を入れることができる属性
value属性
- フォームの送信時に、どのような値を送信するのかを決めることができる
- 送信ボタンの場合、value属性で指定した文字が、送信ボタンに表示される
name属性
- フォームに入力して送信するデータの名前を設定する
- サーバーとのやり取りに関係するものである
サンプルコードのhtml/index_form.htmlを参照
textarea要素
複数行のテキスト入力欄を作成するインライン要素
label要素
フォームの項目名とフォームの入力要素（画像選択フォーム、プルダウン、チェックボックスなど）を関連付けるための要素
<!-- for属性を用いて関連づける方法 -->
<label for='address'>住所</label>
<input type="text" id="address">
<!-- labelタグで入力欄のタグを囲む方法 -->
<label>住所
<input type="text">
</label>
label要素がクリックされたときに、子要素もクリックされたことにしてくれるため、見えないはずのボタンをクリックしたかのように動作させることができる
サンプルコードのhtml/index_form-label.htmlを参照
select要素
プルダウンのようなセレクトボックスを作成するための要素
name属性
任意の値を指定することで、paramsを通して、その値をコントローラーへ渡すことができる
<!-- キーに対して、値を格納する -->
<select name ="room"></select>
=> {"room" => "値"}
=> {"room" => "1"}
<!-- キーに対する値として、ハッシュを入れ子にすることを示す -->
<select name ="room[user_ids]"></select>
=> {"room" => {"user_ids" => "値"}}
=> {"room" => {"user_ids" => "1"}}
<!-- キーに対する値を、配列として格納することを示す -->
<!-- 1つのキーに対して、複数の値を受け取ることができる -->
<select name ="room[user_ids][]"></select>
=> {"room" => {"user_ids" => ["値"]}}
=> {"room" => {"user_ids" => ["1", "2"]}}
option要素
select要素の中に記述することで、プルダウンの選択肢になる要素
<select name="fruit">
<option value="">好きなフルーツを選択してください</option>
<option>りんご</option>
<option>オレンジ</option>
<option>ぶどう</option>
</select>
value属性
フォームの送信時に、どのような値を送信するのかを決めることができる
<form>
<select name="room[user_ids]">
<option value="">チャットするユーザーを選択してください</option>
<option value="2">User2</option>
<option value="3">User3</option>
</select>
<input type="submit" value="送信" class="form">
</form>
=> User2を選択した場合、「{"room"=>{"user_ids"=>"2"}}」
複数の値を連携
<form>
<div>
<select name="room[user_ids][]">
<option value="">チャットするユーザーを選択してください</option>
<option value="2">User2</option>
<option value="3">User3</option>
</select>
<!-- 画面上非表示だが、値を連携する -->
<input name="room[user_ids][]" type="hidden" value="1">
</div>
<input type="submit" value="送信" class="form">
</form>
=> User2を選択した場合、「{"room"=>{"user_ids"=>["2", "1"]}}」
em要素
文字を強調する
<p>通常の文字<em>強調される</em></p>
まとめ(機能)
カスタムデータ
HTMLに対して任意の属性を持たせられる機能のこと
data-<情報>として、属性値に文字列で情報を与えることができる
<div class="sample" data-id = "1">
</div>
HTMLの属性は、スタイルなどのために使用することがほとんどだが、JavaScriptを併用する際には、表示されているデータのid情報などを持たせたい場合がある
そのような場合には、カスタムデータで任意の情報を付与すると便利