2月17日（金）－HTML基礎④テーブルタグ/フォームタグ/特殊文字

テーブルタグについて

【要参考】テーブルを活用しましょう | HTML-CSS 入門講座 | 情報デザイン工房 濱屋　※L2より「L7.1 テーブルを活用しましょう」以下が分かりやすいとのこと

「TABLE」とは<tr>、<th>、<td>などと組み合わせて表を作成するためのタグです。表の基本的な構造は<table>～</table>の中に<tr>～</tr>で表の横部分を指定し、その中に<th>～</th>や<td>～</td>で表題や縦軸を指定してセルを定義します。この時ヘッダセルのテキストは、一般的なブラウザでは太字になりセンタリングされます。
<table>はしばし、レイアウトのために使用されることがあります。しかし本来の使用方法ではありませんので、レイアウトで同様の効果が欲しい場合はスタイルシートを利用するとよいでしょう。

table/caption/tr/th/td 要素（テーブル）

<table>
　　<caption>キャプション</caption>
　　<tr><th>見出し</th><th>見出し</th></tr>
　　<tr><td>データ</td><td>データ</td></tr>
　　<tr><td>データ</td><td>データ</td></tr>
</table>

テーブル構造の表示を指定します。
テーブルのデザイン（幅、高さ、色、文字飾りなど）は CSS で指定します。

・tableタグ：テーブルの範囲を指定します。
・captionタグ：表のキャプション（主題）を指定します。
・trタグ：1行の範囲を指定します。
・thタグ：見出し項目を指定します。
・tdタグ：データ項目を指定します。

楽天やヤフーショッピングの商品ページでテーブルレイアウトが必要になる場合があります。EC関連のお仕事をする場合は、想定しておきましょう。

【参考サイト】

• HTML tableタグを初心者向けに解説&便利な知識5選 | Udemy …
• ホームページのレイアウトはテーブルではなくCSSを使う理由 …
• 【HTML table】表を作成する基本からレイアウトの方法までを解説

フォームタグについて

【要参考】
★（わかりやすい→）【初心者向け】0からformがわかる｜HTMLでのフォーム作成｜webliker（ウェブライカー）
・HTML での記述を始めましょう | HTML-CSS 入門講座 | 情報デザイン工房 濱屋　※「L2.10 フォームタグ」以下

form 要素（フォーム）

<form action=”URL” name=”フォームの名前”
　　method=”転送方法” enctype=”データ型式”>
　　フォーム要素（部品）
</form>

入力フォームの作成を指定します。フォーム要素にフォームを構成するフォーム要素（部品）を配置します。

・action属性：送信先の URL を指定します。
・name属性：フォームの名前を指定します。
・method属性：送信データの転送方法（HTTP メソッド）を指定します。
　get（初期値）を指定すると URL の型式で転送します。
　post を指定すると本文にデータを配置して転送します。
・enctype属性：送信データの型式（MIME タイプ）を指定します。
　application/x-www-form-urlencoded（初期値）を指定すると URL エンコード型式になります。
　multipart/form-data を指定するとマルチパート型式になります。
　text/plain を指定するとプレーンテキスト型式になります。

label 要素（ラベル）

<label form=”form 要素” for=”部品要素”>
　　ラベル要素
</label>

入力フォームのフォーム部品とラベルを関連付けます。一般的には、関連付けを行うことでラベルをクリックしてもフォーム部品をクリックしたのと同じ効果を出すことができます。

・form属性：form 要素との関連付けを行います。
　form 属性の値と form 要素の id 属性の値を一致させることで離れた場所に配置した form 要素のフォーム部品と関連付けを行うことができます。
・for属性：フォーム部品との関連付けを行います。
　for 属性の値とフォーム部品の id 属性の値を一致させることでフォーム部品との関連付けを行うことができます。

input 要素（インプット）

<input type=”形状” name=”名前” form=”form 要素”
　　value=”初期値” size=”幅”
　　maxlength=”最大文字数” minlength=”最小文字数”
　　placeholder=”凡例”
　　checked disabled readonly required>

テキスト入力欄やボタンなどのフォーム部品を作成します。本要素には、終了タグがありません。

