今更聞けないHTML&CSS講座第2回「代表的なHTMLタグ」

どうも、シノだ。

今回は、ある程度HTMLタグを増やしてみようと思う。これくらいはできた方がいいだろうなと思ったものだ。

ここを書いている時点で5つくらい紹介しようかと思っているが、それ以上になるかもしれない。

まあ、使うときに参照してもらえればと思う。

また、HTMLタグには「オプション」というものがつけられる。これについても解説しよう。

スポンサーリンク

前回の復習

前回は、HTMLの基本的な書き方を解説した。また、開発者ツールコメントといった、知っておくと便利なものも紹介した。このあたりは是非使いこなせるようにしておきたい。

HTMLタグのオプション

さあ、早速タグを紹介…する前に、オプションについて解説しておこう。オプションとは、タグに追加で指定してあげることで、プラスαの意味を持たせることができるのだ。

具体例は、前回のものを出そう。もう一度、ソースコードを見てみる。

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="UTF-8">
		<title>Hello World!!!</title>
	</head>
	<body>
		<h1>Hello World!!!</h1>
		<p>これは、初めてのHTMLです。</p>
		<p>これから、<br>色々勉強していきましょう!!!</p>
	</body>
</html>

この2行目と4行目にオプションを使用している。初心者向けにも書いた4行目で見てみよう。

<meta charset="UTF-8">

このタグは、前回は「文字コードを設定するもの」と説明したが、厳密には異なる

正式には、この<meta>というタグは「文章自体の設定をするもの」という意味がある。そのオプションとして、具体的な設定内容…今回で言えば、文字コードを設定している。

この、charset="UTF-8"のように、基本的には「設定するオプション=”設定する内容”」という書き方をする。覚えておこう。中には特定のものを書くだけでOKのものもある。ちなみに、複数設定する場合はそれぞれを半角スペースで区切ってあげればいい

タグの紹介

さあ、今度こそタグの紹介に入ろう。

リンクを貼る「a」タグ

よく見かけるのは、文字などをクリックすると別ページに移動するものだ。これには、aタグを使用する。基本的な書き方は以下の通りだ。

<a href="ジャンプ先のURL">ここをクリックするとジャンプします</a>

こんな書き方になる。これで文字列をクリックすると、hrefオプションで指定したURLに飛んでくれる。

なお、これにはtargetオプションというものもある。これで”_blank”と指定すれば、新しいタブを開かせることも可能だ。

また、titleオプションをつけると、カーソルを重ねたときに文字を表示させることもできる。

このサンプルは…今回紹介するタグ一覧ページへのリンクを下に貼ろう。ここの部分のソースコードは以下の通り。

<a href="https://shinoarchive.com/forCourse/html/Sample02-1.html" target="_blank" title="サンプルページはこちら">サンプルページ</a>

そして、これを貼った結果が下だ。

サンプルページ

クリックすると、新しいタブで、今回紹介するタグ一覧が出てくると思う。必要に応じて参照して欲しい。なお、今回のサンプルページは見やすさを考慮してちょっとだけ見た目を変えているので、ソースコードをそのまま書いても厳密には同じ表示にはならない

箇条書きを作る「ul」、「ol」タグ

まずは、箇条書きだ。サンプルページの該当する部分のソースコードを貼ろう。

<ul>
	<li>
		ulのリストその1
	</li>
	<li>
		ulのリストその2<br>&lt;br&gt;を入れれば改行もできるよ。
	</li>
	<li>
		ulのリストその3
	</li>
</ul>
<ol>
	<li>
		olのリストその1
	</li>
	<li>
		olのリストその2<br>&lt;br&gt;を入れれば改行もできるよ。
	</li>
	<li>
		olのリストその3
	</li>
</ol>

…ちょっと途中「&lt;」とか「&gt;」とか変なものが入っているが、いったん置いておいてほしい。大丈夫、あとでしっかり解説する。

さて、サンプルを見てもらってわかる通り、箇条書きは大きく分けて2種類ある。先頭が「・」か番号かだ。「・」にしたい場合はulタグ、番号にしたい場合はolタグを使う。

で、それ以外は両方とも同じ使い方になる。一つひとつの要素はliタグで記述していくのだ。もちろん、例でやっているようにbrタグを使えば改行もできる。

また、もう一つ紹介しておこう。サンプルの一番下のリストを見て欲しい。箇条書きの中に、更に箇条書きが入っている。

このように、更に細かい箇条書きを指定することも可能だ。このサンプルソースは以下の通り。

<ol>
	<li>
		olのリストその1
		<ol>
			<li>olのリストその1-1</li>
			<li>olのリストその1-2</li>
			<li>olのリストその1-3</li>
		</ol>
	</li>
	<li>
		olのリストその2<br>&lt;br&gt;を入れれば改行もできるよ。
	</li>
	<li>
		olのリストその3
	</li>
</ol>

このときの注意だが、箇条書きの要素である<li>の中に、丸ごともう一つの箇条書きを入れてしまうこと。

なお、中の数字は「1-1.」とかになってほしいところだが…これは、後で解説するCSSで行うので、そちらに譲ろう。

