猫カフェページでリンクを設定しながら、実践的な使い方を理解するのが目的です。
Contents
HTMLを作成して保存
HTMLは「nyanroom」フォルダへ「room.html」で保存します。
nyanroom
room.html（作成するファイル）
index.html
images
画像ファイル
文章をコピーしてHTMLへ貼り付け
「–ページタイトル–」などのヒントは、タグを入力した後で削除しておいてください。
room.htmlの文章
--ページタイトル--
お部屋のご案内 保護猫カフェ/にゃんルーム
--段落でlogo.pngファイルを表示--
にゃんルームのロゴ
--記号リストを使ってnavで囲む--
トップページ
お部屋のご案内
同居猫の紹介
カフェメニュー
保護猫カフェについて
ご予約・お問い合わせ
--見出し1--
お部屋のご案内
--記号リスト--
1Fにゃんルーム
2Fにゃんルーム
3Fにゃんルーム
--見出し2--
1Fにゃんルーム
--段落、改行--
1階にゃんルームは、カフェスペースになっています。
エキゾチックショートヘアーの「ブウくん」をはじめ、人懐っこい4匹の猫ちゃんがが皆さんをお出迎えします。
--段落でroom_1f.jpgを表示--
1Fにゃんルームの画像
--段落、改行--
猫ちゃんたちと一緒に、ゆっくりと読書やお食事、お茶の時間を過ごしてみませんか？
季節に合わせた旬の食材を使ったスイーツやフードも充実しています。
--段落--
カフェメニューはこちら
--見出し3--
1Fの同居猫ちゃん
--記号リストでneko_1.jpgを表示--
ブウくんの画像
--見出し2--
2Fにゃんルーム
--段落、改行--
2階にゃんルームは、リビングルームになっています。
スコティッシュフォールドの兄弟「キイくん」と「ミイちゃん」たちが、皆さんと遊びたくてウズウズしています。
--段落でroom_2f.jpgを表示--
2Fにゃんルームの画像
--段落、改行--
6人まで利用できるリビングルームは、ちょっとしたパーティーなどで利用するなど、グループでも利用できるスペースです。
もちろん、お一人様からでもご利用可能です。
--段落--
お部屋の予約状況はこちらで確認
--見出し3--
2Fの同居猫ちゃん
--記号リストでneko_3.jpg、neko_4.jpgを表示--
キイくんの画像
ミイちゃんの画像
--見出し2--
3Fにゃんルーム
--段落、改行--
3Fにゃんルームは、完全個室のプライベートルームです。
甘えん坊の「ワラビくん」達が、皆さんのお帰りをおとなしく待っています。
--段落でroom_3f.jpgを表示--
3Fにゃんルームの画像
--段落、改行--
お部屋は３部屋あり、テレビや音楽、読書など、ソファやベッドで寛ぎながら、猫ちゃんたちとゆっくりとした時間をお過ごしください。
お部屋の定員は2人までですが、ご自分のお部屋のようにご利用いただける人気のスペースです。
--見出し3--
3Fの同居猫ちゃん
--記号リストでneko_2.jpgを表示--
ワラビくんの画像文章に見出し・段落・改行・リスト・画像をマークアップ
ここまでは復習になります。
作成する時間がない等の場合は、下のソースコードをコピーして進めてもいいでしょう。
room.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>お部屋のご案内 保護猫カフェ/にゃんルーム</title>
</head>
<body>
<p><img src="images/logo.png" alt="にゃんルームのロゴ"></p>
<ul>
<li>トップページ</li>
<li>お部屋のご案内</li>
<li>同居猫の紹介</li>
<li>カフェメニュー</li>
<li>保護猫カフェについて</li>
<li>ご予約・お問い合わせ</li>
</ul>
<h1>お部屋のご案内</h1>
<ul>
<li>1Fにゃんルーム</li>
<li>2Fにゃんルーム</li>
<li>3Fにゃんルーム</li>
</ul>
<h2>1Fにゃんルーム</h2>
<p>1階にゃんルームは、カフェスペースになっています。<br>
エキゾチックショートヘアーの「ブウくん」をはじめ、人懐っこい4匹の猫ちゃんがが皆さんをお出迎えします。</p>
<p><img src="images/room_1f.jpg" alt="1Fにゃんルームの画像"></p>
<p>猫ちゃんたちと一緒に、ゆっくりと読書やお食事、お茶の時間を過ごしてみませんか？<br>
季節に合わせた旬の食材を使ったスイーツやフードも充実しています。</p>
<p>カフェメニューはこちら</p>
<h3>1Fの同居猫ちゃん</h3>
<ul>
<li><img src="images/neko_1.jpg" alt="ブウくんの画像"></li>
</ul>
<h2>2Fにゃんルーム</h2>
<p>2階にゃんルームは、リビングルームになっています。<br>
スコティッシュフォールドの兄弟「キイくん」と「ミイちゃん」たちが、皆さんと遊びたくてウズウズしています。</p>
<p><img src="images/room_2f.jpg" alt="2Fにゃんルームの画像"></p>
<p>6人まで利用できるリビングルームは、ちょっとしたパーティーなどで利用するなど、グループでも利用できるスペースです。<br>
もちろん、お一人様からでもご利用可能です。</p>
<p>お部屋の予約状況はこちらで確認</p>
<h3>2Fの同居猫ちゃん</h3>
<ul>
<li><img src="images/neko_3.jpg" alt="キイくんの画像"></li>
<li><img src="images/neko_4.jpg" alt="ミイちゃんの画像"></li>
</ul>
<h2>3Fにゃんルーム</h2>
<p>3Fにゃんルームは、完全個室のプライベートルームです。<br>
甘えん坊の「ワラビくん」達が、皆さんのお帰りをおとなしく待っています。</p>
<p><img src="images/room_3f.jpg" alt="3Fにゃんルームの画像"></p>
<p>お部屋は３部屋あり、テレビや音楽、読書など、ソファやベッドで寛ぎながら、猫ちゃんたちとゆっくりとした時間をお過ごしください。<br>
お部屋の定員は2人までですが、ご自分のお部屋のようにご利用いただける人気のスペースです。</p>
<h3>3Fの同居猫ちゃん</h3>
<ul>
<li><img src="images/neko_2.jpg" alt="ワラビくんの画像"></li>
</ul>
</body>
</html>
後で必ず作成するようにしましょう
room.htmlとindex.htmlで相互リンク
ナビゲーションメニューの「トップページ」と「お部屋のご案内」に、それぞれリンクの設定をします。
room.htmlからindex.htmlへリンク
<ul>
<li><a href="index.html">トップページ</a></li>
<li>お部屋のご案内</li>
<li>同居猫の紹介</li>
<li>カフェメニュー</li>
<li>保護猫カフェについて</li>
<li>ご予約・お問い合わせ</li>
</ul>index.htmlからroom.htmlへリンク
<ul>
<li>トップページ</li>
<li><a href="room.html">お部屋のご案内</a></li>
<li>同居猫の紹介</li>
<li>カフェメニュー</li>
<li>保護猫カフェについて</li>
<li>ご予約・お問い合わせ</li>
</ul>他のメニュー項目にもリンクを設定する
リンク先がまだ決まっていない場合は「#」で仮のリンク状態にしておきましょう。
※ 「#」はあくまでも仮の状態なので、最終的にはすべてのリンク先を記述する必要があります。
ナビゲーションメニューのリンク設定
「room.html」「index.html」共に同じ設定になります。
<ul>
<li><a href="index.html">トップページ</a></li>
<li><a href="room.html">お部屋のご案内</a></li>
<li><a href="#">同居猫の紹介</a></li>
<li><a href="#">カフェメニュー</a></li>
<li><a href="#">保護猫カフェについて</a></li>
<li><a href="#">ご予約・お問い合わせ</a></li>
</ul>ページ内リンクの設定
リンク先になる特定の場所にid名をつける
<h2 id="room1">1Fにゃんルーム</h2>
〜中略〜
<h2 id="room2">2Fにゃんルーム</h2>
〜中略〜
<h2 id="room3">3Fにゃんルーム</h2>#id名を使ってリンクの設定
<ul>
<li><a href="#room1">1Fにゃんルーム</a></li>
<li><a href="#room2">2Fにゃんルーム</a></li>
<li><a href="#room3">3Fにゃんルーム</a></li>
</ul>index.htmlからroom.htmlの特定の場所へリンクする
<h2>にid名をつけた、リンク先の特定の場所へindex.htmlからリンクをするには、一度room.htmlへリンクしてから、id名がついた場所へ移動するように指定する必要があります。
<h3><a href="cat.html#room3">3Fにゃんルーム</a></h3>
<p><img src="images/room_3f.jpg" alt="3Fにゃんルームの画像"></p>
<p>3Fにゃんルームで待つ猫ちゃんは2匹。<br>
おとなしめの猫ちゃんたちと、ゆったり時間を過ごせます。</p>
<h3><a href="cat.html#room2">2Fにゃんルーム</a></h3>
<p><img src="images/room_2f.jpg" alt="2Fにゃんルームの画像"></p>
<p>元気で遊び盛りの猫ちゃんが4匹。<br>
広々としたリビングで思う存分、猫ちゃんたちと遊べます。</p>
<h3><a href="cat.html#room1">1Fにゃんルーム</a></h3>
<p><img src="images/room_1f.jpg" alt="1Fにゃんルーム画像"></p>
<p>人懐っこい4匹の猫ちゃんがお出迎え。<br>
お食事やお茶を楽しみながら、猫ちゃんとゆっくりできるスペースです。</p>他の文章にもリンクを設定する
他のページへ案内する文章を探して、リンクの設定をしてみましょう。
以下のリンク場所は参考例です。この他にもリンクの文章があるので参考にしてください。
index.html
※ 画像は表示していません。
See the Pen 7-3 by Rayout-gw (@Rayout-gw) on CodePen.
room.html
※ 画像は表示していません。
See the Pen 7-3-2 by Rayout-gw (@Rayout-gw) on CodePen.
ページ内のコンテンツや文章にリンクを設定するのは、使い勝手が良くなるのでとても重要です