初心者でも分かるWEBサイト制作

HTMLでWEBサイトの構造を作る

まずは、実際にWEBサイトを表示させてみましょう。
エディタを開き下記のソースをコピー＆ペーストして下さい。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<meta name="description" content="「サイトの説明文を入力します」">
<meta name="keywords" content="「検索キーワードを２つ入力します（区切りは「,」で）」">
<meta name="author" content="「作者名を入力します」">
<title>「サイトタイトルを入力します」</title>
</head>
<body>
<h1>初めてのWEBサイト作成</h1>
<p>WEBサイトを作成してブラウザで見てみました。<br>
きちんと表示されています。
</p>
</body>
</html>

男性の画像

ペーストが出来ましたら、
「ファイル」→「名前を付けて保存」
ファイル名を「index.html」
文字コードを「UTF-8」
にして、デスクトップに保存しましょう。

保存したファイルを右クリック→
「プログラムから開く」→
「Google Chrome」を選択して起動してみて下さい。
「初めてのWEBサイト作成
WEBサイトを作成してブラウザで見てみました。
きちんと表示されています。」
と表示されれば成功です。単純なものですがWEBサイトが制作できました。
いかかでしょう？難しいでしょうか？詳しい事はこのあとお話しますが、まずは難しく考えないで下さい。

男性の画像

HTMLとは

WEBサイトというのは、HTMLという専用の言語で書かれます。HTMLは「Hyper Text Markup Language」の略で、WEBサイト用の文書を書くための言語です。
通常の文章を書く時にも、目次を書いたり、各段落に見出しをつけたり、段落を書いたりします。絵や画像を挿入したり、箇条書きを書いたりもします。
そのような構造をWEBサイトで表現するために用いられるのがHTML言語です。
HTMLで文書を書く事を「マークアップ」と言う事もあります。
HTMLの構造やタグを理解して画像やフォームなどの表示をしてみましょう。

男性の画像

マークアップする

マークアップの基本は「HTMLタグ」で囲むことです。
<開始タグ>構造化したい文字</終了タグ>
※終了タグには「/（スラッシュ）」を付けます。
このような状態です（例外あり！）
そして、「HTMLタグ」にはたくさんの種類があって、それぞれに意味があります。一部ご紹介。

<h1>大見出しを意味しています。</h1>
<h2>中見出しを意味しています。</h2>
<p>段落を意味しています。</p>
<ul><li>箇条書きリストを意味しています。</li></ul>

箇条書きリストのようにタグの中にタグを入れ子にする場合もあります。

男性の画像

一部ご紹介しましたが、本当に一部です。
「HTMLリファレンス」と検索してもらえれば、HTMLタグ一覧が閲覧できますが、ざっと100種類以上あります。
HTMLでのマークアップは文章に意味を与えていくだけの作業なので、非常に退屈で地味な作業です。
が、検索上位に表示されるためには必要不可欠な作業なのです。
このサイトは「内部SEO対策」も盛り込んだ内容となっていますので、退屈でも頑張ってマークアップしましょう。

男性の画像

ここで、いろいろなWEBサイトのHTMLソースの確認方法をご紹介しておきます。
「Google Chrome」でお好きなWEBサイトを開いて下さい。
もちろんこのサイトでお試しいただいても大丈夫です。
ブラウザの表示画面のお好きなところで右クリック→「ページのソースを表示」をクリックしてみて下さい。
新しいタブが開いてHTMLソースが表示されます。
このようにして、WEBサイトのHTMLソースを確認する事ができます。
参考にしたいWEBサイトがあったら、そのままコピー＆ペーストして、修正していくのもありです♪

男性の画像

見えない部分を設定する

HTMLでのマークアップは構造を表現するためと説明しましたが、実はブラウザでは表示されない部分があります。
最初に作成した「index.html」の上半分くらいがそうです。
この部分はブラウザには表示されませんが、WEBサイトのいろいろな設定が隠されています。

↓ここから↓
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<meta name="description" content="「サイトの説明文を入力します」">
<meta name="keywords" content="「検索キーワードを２つ入力します（区切りは「,」で）」">
<meta name="author" content="「作者名を入力します」">
<title>「サイトタイトルを入力します」</title>
</head>
↑ここまでの部分です↑

