HTML基礎③

テキスト分類タグ

1.a要素（ハイパーリンク）

<a href="リンク先情報">ハイパーリンク定義情報</a>

ハイパーリンクの定義指定→外部サイトにリンクする場合、「target=”blank”」で新規タブで開く
※「詳細はこちら」などにリンクはNG、飛ぶページが何のページかを表さないといけない
※「target=”blank”」+「rel=”noopener noreferrer”」セットで使う

〇ハイパーリンク：特定の場所に飛ぶリンク

2.em要素（強調）

<em>強調定義情報</em>

強調する（アクセントをつける）範囲指定

3.strong要素（強い重要性）

<storong>強い重要性定義情報</storong>

4.small要素（免責・警告・著作権）

<small>免責・警告・著作権定義情報</small>

5.i要素（声や心の中で思ったこと）

<i>声や心の中で思ったことの定義情報</i>

6.b要素（キーワードや商品名）

<b>キーワードや商品名の定義情報</b>

7.span要素（ひとつの範囲）

<span>ひとつの範囲の定義情報</span>

〇div：ブロックレベルの区切り
〇span：インライン要素（ブロックの中で使える）

8.br要素（改行）

<p>
  <br>改行
  <br>改行
</p>

改行指定のタグ、本要素には終了タグがない

