- デスクトップに「課題5」フォルダーを作り、その中に「1」「2」フォルダーを作る。
- Visual Studio Codeを起動する。
- 「File」→「Preferences」→「Settings」で設定メニューを出し、「render whitespace」で検索して設定を「all」に変える。
- Visual Studio Codeで「File」→「Open Folder」で「課題5」フォルダーを開く。
- 「課題5」の中の「1」フォルダーの中に「index.html」と「main.css」という2つのファイルを作る。
- index.html に以下のコードをコピー&ペーストして上書き保存する。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <link rel="stylesheet" type="text/css" href="main.css"> <title>課題5-1. ハイパーリンク</title> </head> <body> <span class="big futoji">青森県の観光・天気総合ページ</span> <ul> <li>青森市</li> <li>弘前市</li> <li>八戸市</li> </ul> </body> </html>
- main.css に以下のコードをコピー&ペーストして上書き保存する。
.big { font-size: 2.0em; } .futoji { font-weight: bold; } .jisage { margin-left: 20px; }
- Firefoxでindex.htmlを開く。
上の図のような表示になっていればOK。
main.cssには、前回までの課題でindex.htmlの中に直接書いてあった内容が書かれている。
これをindex.htmlの7行目で読み込んでいる。
わざわざこのように分けたのは、複数のhtmlファイルでこの設定を共有するため。
- main.css と index.htmlにそれぞれ以下のものを追加してブラウザを更新する。
このような表示になればOK。
main.cssの設定の意味はそれぞれ次の通り。- 14行目 : 箇条書きの前のマークを無くす
- 15行目 : 箇条書きの項目を横並びにする
- 19行目 : 箇条書きの項目の上下に10ピクセル、左右に15ピクセルの隙間をつくる
- 20行目 : 箇条書きの項目の右だけに縦の枠を入れる
- 23~25行目 : 箇条書きの最後の項目だけ枠なしにする
- index.htmlに以下のものを追加してブラウザを更新する。
このような表示になればOK。
aタグは別のファイルや外部のページにジャンプするリンクを作るためのもの。
hrefに設定したファイル、URLにジャンプするようになる。
この時点では aomori.html, hirosaki.html, hachinohe.htmlは存在しないので、クリックしても「ファイルが見つかりませんでした」というエラーが出るだけ。
- index.htmlをコピーし、名前をaomori.htmlに変更する。
(index.htmlで右クリック→Copy, 「1」で右クリック→Paste, index copy.htmlで右クリック→Rename)
- aomori.htmlを以下のように書き換え、ブラウザの「青森市」のリンクをクリックする。
(index.htmlの方を書き換えないように注意)
このような表示になればOK。
「観光」「天気」のリンクの「target="_blank"」は、別タブで開くようにするための設定。
- 「青森市 観光」「青森市 天気」などで検索してそれぞれの情報があるページを探し、そのURLを19行目、20行目の「href="」の後ろにコピー&ペーストする。
- ブラウザのaomori.htmlを表示しているタブを更新し、「戻る」で最初のindex.htmlのページに移動できること、「観光」「天気」のリンクをクリックして別タブでそれらのページが表示されることを確認する。
- aomori.htmlをコピーしてhirosaki.htmlとhachinohe.htmlを作る。
- hirosaki.htmlとhachinohe.htmlを書き換え、titleタグと12行目の街の名前の部分をそれに合わせて変更し、19行目と20行目をそれぞれの観光・天気のページへのリンクにする。
このように「青森市|弘前市|八戸市」からそれぞれの街のページにジャンプでき、「観光」「天気」からそれぞれの情報のページが別タブで開けばOK。
- どうしてもうまくいかない場合は完成状態の index.html、 aomori.html、 hirosaki.html、 hachinohe.html、 main.css (観光・天気のリンクはこれと同じでなくてもよい) と見比べて修正する。