男性の画像

この中には、HTMLのバージョン情報や文字コードの設定情報、スマートフォンやタブレットでの表示方法情報、
WEBサイトの説明や検索されるキーワードや作成者名、WEBサイトのタイトルなど非常に多くの情報を設定する事ができます。
SEO内部対策においても非常に重要な部分になりますので、軽視する事はできません。
このサイトでは詳しくは説明しませんが、非常に重要な部分であると認識して下さい。

男性の画像

全体の構造を作る

最初に作成した「index.html」の中身を見てください。
まずは、全体を<html>タグで囲みます。
次に「見えない部分（ブラウザに表示されない部分）」を<head>タグで囲みます。そして、「ブラウザに表示する部分」を<body>タグで囲めば完成です。

男性の画像

あとは、<head>タグの中にブラウザには表示されない情報を。
<body>タグの中にブラウザに表示する内容を記述してあげるだけです。
ワープロのように日本語を入力してEnterキーを押せば良いという訳ではなく、それぞれに専用のタグが用意されているため、適宜マークアップによるコーディング作業が必要になってきますが、ある程度は同じタグを使用するので、コピー＆ペーストもOKです。
と言うか、使いましょう。
実際のWEBサイト制作でもコピー＆ペーストは大いに使われています。
時間短縮のためにも、
「Ctrl」キー+「c」キーでコピー。
「Ctrl」キー+「v」キーでペースト
というショートカットキーは是非覚えてください。

男性の画像

テーブル（表）を作る

HTMLでのマークアップでよく使われるタグとその使用方法をご紹介します。
まず一つ目がテーブル（表）です。
手書きで文書を作成する時にも、表にして記述する事はあると思います。
HTMLでのマークアップによって、表を表示させることができるのです。
またエディタを開き下記のソースをコピー＆ペーストして下さい。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>テーブル（表）の表示</title>
</head>
<body>
<h1>テーブル（表）を作成してみました。</h1>
<table border="1px">
<tr>
<th scope="col">番号</th>
<th scope="col">名前</th>
<th scope="col">点数</th>
</tr>
<tr>
<td>1</td>
<td>太郎</td>
<td>70点</td>
</tr>
<tr>
<td>2</td>
<td>花子</td>
<td>95点</td>
</tr>
</table>
</body>
</html>

男性の画像

ペーストが出来ましたら、
「ファイル」→「名前を付けて保存」
ファイル名を「table.html」
文字コードを「UTF-8」
にして、デスクトップに保存しましょう。

保存したファイルを右クリック→
「プログラムから開く」→
「Google Chrome」を選択して起動してみて下さい。
「テーブル（表）を作成してみました。」と表示されれば成功です。その下に表が表示できているはずです。
が、テーブルに関しては、ちょっと考える事が必要です。

男性の画像

まず、HTMLタグが3つも入れ子になっています。
最初に<table>タグで囲まれている部分がありますが、これはテーブルの全体を意味します。
次に<tr>タグで囲まれている部分がありますが、これは「行」を意味します。
そして最後に<th>と<td>で囲まれている部分が「列」を意味しています。
ちなみに<th>は表の見出しを。その中の「scope="col"」は見出しが行であると意味しています。
このように、テーブル全体を作成し、1行の中に何個の列を作るか、あらかじめ考えておく必要があります。
さて、では下のような表を作成するにはどのような記述をすれば良いでしょうか？
右側の2行目と3行目が2列に分かれています。
（右側の1行目が結合されています。）

名前	性別・年齢
太郎	男	13才
花子	女	14才

男性の画像

