サイト作り方無料
前回(第2回)の講座では、実際にHTMLファイルを作り、ブロック要素やインライン要素について学びました。


以降、ブロック要素やインライン要素が頻繁に出てきます。


今回の講座では、
  1. 見出しの表示方法
  2. 改行の表示方法
  3. リンクの表示方法
・・・について解説します。


見出しの表示方法 | <h>タグ

HTMLのタグは100種類近くあると言われています。


しかし、すべて暗記する必要はなく、企業相手にホームページ制作を事業としておこなっている私でも、よく使うタグは10種類くらいだと思います。
頻繁に使うタグ、そうでないタグはやっていくうちにわかってきますので、真面目に暗記する必要はありません。
大切なのは、そのタグを使用することによってどのように表示されるのか、またどのような意味づけがあるのかです。


まずは、見出しの表示方法です。


見出しとは、言い換えれば「タイトル」です。これをタグを使って表示するには以下のようにします。

html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>
<body>

<h1>これが見出しです</h1>

</body>
</html>
(実際の表示)
これが見出しです
このように<h1>で囲んだ部分が見出しとして表示されます。


見出しを作成するタグとして他に下記のものがあります。

html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>
<body>

<h2>これが見出し2です</h2>
<h3>これが見出し3です</h3>
<h4>これが見出し4です</h4>
<h5>これが見出し5です</h5>
<h6>これが見出し6です</h6>

</body>
</html>
(実際の表示)
これが見出し2です

これが見出し3です

これが見出し4です

これが見出し5です

これが見出し6です
これらのタグは数字が大きくなるほど文字サイズが小さくなりますね。


(ちなみに、hタグはすべてブロック要素です。最大数値が6までとなりますので、7は存在しません)


実は、これらの見出し(hタグ)が1~6まであるのには意味があります。
数字が小さいほど重要度が高く、数字が大きくなるほど重要度が低くなっていきます。
ようするに、重要度が高い見出しの場合は数字の小さいhタグを使用するわけです。


例えば、住所を見出しに見立てたとすると、以下のような形になります。

html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>
<body>

<h1>日本</h1>
<h2>埼玉県</h2>
<h3>さいたま市</h3>
<h4>見沼区</h4>
<h5>桜木町</h5>
<h6>1丁目</h6>

</body>
</html>
(実際の表示)
日本(1番重要度高い)

埼玉県(2番目に重要度高い)

さいたま市(3番目に重要度高い)

見沼区(4番目に重要度高い)

桜木町(5番目に重要度高い)

1丁目(1番重要度が低い)
基本的にh1タグは1ページにつき1度しか使ってはいけませんが、h2~h6タグは何度使ってもOKです。


これらhタグの文字の大きさや装飾などのカスタマイズについては、後で解説していきます。


改行の表示方法 | <br>タグ

前回の第2回目の講座で<p>タグに代表される「ブロック要素」について学びました。


ブロック要素のタグは、他の要素から独立して表示されるため、<p>タグを使用すると自動的に改行される形になるわけです。


では、<p>タグを使わずに改行させる方法についてです(例えば<p>タグ内に記述する文章を改行したいときなど)

この場合、<br>というタグを使います。


<br>は1回記述すると、1段改行され、2回記述すると、2段分改行される形となります。


実際に下記のHTMLコードを書いてみましょう(今回からDOCTYPE宣言文などの記述は省略します)。

html

<p>こんにちは!<br>今日の天気は晴れです。</p>


<p>こんにちは!<br><br>今日の天気は晴れです。</p>
(実際の表示)
こんにちは!
今日の天気は晴れです。

こんにちは!

今日の天気は晴れです。
後者の例文に関しては、こんにちは!の後に2行分の改行が挿入される形になっていますね。

<br>タグは改行するためだけの要素なので、<h>タグのように特定の意味合いを含むタグではありません。


ようするに、中身がないタグで、このような要素を「空要素」と言います。


<br>は「ブロック要素」でも「インライン要素」でもなく「空要素」というわけです。


また、<br>タグは<p>タグなどのように、終了タグ</p>は存在しません。


<br>は、1つ記述するごとに1行分の改行がおこなわれるタグだということを覚えておきましょう。


リンクの表示方法 | <a>タグ

それでは、最後にリンクを生成するタグを学びましょう。


リンクのないWebサイトはほぼ存在しません。


リンクとはクリックすることで同サイト、あるいは他サイトの別ページへ移動させることができるものです。


リンクを生成するには<a>タグを使用します。

html

<a href="https://google.com">Googleの検索エンジンに移動する</a>
(実際の表示) 実際の表示をクリックすると、GoogleのWebページに移動する形になります。
<a>タグは、hrefを直後に指定し、その上で移動先のURLを指定しないと機能しません。
このhrefを属性と呼びますが、属性とはタグをより詳しく設定するための役割をするものです。


さらに、<a>タグまわりでよく使われる属性としてtargetがありますが、これも頻繁に使うので覚えておきましょう。


target属性に「_brank」を指定すると、URLをクリックしたときに「新しタブ」が開き、移動ページをブラウザの別タブに表示させることができます。


(target属性を指定しなければ先ほどの表示と同じように、現状のページが移動ページにそのまま差し変わる形です)

html

<a href="https://google.com" target="_blank">Googleの検索エンジンに移動する</a>
(実際の表示) 見た目は先ほどと一緒ですが、上記のリンクをクリックすると別タブが開いてGoogleのWebページに移動することがわかると思います。


今回は頻繁に使用する3つのタグについて紹介しました。


これらもしっかり覚えておきましょう。