メモ

メモを入力してみよう!


Lesson 04「リンクを使って画面を切り替えよう!」

学習概要

aタグを使ってリンクを作ってみよう!
画面遷移(画面の切替)ができるようになるよ!

補足

■編集したファイルが表示されない場合
ブラウザの「キャッシュ」機能によって編集前の古いファイル内容で表示されている可能性があります。
ブラウザのキャッシュをクリアするか、ブラウザの「更新」ボタンを何度か連打すると新しいファイル内容がブラウザに読み込まれて表示されます。
それでも、表示されない場合はファイル内に書いたコードに原因があります。

この練習でわからない所を質問する※部活外の質問はできません

既に出ている同じ内容の質問やレッスン以外の質問には回答致しません。こちらから既出の質問・回答をワード検索できます。(仮入部部員は利用不可)

ログインが必要です

この練習への質問一覧

ログインが必要です

Lesson 04「リンクを使って画面を切り替えよう!」の内容※SEO用のため読めません

それではこれからリンクを使った画面の切り替えを行っていきたいと思います。

まず前回作った [ test ]フォルダを開き、その中に新しいフォルダを作成します。フォルダを作成したら前回と同じく最初に作った [ index.html ]ファイルを中にコピーします。今回は2つコピーしましょう。コピーしたファイルを開くと最初に作ったホームページが表示されるはずです。

ではここからファイルを編集していきましょう。
まずは1ページ目のファイルを編集していきます。画面に表示された際に1ページ目とわかるように適当に編集をしていきましょう。編集が終わったら次のページに移るためのリンクを作っていきます。リンクを表示させるには タグ を使います。
そしてhref属性というもので次のページを表示させるためのファイルのパスを指定します。これで1ページ目のリンクが完成しました。
次に2ページ目を作っていきます。コピーした2つ目のファイルの名前を適当なものへ変更します。今回は [ sample.html ] とします。こちらのファイルも先ほどと同じく2ページ目と分かるように編集していきましょう。
編集が終わったら同じく
タグを使い、前のページへ戻るリンクを作ります。これで2ページ目のファイルの完成です。
完成したファイルを開いてみましょう。それぞれ1ページ目と2ページ目の画面が完成しました。1ページ目の画面から [ 次ページへ ] を押すと2ページ目の画面が表示されます。表示された2ページ目の [ マイページへ ]を押すと1ページ目の画面が表示されます。これで画面の切り替えを行うことができました。

ここからパスについて前回の画像の時と同じく解説をしていきたいと思います。
タグの中にはhref属性というものを使って次の画面のパスを指定しています。パスというのは場所のことでしたけれども今回のパスは [ sample.html ] なので [ index.html ] を表示させるHTMLファイルと同じ場所にある [ sample.html ] ファイルにリンクさせますよ、それを表示させますよ、という形になります。
2ページ目も同じく [ sample.html ] ファイルから見た時の同じ場所にある [ index.html ]ファイルを表示させてますよ、という形で指定がされています。なので例えばこの [ sample.html ] ファイル、これが [ index.html ]ファイルと同じ場所にある [ link ] というフォルダの中にあったとします。そうすると指定しているパスと実際の場所が違うので画面が表示されなくなります。

次ページへのリンクをしてみても指定したパス、指定したファイルの場所には実際にはファイルはありませんよという形で見つかりませんでした、となります。なのでこういう場合の1ページ目のリンクには、パスをフォルダの中にある [ sample.html ] ファイルとしたいので [ link/sample.html ] というパスにすることでリンクをフォルダの中にある [ sample.html ] ファイルという形になります。これでリンクに指定したパスと実際のファイルの場所があるので、[ 次ページへ ] を押すとちゃんとページが表示されます。
このリンクのパスには外部のホームページのURLを指定することもできます。例えばこのパスにhttpから始まるGoogleのホームページのURLアドレスを入れたとします。それで次ページを押してみると外部のGoogleのホームページが表示されるということになります。