答えは、下記のソースになります。
テーブルの中の一つ一つの枠を「セル」と言いますが、そのセルを縦方向・横方向へ結合する事ができるのです。
横方向につなげる場合には、1番左側のセルの<th>か<td>の中に「colspan="つなげる数値"」と設定してあげます。そして、不要になったセル<th>か<td>は全て削除します。
同様に縦方向につなげる場合には、1番上のセルの<th>か<td>の中に「rowspan="つなげる数値"」と設定してあげます。そして、不要になったセル<th>か<td>は全て削除します。
横につなげる場合は、ソース上ですぐ下の行を削除すれば良いわけですが、縦につなげる場合には注意が必要です。
表示上のすぐ下のセルを削除しないといけないため、ソース上では少し離れた行になります。間違ったセルを削除すると表示が崩れてしまいますので気をつけて下さい。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>テーブル（表）の表示</title>
</head>
<body>
<h1>テーブル（表）のセルを横方向につなげてみました。</h1>
<table border="1px">
<tr>
<th scope="col">名前</th>
<th scope="col" colspan="2">性別・年齢</th>
</tr>
<tr>
<td>太郎</td>
<td>男</td>
<td>13才</td>
</tr>
<tr>
<td>花子</td>
<td>女</td>
<td>14才</td>
</tr>
</table>
</body>
</html>

男性の画像

フォームを作る

次にご紹介するのがフォームです。
WEBサイトには欠かせない存在の1つです。
フォームといっても機能によって多種多様な表現ができます。
WEBサイトからメールを送信するお問い合わせフォームや、アンケートに答えてもらうアンケートフォーム、IDとパスワードを入力してもらう認証フォーム、データベースと連携してテキストや値を保存させて出力する掲示板やブログなどの入力フォームなど。
例をあげるときりがないですが、WEBサイトにおいてフォームがたくさん利用されているという事を認識して下さい。
また、フォームにおいて実際にメールを送信したり、認証させたりする為には、「javascript」や「php」の知識が必要になってきます。このサイトの後半で「javascript」と「php」のご紹介はしていますので、ここではフォームの作り方だけご紹介します。

男性の画像

エディタを開き下記のソースをコピー＆ペーストして下さい。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>フォームの表示</title>
</head>
<body>
<h1>フォームを作成してみました。</h1>
<form method="post" action="#">
<p>
<label for="name">お名前：</label>
<input name="name" type="text">
</p>
<p>性別：
<label>
<input name="seibetsu" type="radio" id="seibetsu_0" value="m" checked="checked" />
男性</label>
<label>
<input type="radio" name="seibetsu" value="f" id="seibetsu_1" />
女性</label>
</p>
<p>使用OS：
<label>
<input name="os" type="checkbox" id="os_0" value="windows7" />
windows7</label>
<label>
<input type="checkbox" name="os" value="vista" id="os_1" />
vista</label>
<label>
<input type="checkbox" name="os" value="xp" id="os_2" />
xp</label>
</p>
<p>
<label for="pc_experience">パソコン歴：</label>
<select name="pc_experience">
<option value="1miman">1年未満</option>
<option value="1kara5" selected="selected">1年～5年</option>
<option value="5kara10">5年～10年</option>
<option value="10ijyou">10年以上</option>
</select>
</p>
<p>
<textarea name="freeans" cols="40" rows="5">自由に意見を記述してください</textarea>
</p>
<p>
<input type="submit" name="btn1" value="送信" />
<input type="reset" name="btn2" value="クリア" />
</p>
</form>
</body>
</html>

男性の画像

ペーストが出来ましたら、
「ファイル」→「名前を付けて保存」
ファイル名を「form.html」
文字コードを「UTF-8」
にして、デスクトップに保存しましょう。

保存したファイルを右クリック→
「プログラムから開く」→
「Google Chrome」を選択して起動してみて下さい。
「フォームを作成してみました。」と表示され、その下に簡単なアンケートフォームが表示されれば成功です。

男性の画像

・・・なんだかいきなりHTMLタグの種類が増えましたね。たった数件の表示なのに、ものすごい量の記述ですし。
HTMLでのマークアップの鬼門ともいうべきフォーム。フォームの部品が自由自在に作れるようになったら、HTMLマスターと言っても良いのではないでしょうか？って思うほどです(笑)
さて、それではフォームの中身について簡単にご紹介していきます。
まずは全体を<form>タグで囲みます。この中に記述された部分がフォーム全体を意味します。
ここでプチ講座。<form>タグの中に記述されている「method」や「action」など、タグの中に記述されるものを「属性」と言います。
HTMLタグもたくさんありますが、属性の種類もたくさんあります。1度に覚えるのは大変ですから、ちょっとずつ意味を理解しましょう。