あと、もう一つ注意がある。これは箇条書きに限らず、HTML全体で言えることなのだが…

HTMLのタグは、別のタグの中に入れることはできるが、完全に入れてしまう必要がある

どういうことかというと、以下のような例はNGだということだ。

<ol>
<li>
olのリストその1
<ol>
<li>olのリストその1-1</li>
<li>olのリストその1-2</li>
<li>olのリストその1-3</li>
</li>
</oi>
</ol>

赤字で書いた<li>の中で<ol>が始まり、その終わりの</ol>が来る前に</li>が来てしまっている。これではだめなので、</ol></li>を入れ替えてあげよう。

ここまできてようやくだが、「&lt;」と「&gt;」 の説明である。

さんざん使っているように、HTMLはタグを「<」と「>」で囲む。つまり、これらは特殊な意味を持つのだ。

で、その特殊な意味を持つものをそのまま書いてしまうと、誤解を与えてしまうことになる。これを防ぐために、特別な書き方が用意されているのだ。

HTML上で「<」と「>」を表示したい場合は、この 「&lt;」と「&gt;」 を使ってあげよう。さらに、「&」は 「&amp;」となる。 ちなみに、この 「&amp;」 を書くために 「&amp;amp;」 と書いてる。もはやよくわからない。

引用を作る「blockquote」、「q」、「cite」タグ

いきなり三つも出てきたが、落ち着いてほしい。

これらは、引用する場合に使うタグだ。このあたりは権利などの問題もあるので、慎重に使ってほしい。

さて、該当箇所のサンプルソースを見てみよう。

<blockquote>
	<p>ここが引用している箇所である。</p>
</blockquote>
<p><cite><a href="">引用元</a></cite>より</p>
<p>この文章の「、」以降の部分が、<q>引用している箇所</q>である。<cite><a href="">引用元</a></cite></p>

実際に引用しているわけではないので、引用元はない。許して。

このように、blockquote、qタグはそれぞれ、段落として、あるいは一文としてそこが引用であることを表す。

そして、その出典を示すのがciteタグだ。他ページからの引用の場合、そのページのURLをaタグで貼り、ページタイトルを書くのが普通だろう。

対象ページのタイトルは、前回紹介した開発者ツールでも確認できるし、ページを右クリック⇒「ページのソースを表示」の中からタイトルタグを探してもいい。

で、一つ注意だが、引用であれば必ずこの「blockquote」、「q」いずれかのタグを使用すること。でないと、検索エンジンからは「お、盗作か?」と思われてしまう。また、元の文章は「一切変更しない」ことが必要なので、そこも気を付けたい。

画面に入力を行う各タグ

ここでは、画面に値を入力させるようなタグを説明していく。これができると、それを受け取って処理もできるようになる…が、その部分は後で解説するJavaScriptやPHPなどが必要になるので、いったん入力部分だけ説明しよう。

先に、サンプルページの説明をする。

まず、最初に表示されているのは入力部分だ。上から、「テキスト入力」、「数字入力」、「ラジオボタン」、「チェックボックス」、「リスト選択(単体)」、「リスト選択(複数)」だ。

そして、最後にボタンが配置されている。これを押すと、その下に入力されたものが出てくる。また、更にその一番下にもボタンがあり、これを押すと結果表示を隠す。

これを実装するためにJavaScriptも使用しているのだが、今回はHTMLの部分だけ説明しようと思う。

入力部分のサンプルのソースコードを先に貼ってみよう。こんな感じだ。

<ul>
	<li>テキスト入力:<input type="text" id="text-input"></li>
	<li>数字入力:<input type="number" id="number-input"></li>
	<li>ラジオボタン:<br>
		<p>
			<input type="radio" name="radio-button" value="1" checked>選択肢1<br>
			<input type="radio" name="radio-button" value="2">選択肢2<br>
			<input type="radio" name="radio-button" value="3">選択肢3
		</p>
	</li>
	<li>チェックボックス:<br>
		<p>
			<input type="checkbox" name="checkbox-button" value="1">選択肢1<br>
			<input type="checkbox" name="checkbox-button" value="2">選択肢2<br>
			<input type="checkbox" name="checkbox-button" value="3">選択肢3
		</p>
	</li>
	<li>セレクトボックス(一つのみ選択):<br>
		<select id="single-select">
			<option value="1" selected>選択肢1</option>
			<option value="2">選択肢2</option>
			<option value="3">選択肢3</option>
		</select>
	</li>
	<li>セレクトボックス(複数選択可):<br>
		<select id="multi-select" multiple>
			<option value="1">選択肢1</option>
			<option value="2">選択肢2</option>
			<option value="3">選択肢3</option>
		</select>
	</li>
	<li>決定ボタン:<input type="submit" onclick="showResult()" value="決定"></li>
</ul>

…貼って思った。詰め込みすぎた。まあいい、一つずつ見ていこう。

テキストボックス

li要素の一つ目だ。該当部分を抜き出すと以下の通り。

<input type="text" id="text-input">

ここ以外にもinputタグがふんだんに使用されているが、これこそが入力部分を作るタグになる。また、見てもらってわかる通り終了タグはない

