前回のHTMLの基本①においては下記のタグについて簡易的に説明しました。
・htmlタグ
・headタグ
・metaタグ
・titleタグ
・bodyタグ
・h1、h2、h3、h4、h5、h6タグ
・pタグ
これらのタグ以外にも複数タグが存在するので、それらを含めつつ使用方法をご紹介します。
HTMLは入れ子形で記載しますが、今回はheadタグ・bodyタグに記載される基本的なタグをそれぞれ分けてまとめていきます。
<head>タグ内に記載するタグ
<meta>
…文書の設定を記載するタグです。主な利用方法としては以下です。
ちなみにmetaタグには終端がありません。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
・metaタグ一行目の意味：ドキュメントの文字エンコーディングをutf-8とすることを指定
・metaタグ二行目の意味：ページの表示領域（ビューポート）の設定
<title></title>
…ページのタイトルを設定するタグ
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>タイトル</title>
</head>
上記のようにtitleタグを記載することで、webページ上部のタイトルが設定されます。
<link>
…外部ファイルの読み込み、ブラウザのタブに表示されるアイコンの指定等を行うことができるタグ。
<link rel="stylesheet" href="styles.css">
上記のように記載することで外部のCSSファイルを読み込むことができる。
<style></style>
…CSSを中に記載するためのタグ。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1, p{
background-color: #0ff;
}
</style>
</head>
これはh1要素とp要素に背景色をつけるという記載例です。
<base>
…ページ内の相対URLを設定したり、リンクのターゲット指定を行うことができるタグです。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<base target="_blank">
<style>
h1, p{
background-color: #0ff;
}
</style>
baseタグをこのように記載することでページ内のすべてのリンクが新しいタブで開くように指定できる。
target属性でリンクのデフォルト動作を設定できる。また、baseタグは１度のみ使用可能。
<body>タグ内に記載するタグ
<h1></h1>・<h2></h2>・<h3></h3>・<h4></h4>・<h5></h5>・<h6></h6>
…見出しを表示するタグ。
文書構造的なものを示すための数字であるため、文字を小さくしたいなどの見た目の理由で数字を飛ばして使用しない方が良い。
<body>
<h1>あ</h1>
<h2>い</h2>
<h3>う</h3>
<h4>え</h4>
<h5>お</h5>
<h6>か</h6>
</body>
<p></p>
…段落の記載を行うタグ
<body>
<h1>見出し</h1>
<p>段落テスト</p>
</body>
<br>
…改行を行うタグ
<body>
<h1>見出し</h1>
<p>段落<br>テスト</p>
</body>
このように記述すると、下記の画像のように<br>を記載したところから改行されます。
<hr>
…水平線（区切り線）を表示するタグ。話題の切り替わる際等に使用します。
<body>
<h1>見出し</h1>
<p>段落<br>テスト</p>
<hr>
</body>
このように記述すると、下記の画像のように<hr>を記載した場所に線が引かれます。
<strong></strong>または<b></b>
…文字を強調するタグです。
<body>
<h1>見出し</h1>
<p>段<strong>落テ</strong>スト</p>
<p>段<b>落テ</b>スト</p>
</body>
このように記述すると、下記の画像のように<strong></strong>で挟んだ文字が太くなって強調されます。
<em></em>または<i></i>
…文字を斜体にして強調するタグです。
<body>
<h1>見出し</h1>
<p>段落<em>test</em></p>
<p>段落<i>test</i></p>
</body>
このように記述すると、下記の画像のように<em></em>で挟んだ文字が斜めになります。
<u></u>
…文字の下にアンダーラインを引きます。
<body>
<h1>見出し</h1>
<p>段落<em>test</em></p>
<p>段落<i>test</i></p>
<p>段落<u>テスト</u></p>
</body>
このように記述すると、下記の画像のように<u></u>で挟んだ文字にアンダーラインが引かれます。
<a href=""></a>
…リンクを作成します。
<body>
<h1>見出し</h1>
<a href="#">リンク</a>
</body>
このように記述すると、下記の画像のようにリンクが作成され、<a></a>で挟んだ文字をクリックするとそのリンクに遷移することができます。（ここではダミーで「#」を使用しているので遷移はしません。）
リストの作成
…下記のタグを用いてリストの作成ができます。
<ul></ul>
…<li></li>と組み合わせて使用し、リストが作成できる。
<ol></ol>
…<li></li>と組み合わせて使用し、番号付きのリストが作成できる。
<body>
<ul>
<li>テスト１</li>
<li>テスト２</li>
<li>テスト３</li>
</ul>
<ol>
<li>テスト１</li>
<li>テスト２</li>
<li>テスト３</li>
</ol>
</body>
このように記述すると、下記の画像のようにリストが作成されます。
テーブルの作成
<table></table>
…<th></th>、<tr></tr>や<td></td>と組み合わせてテーブルを作成することができます。
<th></th>
…テーブルのヘッダーセルです。
<tr></tr>
…行を作成することができます。
<td></td>
…テーブルのデータセルです。いわゆるカラム的な扱いです。
<body>
<table border="1">
<tr>
<th>a</th>
<th>b</th>
<th>c</th>
<th>d</th>
<th>e</th>
</tr>
<tr>
<td>テスト１</td>
<td>テスト２</td>
<td>テスト３</td>
<td>テスト４</td>
<td>テスト５</td>
</tr>
</table>
</body>
border属性をtable要素に記載していますが、既にborder属性は非推奨となっているため
本来はCSSでテーブルの線を設定するのが良いです。
【内容】
<th>で記載した「a」「b」「c」「d」「e」がテーブルのヘッダーとして扱われ、
<td>で記載した「テスト１」「テスト２」「テスト３」「テスト４」「テスト５」がデータの中身として扱われています。
上記２つを表示するには行が必要なのでそれぞれ<tr>で囲われています。
このように記述すると、下記の画像のようにテーブルが作成されます。
フォーム関連のタグ
<form></form>
…フォーム全体を囲むタグです。
<input>
…入力フィールドを表示するタグです。種類があり、テキスト、ボタン、ラジオボタン等が作成できます。
<textarea></textarea>
…input要素のテキストよりも長文をフォームに入力させたいときに使用するタグです。
<button>
…ボタンを表示するタグです。
<select></select>
…<option></option>タグと組み合わせて選択肢を作成できます。
<option></option>
…選択肢の内容を設定するタグです。
<body>
<h1>お問い合わせ</h1>
<form action="#" method="POST">
<dl>
<dt><label for="username">お名前</label></dt>
<dd><input type="text" name="username" id="username"></dd>
<dt><label for="area">地域</label></dt>
<dd>
<select name="area" id="area">
<option value="" selected>選択してください</option>
<option value="hokkaido">北海道</option>
<option value="tohoku">東北</option>
<option value="kanto">関東</option>
<option value="chubu">中部</option>
<option value="kinki">近畿</option>
<option value="chukoku">中国</option>
<option value="sikoku">四国</option>
<option value="kyusyu">九州</option>
<option value="okinawa">沖縄</option>
</select>
</dd>
<dt>性別</dt>
<dd>
<label><input type="radio" name="gender" value="male" checked>男性</label>
<label><input type="radio" name="gender" value="female">女性</label>
</dd>
<dt><label for="contents">お問い合わせの内容</label></dt>
<dd><textarea name="contents" id="contents"></textarea></dd>
<dt><label for="privacy">プライバシーポリシーに同意する</label></dt>
<dd><input id="privacy" type="checkbox" name="privacy" value="1" checked></dd>
<input type="submit" value="送信">
</dl>
</form>
</body>
画面は次のようになります。
下記で一つ一つ分解して説明していきます。
【内容】
<input>タグ(テキストボックス)
<input type="text" name="username" id="username">
…type属性を「text」とすることでテキストボックスが作成されます。
name属性を「username」とすることで、その要素に名前を付けることができます。
id属性を「username」とすることで、その要素を一意に特定できるようにします。
※id属性は一意に特定するためのものであるため、「username」と同じid属性を持つ要素を作成してはいけません。
<input>タグ(ラジオボタン)
<label><input type="radio" name="gender" value="male" checked>男性</label>
<label><input type="radio" name="gender" value="female">女性</label>
…type属性を「radio」とすることでラジオボタンが作成されます。
ラジオボタンはどれか一択を選択させたいときに使用します。
value属性を「male」「female」とすることで、送信先への値を「male」「female」に設定することができます。
checkedをつけることで、既にチェックが入った状態で（初期値として）画面表示されます。
【捕捉】
<label></label>タグで囲むことによって、ラジオボタンのみのクリックだけでなく、
「男性」「女性」の文字をクリックすることによる選択も可能になります。
<input>タグ(チェックボックス)
<input id="privacy" type="checkbox" name="privacy" value="1" checked>
…type属性を「checkbox」とすることで、チェックボックスが作成されます。
ラジオボタンとは異なり、どれかを選択しなければならないということはなく、選択が任意となります。
checkedをつけることで、既にチェックが入った状態で（初期値として）画面表示されます。
<input>タグ(送信)
<input type="submit" value="送信">
…type属性を「submit」とすることで、送信ボタンが作成されます。
この送信ボタンで<form></form>タグで囲った内容を送信することができます。
【捕捉】
このタグの代わりに<button></button>タグの使用も可能です。この２つの違いは以下のようになります。
<input type="submit" value="送信">
→テキストのみのデザイン変更が可能。どのブラウザでも一貫したシンプルなデザインにすることができる。
<button></button>
→type属性をsubmitやreset等に設定でき、デザインも柔軟に設定できます。
<textarea></textarea>タグ
<dt><label for="contents">お問い合わせの内容</label></dt>
<dd><textarea name="contents" id="contents"></textarea></dd>
…このように記述することで、テキストボックスよりも長い文章を入力することができる
テキストエリアを作成することができます。
<select></select>タグと<option></option>タグ
<dt><label for="area">地域</label></dt>
<dd>
<select name="area" id="area">
<option value="" selected>選択してください</option>
<option value="hokkaido">北海道</option>
<option value="tohoku">東北</option>
<option value="kanto">関東</option>
<option value="chubu">中部</option>
<option value="kinki">近畿</option>
<option value="chukoku">中国</option>
<option value="sikoku">四国</option>
<option value="kyusyu">九州</option>
<option value="okinawa">沖縄</option>
</select>
</dd>
…このように記述することで下記画像のように選択肢を表示することができます。
また、<option></option>タグ内でselectedを記述しておくことで、
その選択肢が既に選択された状態で（初期値として）画面表示されます。
画像表示のタグ
<image>
…画像を表示することができます。
<image src="#" alt="画像に対する説明">
ここでは「src="#"」としていますが、とってくる画像のURLやパスを設定することで画像表示ができます。
著作権表記
…タグの話とは少しずれますが最後に著作権表記の方法です。
「©」を追記することで下記画像のように表示されます。
<p>© 2024 Example</p>