男性の画像

次に部品作成です。
お名前の右側にある入力スペースの事を「テキストボックス」と言います。テキストや数値などの文字の入力をする事が出来る部品です。
<input type="text">と記述します。<input>タグの中の「type属性」の値を変える事によって、いろいろなフォームの部品を作ることができます。
次に性別の右側にある部品ですが、「ラジオボタン」と言います。複数ある選択肢の中から1つの値を選択できる部品です。
<input type="radio">と記述します。
次に使用OSの右側にある部品ですが、「チェックボックス」と言います。複数ある選択肢の中から複数の値を選択できる部品です。
<input type="checkbox">と記述します。

男性の画像

次にパソコン歴の右側にある部品ですが、「ドロップダウンメニュー」と言います。複数ある選択肢の中から1つの値、もしくは複数の値を選択できる部品です。特徴としては、対象の部品をクリックすると選択肢が表示される点です。
<select>タグで選択肢を囲み、<option>タグで選択肢を増やしていくという記述の仕方です。
最後に「自由に意見を記述してください」となっている部品ですが、「テキストエリア」と言います。テキストボックス同様、テキストや数値などの文字の入力をする事が出来る部品です。
テキストボックスとの違いは、複数行にわたる文章の入力ができる事です。
<textarea cols="横の文字数" rows="縦の文字数">と記述する事によって、テキストエリアの大きさを調整する事もできます。
フォームに関しては、エディタでの手入力は大変です。使いたいと思うフォームを発見したらHTMLソースをコピー＆修正して利用する事をお奨めします。

男性の画像

画像を表示させる

テーブル。フォームとちょっと難しい内容で頭が固くなってしまったかもしれません(笑)
ここでWEBサイト作成の真骨頂。画像の表示方法をご紹介します。
まずは、エディタを開き下記のソースをコピー＆ペーストして下さい。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>画像の表示</title>
</head>
<body>
<h1>画像を表示させてみました。</h1>
<img src="http://riverstar.allsite.me/images/indeximg_04.jpg" alt="可愛い猫の画像">
</body>
</html>

男性の画像

ペーストが出来ましたら、
「ファイル」→「名前を付けて保存」
ファイル名を「image.html」
文字コードを「UTF-8」
にして、デスクトップに保存しましょう。

保存したファイルを右クリック→
「プログラムから開く」→
「Google Chrome」を選択して起動してみて下さい。
「画像を表示させてみました。」と表示されれば成功です。その下に可愛い猫の画像が表示できているはずです。

男性の画像

画像の表示には<img>タグを使います。ただ、このタグには閉じタグは不必要なので覚えておいてください。
そして<img>タグの中に「src属性」と「alt属性」を記述します。
「src属性」は画像のパスを記述します。「alt属性」には画像の代替えテキストを記述します。
パスって何？となると思います。また、猫の画像なんてパソコン内に無いのにどうして表示されたの？という疑問も浮かぶかもしれません。
後者の答えとしては、今回のパスの指定を「絶対パス」という指定方法でインターネットを介して、私のサーバにある画像を読み込ませているからです。
「絶対パス」というのは、ブラウザに入力するhttp://…などのWEBサイトアドレスのように、1から10まで全ての指定をする方法です。
それに対し「相対パス」という指定方法もあります。

男性の画像

WEBサイト制作において、基本的には「相対パス」を使います。
理由を簡単に説明すると、ページや画面を読み込むスピードを速くするためです。
「絶対パス」が全てを指定するものだとすると、「相対パス」というのは、最短距離の指定をしてあげるものだとでも思って下さい。
例えば、ハガキを送りたいとしましょう。
「絶対パス」の場合。ポストに投函→郵便局員が回収→最寄りの郵便局へ→全てのハガキを1か所に集める→送付先の郵便局へ→送付先の郵便局員が配達。
と言ったように、凄く無駄な動きをしています。
一方「相対パス」の場合。ポストに投函→郵便局員が回収→配達。
と実際にはありえませんが、スピーディな動きです(笑)
「絶対パス」と「相対パス」はそんな違いがあるんだと理解してもらえれば嬉しいです。

