課題5 ハイパーリンク

課題5-1

  1. Terapadを起動する。
  2. 「表示」→「オプション」でタブの幅を4文字分にし、タブと空白文字を表示する設定に変更する。


  3. デスクトップに「課題5」フォルダーを作り、さらにその中に「1」フォルダーを作る。
  4. Terapadで「文字/改行コード指定保存」で、文字コードを「UTF-8N」にして、「1」フォルダーの中に「index.html」という名前で保存する。
  5. 以下のコードをコピー&ペーストして上書き保存する。
  6. <!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. ハイパーリンク</title>
    </head>
    <body>
    <span class="header">青森県の観光・天気情報総合ページ</span>
    <div class="main">
    	<ul class="city">
    		<li>
    			青森市
    		</li>
    		<li>
    			弘前市
    		</li>
    	</ul>
    </div>
    </body>
    </html>

  7. 「ファイル」→「新規作成」でもう一枚TeraPadを開く。
  8. 「文字/改行コード指定保存」で、文字コードを「UTF-8N」にして、「1」フォルダーの中に「aomori.html」という名前で保存する。
  9. 以下のコードをコピー&ペーストして上書き保存する。
  10. <!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>青森市の観光・天気情報</title>
    </head>
    <body>
    <span class="header">青森市</span>
    <div class="main">
    	<ul class="city">
    		<li>
    			青森市
    		</li>
    		<li>
    			弘前市
    		</li>
    	</ul>
    	<br>
    	<a class="button" href="" target="_blank">観光</a>
    	<a class="button" href="" target="_blank">天気</a>
    	<br><br>
    	トップページに戻る
    </div>
    </body>
    </html>

  11. 「文字/改行コード指定保存」で、文字コードを「UTF-8N」にして、「1」フォルダーの中に「main.css」という名前で保存する。


  12. 以下のコードをコピー&ペーストして上書き保存する。
  13. /* 画像 */
    img {
    	max-width: 100%; /* 最大幅をブラウザの幅にする */
    }
    /* 見出し用 */
    .header {
    	font-size: 2.0em;/* 2倍サイズ */
    	font-weight: bold;/* 太字 */
    }
    /* 小見出し用 */
    .header2 {
    	font-size: 1.5em;/* 1.5倍サイズ */
    	font-weight: bold;/* 太字 */
    }
    /* 本文用字下げ */
    div.main {
    	margin-left: 10px;/* 左をあける */
    }
    /* 箇条書き(都市)の設定 */
    ul.city {
    	margin-top: 10px;/* 上を10ピクセルあける */
    	padding: 0; /* 上下左右の隙間なし */
    	list-style-type: none; /* 先頭のマークをなくす */
    	display: flex; /* 横並びにする */
    }
    /* 箇条書き(都市)の項目の設定 */
    ul.city li {
    	padding: 10px 15px; /* 上下・左右の隙間 */
    	border-right: solid 2px; /* 右側に実線の枠を入れる */
    	font-size: 1.2em; /* 1.2倍サイズ */
    }
    /* 箇条書き(都市)の最後の項目の設定 */
    ul.city li:last-child {
    	border: none; /* 枠を入れない */
    }
    /* ハイパーリンク(ボタン型) */
    a.button {
    	background-color: #aaffff; /* 背景を薄い水色にする */
    	border: 2px solid #000000; /* 黒枠を入れる */
    	padding: 8px 40px; /* 上下・左右の隙間 */
    	border-radius: 30px; /* 左右を丸める */
    	text-decoration: none; /* アンダーラインを消す */
    }
    /* ハイパーリンク(ボタン型)にカーソルを乗せたとき */
    a.button:hover{
    	background-color: #ffffff; /* 背景を白にする */
    }
    このように「1」フォルダに3つのファイルができていて、TeraPadも3枚開いていればOK。
    以下の説明では行番号で変更箇所を指定するので、先頭に空白行が入っている場合は、詰めて1行目からコードが記述されている状態にしておく。
    今回は複数のhtmlファイルを扱う。どのファイルでもCSSの設定は同じにしたいので、その設定を「main.css」に記述し、htmlファイルからそれを読み込む形にしている。
    index.html, aomori.htmlの6行目の「<link rel="stylesheet" type="text/css" href="main.css">」がそれを読み込む命令。
    今回はCSS部分は初めから完成状態になっている。
    「ul.city」は前回の課題4-2の例3のように、箇条書きの要素を横に並べて縦棒で区切って表示する設定。
    「a.button」はリンクをボタンの形で表示し、マウスカーソルを乗せたときに色が変わるようにする設定。

  14. main.cssを閉じる。
  15. index.htmlをFireFoxで開く。
  16. この時点では「青森市」「弘前市」はまだただの文字になっている。
    それぞれをクリックしたときに青森市のページ、弘前市のページに飛ぶようにしたい。

  17. index.htmlの14行目の「青森市」の左に「<a href="aomori.html">」を、右に「</a>」を記入して上書きしてFireFoxのページを更新し、図のように「青森市」をクリックして aomori.html にジャンプすることを確認する。
  18. 「a」がハイパーリンクのタグ。この href プロパティにリンク先のファイル名やURLを入れると、タグで囲まれたものがリンクになる。

  19. aomori.htmlの24行目の「トップページに戻る」の左右に「<a href="index.html">」「</a>」を記入して上書きしてFireFoxのページを更新し、図のように index.html と aomori.html を行き来できることを確認する。

  20. 「青森市 観光」などで検索して青森市の観光に関わるページを表示させてそのURLをコピーし、aomori.htmlの21行目のhrefプロパティの値に入れて上書き保存してFireFoxのページを更新し、図のように「観光」のボタンを押すとそのページが別タブで開く (aomori.html の方はそのまま) ことを確認する。

  21. 最初から書かれている「 target="_blank"」は、別タブで開くようにするための設定。
    外部リンクだけでなく、自分のページへのリンクでもこれをいれれば別タブで開くようになる。
    必要に応じて普通のリンクと使い分けるとよい。


  22. 観光のページ (外部サイト) のタブを閉じ、さっきと同様にしてaomori.htmlの22行目に必要な情報を追加して、「天気」のボタンを押すとそのページが別タブで開くようにする。


  23. エクスプローラー上で「aomori.html」を選んでCtrl+C, Ctrl+Vの順に押し、できた「aomori - コピー.html」の名前を「hirosaki.html」に変更する。


  24. いままでやったことを踏まえ、図のような表示、動作になるように aomori.html と hirosaki.html を書き換える。
  25. hirosaki.html は弘前のページなので、7行目、10行目の「青森市」のところを「弘前市」にする。

    13~18行目の部分は、aomori.html の方は hirosaki.html に飛ぶリンク、hirosaki.html には aomori.html に飛ぶリンクを作る。
    自分自身へのリンクは書かないでおく。

  26. hirosaki.html の21行目と22行目のリンクを、それぞれ弘前の観光、天気の情報へのページのものに変更し、図のようにそれぞれ対応するページに飛べることを確認したら課題5-1は完了。


  27. index.html の17行目に hirosaki.html へのリンクのための記述を追加し、図のようにそれぞれのページに飛べることを確認したら課題5-1は完了。


  28. どうしてもうまくいかない場合は完成状態の index.htmlaomori.htmlhirosaki.html (観光・天気のリンクはこれと同じでなくてもよい) と見比べて修正する。

課題5-2

  1. 課題5-1の結果表示用のFireFoxのタブ、TeraPadを閉じる。
  2. 「課題5」フォルダの中に「2」フォルダを作る。
  3. 「2」フォルダの中にindex.htmlを含む少なくとも2つのhtmlファイルと、cssファイルを作る (新しく作ってもよいし、課題5-1で作ったものをコピーしてもよい)。
  4. それらのファイルを編集し、オリジナルのページ群を作る。

課題の条件
注意 (この課題限定ではなく、Webページ全般について)
参考
文字だけでなく、画像をリンクとして使うこともできる。
例えばここで以下のような設定でボタンの画像を作って「2」フォルダに保存し (仮に「english.gif」とする)、


(自前のenglish.htmlを作ったうえで) index.htmlのリンクの部分を「<a href="english.html"><img src="english.gif"></a>」のように書けば、画像をクリックしてそのページに飛べるようになる。
もちろん、外部ページへのリンクに画像を使うこともできる。

提出

inserted by FC2 system