オプションでtype="text"としている。ここを変えることで、様々な入力部品を作ることができるのだ。textの場合は、テキストボックスになる。

また、もう一つオプションがくっついている。id="text-input"というやつだ。これは、この部品に「text-input」というIDを付けてあげている。実際に効力を発揮するのは、値を受け取るときなので、今は付けれるんだなくらいでいい。

なお、idオプションでつけるIDは、そのHTML内で重複してはいけない

数字ボックス

li要素の二つ目。

<input type="number" id="number-input">

基本的にはテキストボックスと同じだ。数字の場合、typeオプションは「number」になる

ラジオボタン

ラジオボタンとは、複数の選択肢から一つだけを選ばせる部品のことだ。これは、選択肢の数だけinputタグを用意する必要がある。

<input type="radio" name="radio-button" value="1" checked>選択肢1<br>
<input type="radio" name="radio-button" value="2">選択肢2<br>
<input type="radio" name="radio-button" value="3">選択肢3

オプションについて、typeは大丈夫だろう。ラジオボタンの場合は「radio」を指定してあげる

nameオプションは、idと同じようにこの部品に名前をつけるものだ。ただ、こちらは重複しても問題ない。同じグループのラジオボタンには同じ名前をつけてあげよう。

valueオプションについて、これも値を受け取るときの内容ここに書いた内容を取得することになる。

一つ目のラジオボタンだけ、checkedオプションが入っている。これは、デフォルトでその要素が選択された状態にするものだ。これがないと、全て選択されていない状態が出来上がってしまうので、入れておくのがベターだろう。

そして、ここまでの内容で選択するボタンの部分のみが表示される。その選択肢が何を表すか、その直後に書いてあげよう。注意だが、valueオプションの値が表示されているわけではない。逆に言えば、見た目と異なる値をvalueで指定してあげることができるのだ。

チェックボックス

今度は、複数選択可能な選択肢だ。基本的にはラジオボタンと同じ。

<input type="checkbox" name="checkbox-button" value="1">選択肢1<br>
<input type="checkbox" name="checkbox-button" value="2">選択肢2<br>
<input type="checkbox" name="checkbox-button" value="3">選択肢3

typeオプションは「checkbox」を入れてあげる。また、チェックボックスは該当なしの場合もあるだろうから、checkedオプションは入れていない。

セレクトボックス

さて、いったんタグがinputから変わる。セレクトボックスは専用のタグが用意されている。

そもそもセレクトボックスとは、一覧のリストから対象を選ばせるものだ。これも、一つのみ選択させることも、複数選択させることもできる。

まず、一つのみの選択から。

<select id="single-select">
	<option value="1" selected>選択肢1</option>
	<option value="2">選択肢2</option>
	<option value="3">選択肢3</option>
</select>

これは、まずselectタグにIDをつけ、リスト全体を囲む。そして、リストの要素一つひとつをoptionタグで表す。これらは終了タグがあることも注意だ。箇条書きと似ているので、併せて覚えるといいだろう。

valueオプションはラジオボタン、チェックボックスと同じ。selectedオプションはラジオボタンのcheckedオプションと同じだ。

次に、複数選択の場合。

<select id="multi-select" multiple>
	<option value="1">選択肢1</option>
	<option value="2">選択肢2</option>
	<option value="3">選択肢3</option>
</select>

一つのみ選択するときとの違いは、selectタグにmultipleオプションが入っていることだけ。このリストでは、Ctrlを押しながら要素をクリックすれば複数選択ができる。

決定ボタン

最後だ。またinputに戻ってくる。

<input type="submit" onclick="showResult()" value="決定">

ボタンを作るときは、typeオプションで「submit」を指定してあげる。ここは、valueオプションに指定した文字列がボタンに表示される

さて、二つ目のonclickオプションだが…これは、クリックされたときの動作をJavaScriptで定義するものだ。つまり、この中身はまだ解説できない。

…だと寂しいので、可能な限りで解説する。今回、別のところでこのオプションに指定している「showResult()」という名前の処理を定義しているこのボタンがクリックされたときに、それを呼び出してあげているのだ。

ちなみに、この処理では、入力された値を下に表示するような処理が書かれている。すでにJavaScriptが分かっている人はこれも見てみよう。ソースを表示して読み込んでいるファイルから確認できる。分からない人は「ふーん」でいい。

なお、結果表示の一番下にあるボタンは、そこの部分を隠す処理だけ行っている。

おわりに

いかがだっただろうか。今回の内容で、とりあえずある程度のものは作れるようになってきた。

さて、そろそろ見た目が寂しいだろう。というわけで、次回は見た目をちょっと直してみようと思う。そう、ついにCSS編の開始だ。

更新情報はTwitterでも呟いている。よかったら、ページ下部のTwitterアイコンから覗いていってほしい。

それでは。

コメント

  1. […] 前回は、HTMLタグのオプションの書き方と、基本的なHTMLタグの紹介を行った。このあたりは覚えておくといいだろう。 […]

  2. […] 先に、復習だ。HTML講座の最後の方で、画面に入力を行う各タグというものを解説した。 […]

タイトルとURLをコピーしました