男性の画像

さて、話が逸れてしまいましたが、実際に「相対パス」で画像の指定をしてブラウザで表示させてみましょう。
まずは、表示させたい画像を用意する必要があります。
ブラウザで開いている「image.html」の画像のエリアで右クリック→「名前を付けて画像を保存」を選択して、デスクトップに「sample.jpg」という名前で保存して下さい。
次に「image.html」をエディタで開き下記の部分を例の通り修正しましょう。

<body>
<h1>画像を表示させてみました。</h1>
<img src="「http://riverstar.allsite.me/images/indeximg_04.jpg」←この部分を「./sample.jpg」に修正して下さい。" alt="可愛い猫の画像">
</body>

男性の画像

修正が終わりましたら、上書き保存（「Ctrlキー」を押しながら「s」キー）をして、再度ブラウザで確認してみて下さい。
先ほどと同様に猫の可愛い画像が表示されていれば成功です。
ちなみにインターネットに接続していない状態でも画像は表示されます。なぜなら、ファイル名という最短距離の指定をしてあげたので、パソコン内での読み込みしかしていないからです。
このように「相対パス」によってパスの指定をしてあげる事はWEBサイト制作において、非常に重要だという事を覚えておいてください。
では、次に、画像を入れるフォルダを作成して、その中に「sample.jpg」画像を保存した場合は、どのようにパスの指定をすれば良いのでしょうか？
デスクトップ上で右クリック→「新規作成」→「フォルダ」→名前を「images」と変更して、その中に「sample.jpg」画像をドラッグ＆ドロップで移動して下さい。

男性の画像

「image.html」をブラウザで開いてみると、画像が表示されなくなってしまったはずです。相対パスの指定が崩れてしまったからです。
ここでプチ講座。画像が表示されていない代わりに「可愛い猫の画像」と表示されているはずです。
これが「alt属性」の効果です。画像が何らかの影響で表示されない場合の、代替えテキストを指定できます。SEO内部対策にも重要になってきますので、「alt属性」は必ず指定してあげましょう。
さて、画像を表示させるためにはどうしたら良いでしょう？
「相対パス」の記述を
「./images/sample.jpg」と修正してあげればきちんと表示されるはずです。

男性の画像

「相対パス」の指定方法は、<img>タグが記述されているファイルからの指定方法になります。
フォルダの中にフォルダを作りファイルを保存する事もあるでしょう。その時には、「/」で区切りフォルダ名を間に入れてあげましょう。
また、フォルダの中にあるhtmlファイルから、別のフォルダの画像ファイルを読み込むような場面も出てきます。
次にデスクトップ上で右クリック→「新規作成」→「フォルダ」→名前を「html」と変更して、その中に「image.html」ファイルをドラッグ＆ドロップで移動して下さい。
「html」フォルダを開き「image.html」をブラウザで確認すると、また画像が表示されなくなります。

男性の画像

この場合、「html」フォルダ内からデスクトップへ行き、そこにある「images」フォルダの中の「sample.jpg」を指定してあげなければ表示されません。
記述方法は
「../images/sample.jpg」となります。
何が違うの？と思われたかもしれません(笑)
違いは1番左の「.（ドット）」が2つになっただけです。
「相対パス」において、1つ上のフォルダを参照する場合「../」と記述するだけです。2つ上のフォルダを参照する場合は「../../」となりますので、合わせて覚えておいてください。
さて、これで画像をどのように保存しても、表示させるための記述は完璧でしょう。
「相対パス」に関しては、画像以外でもたくさん使います。階層構造をきちんと理解しましょう。

男性の画像

リンクの設定をする