◆type属性：作成するフォーム部品の形状を指定します。
　hidden：画面上には表示されない隠しデータを作成します。
　text：1行のテキストボックスを作成します。（初期値）
　search：検索テキストの入力欄を作成します。
　tel：電話番号の入力欄を作成します。
　url：URL の入力欄を作成します。
　email：メールアドレスの入力欄を作成します。
　password：パスワードの入力欄を作成します。
　datetime：UTC の日時の入力欄を作成します。
　date：日付の入力欄を作成します。
　month：月の入力欄を作成します。
　week：週の入力欄を作成します。
　time：時刻の入力欄を作成します。
　datetime-local：UTC によらないローカル日時の入力欄を作成します。
　number：数値の入力欄を作成します。
　range：レンジの入力欄を作成します。
　color：色の入力欄を作成します。
　checkbox：チェックボックスを作成します。
　※チェックボックス：複数選択肢から複数選択できるボックス
　radio：ラジオボタンを作成します。
　※ラジオボタン：複数選択肢から1つのみ選ぶボタン
　file：サーバーへファイルを送信します。
　submit：送信ボタンを作成します。
　image：画像ボタンを作成します。
　　src 属性を使用して表示する画像ファイルを指定、alt 属性を使用して代替テキストを指定、width 属性と height 属性を使用して画像の大きさを指定します。
　reset：リセットボタンを作成します。
　button：汎用ボタンを作成します。
◆name属性：フォーム部品の名前を指定します。ここで指定された名前は、フォームと一緒に送信されます。
◆form属性：form 要素との関連付けを行います。form 属性の値と form 要素の id 属性の値を一致させることで離れた場所に配置した form 要素のフォーム部品と関連付けを行うことができます。
◆value属性：フォーム部品が保有する値の初期値を指定します。値の現在値は、名前と一緒に送信されます。
◆size属性：コントロールの大きさ（文字数）を指定します。
◆maxlength属性：value 属性が保有する値の最大長（文字数）を指定します。
◆minlength属性value 属性が保有する値の最小長（文字数）を指定します。
◆placeholder属性何を入力するかの助言を指定します。
◆checked属性：チェックボックスやラジオボタンがチェック状態であることを指定します。
◆disabled属性コントロールが無効であることを指定します。
◆readonly属性：値の修正ができないことを指定します。
◆required属性：フォームが送信するための必須項目であることを指定します。

textarea 要素（テキストエリア）

<textarea name=”名前” form=”form 要素”
　　cols=”幅” rows=”行数” maxlength=”最大文字数”
　　minlength=”最小文字数” placeholder=”助言”
　　disabled readonly required>初期値</textarea>

複数行のテキスト入力ボックスを作成します。本要素には、終了タグがありません。

・name属性：フォーム部品の名前を指定します。ここで指定された名前は、フォームと一緒に送信されます。
・form属性：form 要素との関連付けを行います。form 属性の値と form 要素の id 属性の値を一致させることで離れた場所に配置した form 要素のフォーム部品と関連付けを行うことができます。
・cols属性：コントロールの横幅（文字数）を指定します。省略時は、20 です。
・rows属性：コントロールの行数を指定します。
・maxlength属性：入力可能な最大文字数を指定します。省略すると無制限に入力することができます。
・minlength属性：入力しなければいけない最小文字数を指定します。
・placeholder属性：何を入力するかの助言を指定します。
・disabled属性：コントロールが無効であることを指定します。
・readonly属性：値の修正ができないことを指定します。
・required属性：フォームが送信するための必須項目であることを指定します。

select/option 要素（セレクト／オプション）

<select name=”名前” form=”form 要素” multiple
　　size=”行数” disabled required>
　　<option value=”値” disabled selected>選択肢</option>
　　<option value=”値” disabled selected>選択肢</option>
　　<option value=”値” disabled selected>選択肢</option>
</select>

select 要素は、option 要素で指定されたリストからの選択ボックスを作成します。

・name属性：フォーム部品の名前を指定します。ここで指定された名前は、フォームと一緒に送信されます。
・form属性：form 要素との関連付けを行います。form 属性の値と form 要素の id 属性の値を一致させることで離れた場所に配置した form 要素のフォーム部品と関連付けを行うことができます。
・multiple属性：複数の選択肢を選択できることを指定します。省略時は、選択できる選択肢は、1つです。
・disabled属性：コントロールが無効であることを指定します。
・required属性：フォームが送信するための必須項目であることを指定します。

