このページでは、【ホームページ制作入門講座】として、HTMLで使用する実践的タグの紹介をしていきます。
HTML5で使えるタグは100種類弱存在しています。しかし、実際ホームページを作る上で実践的に使用するのは、せいぜい2.30個程度です。
ですので、HTMLの勉強を始めたからと言って、1から100まで覚えたり、実践的に使用するタグを知らずに勉強を進めるのは非常に不効率です。
実際、私も初心者で勉強を始めた頃は1〜10まで覚えようとしました。しかし、今となって思うのは、それは無駄な時間だったという事です。
教科書からいくら学ぼうとも、実践で使う事がなければ、結局忘れてしまいます。そして、それに費やした時間を良い勉強になったとも感じれず、無駄な時間を過ごしたという印象しかありません。ですので、皆さんには効率的な勉強方法として、実践的なタグのみをご紹介していきたいと思います。
しかし、実践でもたまに、「知らない・使った事がない」タグが出てきたり、使う必要が出てきたりもするでしょう。そんな時は、別にテストをするわけではないので、その場で検索して対応すればなんの問題もありません。
要は、ポイントだけ抑えた実践的な基礎タグさえ理解しておけば、後はなんとかなるし、そうしていく事がおすすめだと思います。
この記事は、動画バージョンでも解説しておりますので、動画で学習されたい方は以下のリンクより閲覧下さい。
<body>に使う実践的基本タグ
それでは、bodyタグによく使う実践的基本タグを紹介していきます。
全部で12種類になりますが、どれもとても使用頻度の高いものになりますので、余計なタグを学習しない分、これらのタグに関してはしっかりと身につけるようにしましょう。
bodyタグで使用する実践的基礎タグを覚えれば、ホームページの骨組み作成はほとんどできるようになります。
-
HTMLとは？名前の意味やバージョン、書き方などを説明します。【ホームページ制作入門講座】
続きを見る
<div>（ディブ）タグ
ココがポイント
「div」はdivisionの略で、分割、区分、部分、などの意味になりますので、「グループで括る。一塊」と言ったニュアンスで捉えると良いでしょう。
divタグは非常に重要なタグですが、divタグ自体に意味はなく、非常に抽象的な扱いです。逆に言うと属性をつけて意味を与えてあげる事で、なんにでも対応できてしまうタグになります。
はっきり言って、divタグさへ使いこなさせれば、bodyの中身の90％は作成する事ができます。
<h>タグ
ココがポイント
「h」はheadingの略で、「見出し」を意味します。
hタグは6種類あり、<h1>,<h2>,<h3>,<h4>,<h5>,<h6>とあります。
hタグは、検索エンジンの最適化において、非常に重要なタグになり、以下のルールがあります。
hタグの使用順
hタグには使用する順番があり、<h1>から順番に使っていく必要があります。
○ <h1> → <h2> → <h3> → <h4> → <h5> → <h6>
× <h6> → <h5> → <h4> → <h3> → <h2> → <h1>
h1タグの使用は一度だけ
h1タグは一度だけしか使えないというルールがあります。
しかし、何回でも使って良いという公式表明もあったりするようですが、h1タグを何個も使うのは、文法的に考えると無理があり、タイトルの主旨とずれてきますので、原則一回と考える方が良いと私は考えています。
○ <h1> → <h2> → <h3> → <h2> → <h3> → <h4>
× <h1> → <h2> → <h1> → <h2> → <h3> → <h4>
<ul>,<li>タグ
ココがポイント
「ul」はUnordered Listの略で、「順不同の箇条書き」を意味します。
「li」はListの略で、「箇条書き」を意味します。
ul,liタグは主に、リスト表を使う時に使用します。リスト表とは、箇条書きの事を指します。
ul,liタグは必ずセットで使用し、ulタグの中にliタグが必要数入る形になります。
<ul>
<li>じゃがいも</li>
<li>にんじん</li>
<li>玉ねぎ</li>
<li>大根</li>
</ul>
ul,liタグは、箇条書きで使う際も使用しますが、サイト上部のメニューの箇所にも使用したりします。
ポイント
箇条書き表示において、もう一つ出てくるタグがあります。
それは<ol>,<li>タグのセットです。
「ol」はordered Listの略で、「順番のある箇条書き」を意味します。
つまり、上から順番に1.2.3.と数字が振られるリストになるのですが、リスト関係で2種類もタグを覚えるのはややこしいと思いますので、覚えなくていいと思っています。
なぜなら、番号付きにリストしたければ、CSSでスタイルを当てる事ができるからです。
ですので、リスト表示には、一般的に使用頻度も高い、ul,liタグのセットとまず覚えるのがおすすめです。
<a>タグ
ココがポイント
「a」はanchor（アンカー）の略で、錨(いかり)を意味します。こちらに関しては日本語訳では少し意味が分かりにくいですので、「ジャンプ・移動する」と覚えておきましょう。
また、aタグはジャンプする訳ですので、着地点も決めておかないといけません。
href属性
aタグの着地点は、「href属性」で指定します。
ココがポイント
「href」はhyper text referenceの略で、「超文章参照」と言う日本語の意味になりますが、これでは非常に意味不明ですので、「参照先」くらいの意味で覚えておきましょう。
<a href="https://designerbrg.com/">デザイナーブリッジ</a>
「デザイナーブリッジ」のテキストを押すと、「https://designerbrg.com/」に移動するという動きになります。
target属性
また、ジャンプ先のページをどのように開くかを指定する「target属性」というのもあります。
通常のaタグでは、何も指定しなければ、ジャンプ先は同じタブ上でのページ移動になり、「戻る」ボタンを押して元のページに戻る事が可能の状態になります。
しかし、これが不便な事もありますよね。別のタブでページを開かせたい。そんな時は、「target="_blank"」という属性を追加する事で、別のタブでページを開かせる事が可能です。
使い方はそれぞれの場合によりますので、状況に応じて使い分けていきましょう。
<a href="https://designerbrg.com/" target="_blank">デザイナーブリッジ</a>
「デザイナーブリッジ」のテキストを押すと、新しいタブで「https://designerbrg.com/」のページを表示するという動きになります。
<p>タグ
ココがポイント
「p」はparagraph（パラグラフ）の略で、「段落」を意味します。
文章の一塊を括るタグになりますので、非常に頻繁に使用するタグです。
<p>今日は晴れです。</p>
<span>タグ
ココがポイント
spanは期間、短時間、全長、全範囲などの日本語の意味になりますが、HTMLの場合は意味合いは少し違い、「ピンポイントの箇所」みたいなニュアンスで覚えておきましょう。
spanタグで使用される要素は大規模な範囲ではなく、<div>タグや<p>タグなどの中に内包される、小さなエリアに向けて使用される事が多いです。
<p>今日は<span>晴れ</span>です。</p>
こうする事で、「晴れ」という文字を任意の色にしたり、強調したりする事ができます。
ただし、spanタグ自体に意味はありませんので、必ず属性をつけて意味を与えてあげる必要があります。
<p>今日は<span class="hare">晴れ</span>です。</p>
<img>タグ
ココがポイント
「img」はimageの略で、「画像」を意味します。
しかし、imgタグだけでは何の画像か分かりませんので、「src属性」を与える事で、どの画像を参照するか指定する事ができます。
また、検索エンジンの最適化ルールとして、その画像が表示されなかった時に、代わりに文字だけで表示できるように「alt属性」にて説明を付け加えるというのがあります。
ココがポイント
「src」はsource（ソース）の略で、源、原因、情報源などを意味しますので、「元の場所」くらいの認識で捉えておきましょう。
「alt（オルト）」は、alternate（オルタネイト）の略で、代わりのもの、代役などを意味しますので、「画像が表示されない時の説明」と覚えておきましょう。
また、imgタグは、閉じタグの不要な特殊なタグでもあります。
<img src="https://designerbrg.com/logo.png" alt="デザイナーブリッジのロゴ">
<br>タグ
ココがポイント
「br」はbreakの略で、破壊的な意味ですが、HTMLでは「改行」を意味します。
brタグは、閉じタグの不要な特殊なタグでもあります。
これは、「改行」にはマークアップする文字が存在しませんので、現実的に閉じタグで表現するのは難しいという理由があります。
過去バージョンのXHTMLなどでは、改行は<br />と記述されたりします。
実際、他者のホームページを閲覧したりすると、<br />が使用されていたりする事もあります。
HTML5では、過去のバージョンの補完がされますので、<br>でも<br />でも、どちらも改行として認識されます。
文章を書く効率も良く、スラッシュなしがHTML5では推奨されていますので、基本は<br>で、<br />は過去の書き方であるという事は覚えておきましょう。
<p>今日は晴れた。<br>遊びに行こう。</p>
<table>タグ
ココがポイント
「table」は、机の他に、「表」という意味があります。
表は、色々な項目を相対的に比較する際有効に使えます。
また、tableタグの中には、入れ子で<tr>,<th>,<td>タグをセットで使用する事が多いです。
<tr>タグ
ココがポイント
「tr」はtable rowの略で、rowは「横一行のグループ」を意味します。
<table>
<tr>1列目</tr>
<tr>2列目</tr>
<tr>3列目</tr>
</table>
まずは、表が何行になるか<tr>の数で決めます。
<th>タグ
ココがポイント
「th」はtable headerの略で、「テーブル最上部の見出し」を意味します。
<table>
<tr>
<th>1列目見出し</th>
<th>2列目見出し</th>
</tr>
<tr>2行目</tr>
<tr>3行目</tr>
</table>
thタグで、テーブルに見出しをつけます。
この見出しの数が表の列数になり、以下の行でも全て同じ数に揃えていかないといけません。※最後に例あり。
<td>タグ
ココがポイント
「td」はtable dataの略で、「各項目」を指します。
<table>
<tr>
<th></th>
<th>太郎</th>
<th>次郎</th>
</tr>
<tr>
<td>国語</td>
<td>90点</td>
<td>91点</td>
</tr>
<tr>
<td>算数</td>
<td>88点</td>
<td>89点</td>
</tr>
</table>
| 太郎 | 次郎 | |
|---|---|---|
| 国語 | 90点 | 91点 |
| 算数 | 88点 | 89点 |
上記が、tableタグ利用の基本形になります。
colspan属性
また、「colspan属性」をつける事で、横で隣合う同値の項目をまとめる事もできます。
使用方法は<td colspan="2">という形で、まとめたい数を書きます。
ただし、項目がまとまっていますので、1項目分減らさないとエラーがでますので、気をつけましょう。
<table>
<tr>
<th></th>
<th>太郎</th>
<th>次郎</th>
<th>三郎</th>
</tr>
<tr>
<td>国語</td>
<td>90点</td>
<td>91点</td>
<td>93点</td>
</tr>
<tr>
<td>算数</td>
<td>88点</td>
<td colspan="2">89点</td>
</tr>
</table>
| 太郎 | 次郎 | 三郎 | |
|---|---|---|---|
| 国語 | 90点 | 91点 | 93点 |
| 算数 | 88点 | 89点 | |
rowspan属性
同様に、「rowspan属性」をつける事で、縦で隣合う同値の項目をまとめる事もできます。
<table>
<tr>
<th></th>
<th>太郎</th>
<th>次郎</th>
<th>三郎</th>
</tr>
<tr>
<td>国語</td>
<td rowspan="2">90点</td>
<td>91点</td>
<td>93点</td>
</tr>
<tr>
<td>算数</td>
<td>88点</td>
<td>89点</td>
</tr>
</table>
| 太郎 | 次郎 | 三郎 | |
|---|---|---|---|
| 国語 | 90点 | 91点 | 93点 |
| 算数 | 88点 | 89点 |
ポイント
tableタグの中に使用されるものの他に、<tbody>,<tfoot>,<thead>タグというのがありますが、なくても表は問題なく作成できます。
ですので、まずは<table>,<tr>,<th>,<td>のみで表を作成できるようにしましょう。
<tbody>,<tfoot>,<thead>に関しては、以下の「bodyタグに必須ではないが、知識として覚えておきたいタグ」の記事からご確認ください。
-
bodyタグに使用する、覚える必要はないが理解しておくべきおすすめタグ13選【ホームページ制作入門講座】
続きを見る
まとめ
いかがでしたでしょうか？
HTML5で使えるタグは100種類弱存在していますが、実際ホームページを作る上で実践的に使用するのは、せいぜい2.30個程度ですので、要点を絞って勉強をしていくのがおすすめです。
bodyタグの中で使われる実践的な基本タグは、<div>,<h>,<ul>,<li>,<a>,<p>,<span>,<img>,<br>,<table>,<tr>,<th>,<td>の12種類で、他にもbodyタグに必須ではないが、知識として覚えておきたいタグというのがあります。
実践的な基本タグを習得できれば、問題なくHTMLで文章を組んでいく事ができるでしょう。
-
bodyタグに使用する、覚える必要はないが理解しておくべきおすすめタグ13選【ホームページ制作入門講座】
続きを見る