次にWEBサイト内において、たくさんページを作成する場合に必要なリンクの設定方法をご紹介します。
サイト内だけではなく、他の人のWEBサイトへリンクする方法や、ページ内の特定の場所へ移動するアンカーリンクという方法もあります。
それぞれ設定方法や、パスの指定方法が異なりますのできちんと使い分けましょう。
まずは、エディタを開き下記のソースをコピー＆ペーストして下さい。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>リンクの設定</title>
</head>
<body>
<h1>リンクの設定をしてみました。</h1>
<a href="http://allsite.me/" target="_blank">横浜でのWEB制作なら阿見孝則へ | AllSite</a>
</body>
</html>

男性の画像

ペーストが出来ましたら、
「ファイル」→「名前を付けて保存」
ファイル名を「link.html」
文字コードを「UTF-8」
にして、デスクトップに保存しましょう。

保存したファイルを右クリック→
「プログラムから開く」→
「Google Chrome」を選択して起動してみて下さい。
「リンクの設定をしてみました。」と表示されれば成功です。その下にクリックできるリンクが表示できているはずです。
今回は、私の自己紹介サイト「AllSite」への「絶対パス」で「新しいタブを開いて表示する」設定にしてみました。

男性の画像

リンクの設定には<a>タグを使います。
文字を<a>タグで囲むことによって、文字の色が変わり、アンダーラインが付き、マウスを文字に合わせるとカーソルの形が変わるようになります。
ただ、<a>タグには必須の「href属性」というものがあり、これを設定しないと、リンクはされません。
試しに下の文字にマウスを合わせてみて下さい。

「href属性を指定していないaタグです。」

CSSで色の設定だけしているので、マウスが乗ると色が変わりますが、本来であれば文字の色も、その他のスタイルも適用されません。
今後学習する「CSS」によって色やアンダーラインをつけたり、カーソルの形を変えるような設定は出来ますが、デフォルトの設定が適用されていないのです。
同様に下の文字にマウスを合わせて下さい。

「href属性を「#（ハッシュ記号）」と指定して付けたaタグです。」

href属性に、パスではありませんが「#」を設定しました。リンク先が決定していない時に、よく使う手法なのですが、リンク先ファイルが完成次第「#」を「パスの記述」に変えます。
文字の色が変わり、アンダーラインが付き、マウスを文字に合わせるとカーソルの形が変わるようになりました。
このCSSの効果を得るためにもaタグとhref属性は、必ずセットで覚えておきましょう。

男性の画像

次にもう一つファイルを作成してみましょう。
エディタを開き下記のソースをコピー＆ペーストして下さい。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>リンクの設定</title>
</head>
<body>
<h1>リンク先のページを作成してみました。</h1>
<a href="./link.html">「link.html」へ戻る</a>
</body>
</html>

男性の画像

「ファイル」→「名前を付けて保存」
ファイル名を「link2.html」
文字コードを「UTF-8」
にして、デスクトップに保存しましょう。

保存したファイルを右クリック→
「プログラムから開く」→
「Google Chrome」を選択して起動してみて下さい。
「リンク先のページを設定してみました。」と表示されれば成功です。その下にクリックできるリンクが表示できているはずです。

男性の画像

今回は、先に作成しておいた「link.html」への「相対パス」で「ページの開き方を指定しない」設定にしてみました。
「画像を表示させる」で説明したとおり、相対パスで指定した場合は、インターネットに接続されていない状態でも、表示が可能になっています。
基本的に、WEBサイトを制作する場合には「相対パス」を使います。
同じ階層にファイルやフォルダがある時には「./ファイル名」、「./フォルダ名/ファイル名」
一つ上の階層にある時には「../ファイル名」、「../フォルダ名/ファイル名」という記述を「画像を表示させる」で説明しましたが、非常に重要なことなので再度記述しておきます。
必ず覚えてください。

男性の画像