option 要素は、select 要素の選択肢を作成します。
・value属性：フォームで送信する値を指定します。省略すると option 要素の中の文字列が使用されます。
・disabled属性コントロールが無効であることを指定します。
・selected属性：初期状態で選択状態にすることを指定します。

button 要素（ボタン）

<button type=”型式” name=”名前” form=”form 要素”
　　disabled>ボタン内容</button>

ボタンを作成します。

◆type属性：作成するボタンのタイプを指定します。
　submit：送信ボタンを作成します。（初期値）
　reset：リセットボタンを作成します。
　button：汎用ボタンを作成します。
◆name属性：フォーム部品の名前を指定します。ここで指定された名前は、フォームと一緒に送信されます。
◆form属性：form 要素との関連付けを行います。form 属性の値と form 要素の id 属性の値を一致させることで離れた場所に配置した form 要素のフォーム部品と関連付けを行うことができます。
◆disabled属性：コントロールが無効であることを指定します。

fieldset/legend 要素（フィールドセット／レジェンド）

<fieldset name=”名前” form=”form 要素” disabled>
　　<legend>キャプション<legend>
　　フォーム要素（部品）
</fieldset>

fieldset 要素は、フォーム要素をグループ化します。

・name属性：フォーム部品の名前を指定します。ここで指定された名前は、フォームと一緒に送信されます。
・form属性：form 要素との関連付けを行います。form 属性の値と form 要素の id 属性の値を一致させることで離れた場所に配置した form 要素のフォーム部品と関連付けを行うことができます。
・disabled属性：コントロールが無効であることを指定します。

legend 要素は、グループ化した要素群のキャプションを指定します。

CSSとの紐付けについて

【要参考】HTML での記述を始めましょう | HTML-CSS 入門講座 | 情報デザイン工房 濱屋　※「L2.11.1 CSS との紐付け」以下が分かりやすい

HTMLのタグとCSSの紐付けを行うためにid属性とclass属性が使用されます。

(1) id 属性

<要素名 id=”id 名”>コンテンツ</要素名>

要素に対して id 名を付与します。1 つの Web ページ内では1箇所にしか同一の名前を付けれません。CSS などで id 名を参照する時は、先頭に「ハッシュ（#）」を付与します。id 名は、a タグ（アンカータグ）のリンク先として使用することもできます。
・id属性は1箇所のみのルールなので、通常はclass属性で全体範囲指定だけど、この1箇所だけ指定したい場合に使用する。ページ内リンクなどにも使用できる。

【使用例】
<p id=”text1″>サンプルテキスト</p>

(2) class 属性

<要素名 class=”class 名”>コンテンツ</要素名>

要素に対して class 名を付与します。複数の箇所に同一の名前を付けれます。class 名には複数の名前をスペースで区切って指定することができます。CSS などで class 名を使用する時は、先頭にピリオド（.）を付与します。
・通常はclass属性で全体範囲指定して、このclass属性（同じ名前）にはこのCSSを紐づけるなどが一括で設定できる。

【使用例】
<p class=”size1 color1″>サンプルテキスト</p>

【参考サイト】

• 【HTML/CSS】３分でわかるid/class属性の違い
• idとclassをわかりやすく説明！
• 【必修知識】id と class の違いと使い分け方の基本

特殊文字について

【要参考】HTML での記述を始めましょう | HTML-CSS 入門講座 | 情報デザイン工房 濱屋　※「L2.11.1 CSS との紐付け」以下が分かりやすい

HTMLのコードを記述する時に特別な書き方をする必要のある文字があります。
「特殊文字変換ツール」にコードをコピペすると、特殊文字変換できるので楽。

HTML のコードを記述する時に特別な書き方をする必要のある特殊文字で主要なものは以下の通りです。
（他にもたくさんあるけど、無理して使用しなくてOK。ひとまずこの7つを覚えて使うようにする。）

文字	名称記述	名称
“	"	ダブルクォーテーション
&	&	アンパサンド
<	&lt;	小なり
>	&gt;	大なり
（スペース）	&nbsp;	ノーブレークスペース
©	&copy;	著作権記号(コピーライト)
®	&reg;	登録商標

【参考サイト】

• HTMLの特殊文字とは？変換方法と特殊文字一覧も紹介
• HTMLで特殊文字を扱う方法
• HTMLの記号・特殊文字の文字コード表