- デスクトップに「課題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 (観光・天気のリンクはこれと同じでなくてもよい) と見比べて修正する。
- 「2」フォルダの中にindex.htmlを含む少なくとも2つのhtmlファイルと、cssファイルを作る (新しく作ってもよいし、課題5-1で作ったものをコピーしてもよい)。
- それらのファイルを編集し、オリジナルのページ群を作る。
課題の条件
- 自分・友人などの個人名を使わない (課題まとめのページに載せるため)。
- index.html に、それ以外のすべての自前のページへのリンクをつくる。
- index.html 以外のページそれぞれに、index.html へのリンクをつくる (要するに、index.htmlにトップページ的な役割をさせる)。
- 画像を使う場合は、横幅は800ピクセル以内、高さは600ピクセル以内にする。また、著作権に注意。
- Visual Studio Code, FireFoxのどちらで見てもエラーがない状態にする。
(エラーがあるとVisual Studio Codeでは文字が赤くなり、FireFoxではCtrl+Uで表示させたコードの下に赤い点線がつく)
注意 (この課題限定ではなく、Webページ全般について)
- ファイル名に使う文字は半角のアルファベットと数字、「-（ハイフン）」「.（ピリオド）」「_（アンダーバー）」だけにする。
- 画像とhtmlファイル本文での大文字・小文字を揃える。
参考
文字だけでなく、画像をリンクとして使うこともできる。
例えばここで以下のような設定でボタンの画像を作って「2」フォルダに保存し (仮に「english.gif」とする)、
(自前のenglish.htmlを作ったうえで) index.htmlのリンクの部分を「<a href="english.html"><img src="english.gif"></a>」のように書けば、画像をクリックしてそのページに飛べるようになる。
もちろん、外部ページへのリンクに画像を使うこともできる。
