ページを増やしてリンクでつなぐ

できあがりイメージ

つくりかた

Step2 HTMLを選んでファイル名を入力する

言語は「HTML」を選び、好きなファイル名を入力して「ファイルを作成」をクリックしましょう。ファイル名は半角英数字で入力します。

Step3 index.htmlの内容をコピーする

画面左のメニューからindex.htmlを開き、コードをすべて選択してコピーします。続いて、Step2で作ったファイルを開き、コピーしたコードをペーストして保存しましょう。

Step4 2ページ目の内容を書きかえる

タイトルや文章を、2ページ目の内容に合わせて自由に書きかえましょう。

Step5 2ページ目へのリンクを追加する

index.htmlの中に、2ページ目に移動するためのリンクを置きましょう。
<a> はリンクを作るタグ、href は「どのページに移動するか」を書くところです。
href には、Step2で作ったファイル名を「.html」まで付けて書きます。

Step6 1ページ目に戻るリンクを追加する

2ページ目にも、1ページ目に戻るためのリンクを置きましょう。
href には「index.html」と書きます。
リンクを置きたい場所に書いて、保存しましょう。

Step7 実際の見え方を確認する

プレビューでリンクをクリックして、ページが切り替わったら完成です。

参考：ページのしくみ

1つのサイトの中には、ページ（HTMLファイル）をいくつも作成できます。
どのページも同じ style.css を使うので、見た目がそろいます。
style.css に header のようなタグの名前で書くと、どのページの header も同じように変わります。ページごとに見た目を変えたいときは、下の図のように class を付けて書き分けましょう。

参考：CSSを2つ使いたいとき

ページごとに見た目を大きく変えたいときは、ページごとにCSSを分けることもできます。

①「ファイルを作成」で「CSS」を選び、好きな名前を付ける
② style.css の中身をすべてコピーして、新しいCSSにペーストする
③ 2ページ目のHTMLの6行目あたりにあるstyle.cssを、新しいCSSのファイル名に書きかえる