9.表示サンプル

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML テキストサンプル</title>
    <style>
      body {
        margin: 0;
      }
      .container {
        border: #ccc 1px solid;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <a href="#">ハイパーリンク定義情報</a>
      <em>強調定義情報</em>
      <strong>強い重要性定義情報</strong>
      <small>免責・警告・著作権など定義情報</small>
      <i>声や心の中で思ったこと定義情報</i>
      <b>キーワードや商品名など定義情報</b>
      <span>ひとつの範囲定義情報</span>
      <hr>
      <a href="#">ハイパーリンク定義情報</a><br>
      <em>強調定義情報</em><br>
      <strong>強い重要性定義情報</strong><br>
      <small>免責・警告・著作権など定義情報</small><br>
      <i>声や心の中で思ったこと定義情報</i><br>
      <b>キーワードや商品名など定義情報</b><br>
      <span>ひとつの範囲定義情報</span><br>
    </div>
  </body>
</html>

1～8すべての要素は部品（インライン要素）なので<p></p>の中に入れる

コンテンツ/埋め込みタグ

1.img（画像）

<img src="画像パス名" width="画像の幅" height="画像の高さ" alt="代替テキスト">

画像の埋め込み表示を指定、終了タグはない

〇alt：画像が表示できな時に代わりに表示するテキスト、必須項目
〇width:画像の幅
〇height：画像の高さ

・width、heightにpxはなし、CSSで指定する場合はautoと入力する
・インラインブロック要素なので<div>等で囲うとよい

2. iframe 要素（インラインフレーム）

<iframe src="フレーム内に表示するURL" width="フレームの幅" height="フレームの高さ" title="補足情報">フレーム非表示メッセージ</iframe>

〇インラインフレーム内に「フレーム内で表示するURL」で指定したURLの内容を表示
〇フレームの幅と高さは作成するフレームの大きさを指定（初期値は300×150）

補足：画像サイズは最適化してからUPする（重くなるので）

画像を相対パスでリンクする

①同じフォルダ内のファイルを参照

<a href="ファイル名"></a>

②同じファイル内にあるフォルダから参照

<a href="フォルダ名/ファイル名"></a>

③一つ上の階層にあるファイルを参照

<a href="../ファイル名"></a>

④一つ上の階層を経由して別の階層のフォルダ内を参照

<a href="../フォルダ名/ファイル名"></a>

〇一つ上の階層が増えるたび「../」が増える

テーブルタグ（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表のキャプション（表題）を指定
tr1行の範囲を指定
th見出しの項目
tdデータの項目
<table>
  <caption>キャプション</caption>
  <tr><th>見出し</th><th>見出し</th></tr>
  <tr><td>データ</td><td>データ</td></tr>
</table>
見出し見出し
データデータ
キャプション（位置はCSSで編集）

〇キャプション位置はCSSで移動できる、タグは必ず一番上

セルのくっつけ方

①縦セル

<th rowspan="くっつける行数">見出し</th>

②横セル

<th colspan="くっつけるマス数">見出し</th>

補足

<tbody></tbody>

古いサイトにはついている時があるが基本省略していい

フォームタグ

１.form要素（フォーム）

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

・入力フォームの作成を指定
・フォーム要素にフォームを構成するフォーム要素を配置する

action（入力データの）送信先のURL
nameフォームの名前　例）お問い合わせ、お客様情報
method送信データの転送方法を指定
（初期値）get：URLの形式で転送　post：本文にデータを配置
enctype送信データの形式を指定

2.label要素（ラベル）

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

・入力フォームのフォーム部品とラベルを関連付ける
・関連付けを行う事でラベルをクリックしてもフォーム部品をクリックしたのと同じ効果を得る

form属性form要素との関連付け
for属性フォーム部品との関連付け

3.input要素（インプット）

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

・テキスト入力欄やボタンなどの部品を作成、終了タグはない

type属性hidden画面上に表示されない隠しデータ
text1行のテキストボックス（初期値）
search検索テキストの入力欄
tel電話番号の入力欄
urlURLの入力欄
emailメールアドレスの入力欄
paswordパスワードの入力欄
datetimeUTC（ロンドン（協定世界時）日時の入力欄
date日付の入力欄
month月の入力欄
week週の入力欄
time時刻の入力欄
datetime-localUTC（ロンドン（協定世界時）によらないローカル日時の入力欄
namber数値の入力欄
rangeレンジの入力欄
coler色の入力欄
checkboxチェックボックス
radioラジオボタン
fileサーバー上へファイルを送信
submit送信ボタン
image画像ボタン
srcで画像ファイルを指定、altで代替テキスト
width、heightで画像の大きさを指定
resetリセットボタン
button汎用ボタン
name属性フォーム部品の名前を指定
form属性form要素との関連付け
form 属性の値と form 要素の id 属性の値を一致させることで離れた場所に配置した form 要素のフォーム部品と関連付けを行うことができる。
valueフォーム部品が保有する値の初期値を指定
値の現在値は名前と一緒に送信される
sizeコントロールの大きさ（文字数）を指定
maxlengthvalue属性が保有する値の最大値（文字数）を指定
minlengthvalue属性が保有する値の最小値（文字数）を指定
placeholder何を入力sルカの助言を指定　例）姓・名
checkedチェックボックスやラジオボタンがチェック状態であることを指定
disavledコントロールが無効であることを指定
readonly値の修正ができないことを指定
requiredフォーム送信するための必須項目であることを指定

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

<textarea name="名前" form="form要素" value="初期値" size="幅" maxlength="最大文字数" minlength="最小文字数" placeholder="凡例" checked disabled readonly required>
  初期値
</textarea>

〇閉じタグはある！

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

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

<select name="名前" form="form要素" multiple size="行数" disabled required>
  <option value="値" disabled selected>選択肢1</option>
  <option value="値" disabled selected>選択肢2</option>
  <option value="値" disabled selected>選択肢3</option>
</select>
nameフォーム部品の名前を指定
ここで指定された名前はフォームと一緒に送信される
formform要素との関連付け
form 属性の値と form 要素の id 属性の値を一致させることで離れた場所に配置した form 要素のフォーム部品と関連付けを行うことができる。
multiple複数の選択肢を選択できることを指定、省略時は1つ
size画面に一度に表示する行数を指定
disabledコントロールが無効であることを指定
selected初期状態で選択状態にすることを指定

optionはselectの選択肢を作成する

valueフォームで送信する値を指定
省略すると要素の中の文字列が使用される
disabledコントロールが無効であることを指定
selected初期状態で選択状態にすることを指定

6.button要素

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

ボタンを作成する

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

7.fieldset/legend（フィールドセット/レジェンド）

<fieldset name="名前" form="form要素" disabled>
  <legend>キャプション</legend>
  フォーム要素（部品）
</fieldset>
fieldset部品を一つのグループに分ける
legendそのグループの名前
nameフォーム部品の名前を指定
ここで指定された名前はフォームと一緒に送信される
formform要素との関連付け
form 属性の値と form 要素の id 属性の値を一致させることで離れた場所に配置した form 要素のフォーム部品と関連付けを行うことができる。
disabledコントロールが無効であることを指定

特殊文字/環境依存文字

HTML上で表示できない文字、記号はコードに置き換えて記述する
参考サイトhttps://tech-unlimited.com/escape.html

CSSとの紐づけ

1.id

〇固有の名前を割り当てる
　一つのHTMLに同じidは一個しか使えない
〇ページ内リンクでよく使う

2.class

〇種別名を割り当てる
　一つのHTMLにいくつでも（何度でも）同じclassを使える
〇CSSのリンクでよく使う