最後にもう一つファイルを作成してみましょう。
エディタを開き下記のソースをコピー＆ペーストして下さい。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>アンカーリンクの設定</title>
<style type="text/css">
article {
	height: 600px;
	background-color: #fefefe;
}
article p {
	height: 450px;
	background-color: #ddd;
}
</style>
</head>
<body>
<h1 id="top">アンカーリンクの設定を作成してみました。</h1>
<ul>
<li><a href="#page1">１ページ目へのアンカーリンクです。</a></li>
<li><a href="#page2">２ページ目へのアンカーリンクです。</a></li>
<li><a href="#page3">３ページ目へのアンカーリンクです。</a></li>
<li><a href="#page4">４ページ目へのアンカーリンクです。</a></li>
<li><a href="#page5">５ページ目へのアンカーリンクです。</a></li>
</ul>
<article>
<h2 id="page1">１ページ目</h2>
<p>１ページ目の内容を記述します。</p>
<a href="#top">ページ上部へ戻る</a>
</article>
<article>
<h2 id="page2">２ページ目</h2>
<p>２ページ目の内容を記述します。</p>
<a href="#top">ページ上部へ戻る</a>
</article>
<article>
<h2 id="page3">３ページ目</h2>
<p>３ページ目の内容を記述します。</p>
<a href="#top">ページ上部へ戻る</a>
</article>
<article>
<h2 id="page4">４ページ目</h2>
<p>４ページ目の内容を記述します。</p>
<a href="#top">ページ上部へ戻る</a>
</article>
<article>
<h2 id="page5">５ページ目</h2>
<p>５ページ目の内容を記述します。</p>
<a href="#top">ページ上部へ戻る</a>
</article>
</body>
</html>

男性の画像

「ファイル」→「名前を付けて保存」
ファイル名を「link3.html」
文字コードを「UTF-8」
にして、デスクトップに保存しましょう。

保存したファイルを右クリック→
「プログラムから開く」→
「Google Chrome」を選択して起動してみて下さい。
「アンカーリンクの設定を作成してみました。」と表示されれば成功です。その下に各見出しへのアンカーリンクが設定できているはずです。

男性の画像

上の方に表示されいる、リストの「○ページ目へのアンカーリンクです。」をクリックすると、ページの下の方にある、「○ページ目」がページの最上部に表示されるように画面が瞬間的に切り替わります。
同様に、「ページ上部へ戻る」をクリックすると、ページ最上部の「アンカーリンクの設定を作成してみました。」がページの最上部に表示されるように画面が瞬間的に切り替わります。
この動きが、アンカーリンクの設定による動きです。
多くのWEBサイトで、「メニューをクリックすると各項目が表示される。」といった使われ方をしています。
また、このサイトの後半でご紹介する「jQuery」や「javascript」を利用すると、画面が瞬間的に切り替わるのではなく、ゆっくり動くように設定できたり、フェードイン的な表示をさせたりと、動的なWEBサイトを作ることができます。
このWEBサイトでも、フェードインによるアンカーリンクを設定しています。
ここで、アンカーリンクの設定の仕方をしっかりと覚えて活用しましょう。

男性の画像

今回は、新しいタグと属性が記述されています。
「<style>タグ」と「<article>タグ」と「id属性」です。
「<style>タグ」は、次にご紹介している「CSSで見た目をきれいにする」で詳しくご紹介します。
「<article>タグ」は、HTML5より加わった、新しい構造化タグです。１つのまとまりを構造化するときに使います。詳しくは「HTML5リファレンス」で検索してみてください。
最後に「id属性」ですが、これがアンカーリンクの肝になります。
aタグのhref属性に、「#id名」と指定してあげるだけで良いのです。

男性の画像

「id属性」の値は、そのページで唯一無二の値になります。
一度使用したid名は、同じページで使用してはいけないという決まりごとがあります。
その為、「page1」のように、文字列と数値を組み合わせた値にするのが一般的です。
ちなみに、数字だけのid名や日本語での名前はNGです。
そのid属性を、ページの最上部に表示したいタグの中に埋め込みます。

<h2 id="page1">アンカーリンクの飛び先</h2>

あとは、aタグのhref属性に、「#（ハッシュ）」+「id名」と指定してあげるだけです。

<a href="#page1">アンカーリンクの飛び先へのリンク</a>

ただ、ページの高さがないと、画面が切り替わったように見えないので、それぞれの中身を文章で埋めるか、CSSで高さを指定してあげる必要があります。
リンクの設定は、あらゆるWEBサイトにおいて必須の技術となります。確実に覚えましょう。

男性の画像