どうも、シノだ。
今回は、ある程度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><br>を入れれば改行もできるよ。
</li>
<li>
ulのリストその3
</li>
</ul>
<ol>
<li>
olのリストその1
</li>
<li>
olのリストその2<br><br>を入れれば改行もできるよ。
</li>
<li>
olのリストその3
</li>
</ol>
…ちょっと途中「<」とか「>」とか変なものが入っているが、いったん置いておいてほしい。大丈夫、あとでしっかり解説する。
さて、サンプルを見てもらってわかる通り、箇条書きは大きく分けて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><br>を入れれば改行もできるよ。
</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>を入れ替えてあげよう。
ここまできてようやくだが、「<」と「>」 の説明である。
さんざん使っているように、HTMLはタグを「<」と「>」で囲む。つまり、これらは特殊な意味を持つのだ。
で、その特殊な意味を持つものをそのまま書いてしまうと、誤解を与えてしまうことになる。これを防ぐために、特別な書き方が用意されているのだ。
HTML上で「<」と「>」を表示したい場合は、この 「<」と「>」 を使ってあげよう。さらに、「&」は 「&」となる。 ちなみに、この 「&」 を書くために 「&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">選択肢3typeオプションは「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アイコンから覗いていってほしい。
それでは。
コメント
[…] 前回は、HTMLタグのオプションの書き方と、基本的なHTMLタグの紹介を行った。このあたりは覚えておくといいだろう。 […]
[…] 先に、復習だ。HTML講座の最後の方で、画面に入力を行う各タグというものを解説した。 […]