クリッククリックリンクを張るためのタグタグ <a href= リンク先のURL ファイル名 > ~ </a> リンク先のURLやファイル名に対してリンクを張る同じフォルダ内のファイルにリンク <a href= hoge.html > フォルダ内のファイルに

(1)

Web

Webプログラミング

プログラミング

プログラミング1

1

HTML+CSS (5)(2章) 2013/5/22(水) 1/30 湘南工科大学講義資料Webプログラミング1(2013) 阿倍

講義で使うフォルダ

2/30 湘南工科大学講義資料Webプログラミング1(2013) 阿倍

演習室のPCのハードディスクには演習で作成したデータは

保管できません。

各PCの「ネットワーク接続」ショートカットからメディア情報セ

ンターのサーバーにアクセスしてください。

演習名演習名演習名演習名使用するフォルダ使用するフォルダ使用するフォルダ使用するフォルダ演習1 Z:¥Webプログラミング1¥20130522¥演習1¥ 演習2 Z:¥Webプログラミング1¥20130522¥演習2¥ 演習3 Z:¥Webプログラミング1¥20130522¥演習3¥ 演習4 Z:¥Webプログラミング1¥20130522¥演習4¥ 演習5 Z:¥Webプログラミング1¥20130522¥演習5¥ 演習6 Z:¥Webプログラミング1¥20130522¥演習6¥ 演習7 Z:¥Webプログラミング1¥20130522¥演習7¥

(

(演習

演習

演習1)

1)

1)リンクを設定する

リンクを設定する

HTMLファイル「index.html」を開き、以下の通り変更して保存

してください

前略 <body> <h1>辻堂案内にようこそ</h1> <p class=“head”>辻堂案内は辻堂周辺を紹介するサイトです。</p>

<p class=“contents”> <a href=“shuuhen.html”>辻堂周辺</a>・・・辻堂駅と湘

南工科大学・辻堂の歴史・作者について</p> </body> </html>

(

(演習

演習

演習1)

1)

1)リンクを設定する

リンクを設定する(

リンクを設定する

(

(つづき

つづき

つづき)

)

HTMLファイル「shuuhen.html」を開き、以下の通り変更して保存してください前略 <title>辻堂周辺</title> </head> <body> <h1>辻堂の周辺にあるもの</h1> <div class=“shoukai”> <h2>辻堂駅</h2> <p class=“honbun”>辻堂駅は大正5年12月1日に開業したJR東日本東海道線の駅です。出口は、北口、南口、西口の3つがあります。</p> </div> <div class=“shoukai”> <h2>湘南工科大学</h2> <p class=“honbun”>湘南工科大学は1963年に創立した工学部のみの単科大学で、機械工学科、電気電子工学科、情報工学科、コンピュータ応用学科、コンピュータデザイン学科、人間環境学科の6学科から構成されます。</p> </div> <p class=“contents”><a href=“index.html”>トップページへ戻る</a></p> </body> </html>

(2)

(

(演習

演習

演習1)

1)

1)結果

結果

クリック

リンクを張るためのタグ

同じフォルダ内のファイルにリンク

<a href=“hoge.html”>

フォルダ内のファイルにリンク

<a href=“folder/hoge.html”>

隣のフォルダ内のファイルにリンク

<a href=“../folder/hoge.html>

タグ <ahref=“リンク先のURL、ファイル名”> ～</a> 機能リンク先のURLやファイル名に対してリンクを張る

(

(演習

演習

演習2)

2)

2)リンクスポットの見栄えを調整する

2)

リンクスポットの見栄えを調整する

スタイルシート「tsujido.css」を下記の通り修正してください HTMLファイル「index.html」を下記の通り修正してください前略 .honbun{background-color:#fff;line-height:1.5;padding:0.8em;text-indent:1em;margin:0;} .shoukai{border-left:solid20px #ccc;margin:1em 0;} a{text-decoration:none;} a:link{color:#170;text-decoration:underline;} a:visited{color:#3a0;} a:hover{color:#fff;background-color:#f80;font-weight:bold;} a:active{color:#f00;background-color:#ffa;font-weight:bold;border:solid1px #f00;} 前略 <p class="head">辻堂案内は辻堂周辺を紹介するサイトです。</p> <p class="contents"><a href="shuuhen.html">辻堂周辺</a>・・・辻堂駅と湘南工科大学・<a href="history.html">辻堂の歴史</a>・作者について</p>

</body> </html>

(

(演習

演習

演習2)

2)

2)結果

結果

(3)

リンクに指定できるスタイル

スタイル a:linka:linka:linka:link

機能まだクリックしていないリンクスポットのスタイルを指定する値フォント、文字色、背景色、枠線など

スタイル a:visiteda:visiteda:visiteda:visited

機能クリック済みのリンクスポットのスタイルを指定する値フォント、文字色、背景色、枠線など

スタイル a:hovera:hovera:hovera:hover

機能リンクスポットにマウスポインタが置かれた時のスタイルを指定する

値フォント、文字色、背景色、枠線などスタイル a:activea:activea:activea:active

機能選択中のリンクスポットのスタイルを指定する値フォント、文字色、背景色、枠線など

リンクの文字の下線をなくすには

スタイル text-decoration:装飾指定機能文字の装飾を指定する値 underline・・・・・文字に下線を引いて表示する overline・・・・・文字の上部に線を引いて表示する line-through・・・・・文字に取り消し線を引いて表示する none・・・・・文字を装飾せずに表示する

(

(演習

演習

演習3)

3)

3)ページ内にリンクを設定する

ページ内にリンクを設定する

HTMLファイル「shuuhen.html」を開き、下記の通り修正してください前略 <body> <h1>辻堂の周辺にあるもの</h1>

<p class="honbun"><a href="#eki">辻堂駅</a>／<a href="#univ">湘南工科大学 </a></p> <div class="shoukai"> <h2 id="eki">辻堂駅</h2> <p class=“honbun”>辻堂駅は大正5年12月1日に開業したJR東日本東海道線の駅です。出口は、北口、南口、西口の3つがあります。</p></div> <div class="shoukai"> <h2 id="univ">湘南工科大学</h2> <p class=“honbun”>湘南工科大学は1963年に創立した工学部のみの単科大学で、機械工学科、電気電子工学科、情報工学科、コンピュータ応用学科、コンピュータデザイン学科、人間環境学科の6学科から構成されます。</p></div> <p class="contents"><a href="index.html">トップページへ戻る</a></p> </body> </html>

(

(演習

演習

演習3)

3)

3)結果

結果

(4)

ページ内のリンクを張るためのタグ

13/30 湘南工科大学講義資料Webプログラミング1(2013) 阿倍タグ <要素名id=“場所名”> 機能「場所名」の名前をつけ、リンク先として利用できるようにする

ページ内のリンクを張るためのタグ

タグ <ahref=“#場所名”> ～ </a> 機能「場所名」にジャンプするリンクを張る

(

(演習

演習

演習4)

4)

4)別のページの特定箇所へリンクを張る

別のページの特定箇所へリンクを張る

14/30 湘南工科大学講義資料Webプログラミング1(2013) 阿倍 HTMLファイル「index.html」を開き、下記の通り修正してください前略 <body> <h1>辻堂案内にようこそ</h1> <p class="head">辻堂案内は辻堂周辺を紹介するサイトです。</p> <p class="contents"><a href="shuuhen.html">辻堂周辺</a>・・・<a href="shuuhen.html#eki">辻堂駅</a>と<a href="shuuhen.html#univ">

湘南工科大学</a>・<a href="history.html">辻堂の歴史</a>・作者について</p> </body> </html>

(

(演習

演習

演習4)

4)

4)結果

結果

別のページの特定箇所にリンクを張るためのタ

グ

別のページの特定箇所にリンクを張るためのタグ

タグ <ahref=“リンク先のURLやファイル名#場所名”> ～ </a>

機能「URLやファイル名」で指定されたページ内の「場所名」にジャンプするリンクを張る

(5)

(

(演習

演習

演習5)

5)

5)画像データを表示する

5)

画像データを表示する

17/30 湘南工科大学講義資料Webプログラミング1(2013) 阿倍 HTMLファイル「index.html」を開き、下記の通り修正してください JPGファイル「tsujido.jpg」を作業フォルダにコピーしてください前略 <h1>辻堂案内にようこそ</h1> <p class="head">辻堂案内は辻堂周辺を紹介するサイト

です。<imgsrc="tsujido.jpg" title="辻堂" alt="[写真／辻堂]" width="200" height="155"></p> <p class="contents"><a href="shuuhen.html">辻堂周辺</a>・・・<a href="shuuhen.html#eki">辻堂駅</a>と<a href="shuuhen.html#univ">湘南工科大学</a>・<a href="history.html">辻堂の歴史</a>・作者について</p> </body> </html>

(

(演習

演習

演習5)

5)

5)結果

結果

画像を表示するためのタグ

画像形式の違い

タグ <imgsrc=“画像ファイル名” title=“画像の説明” alt=“画像の代替文字列” width=“横幅” height=“縦幅”> 機能「ファイル名」で指定された画像を表示する表示サイズを「横幅」、「縦幅」で指定する画像形式画像形式画像形式画像形式特長特長特長特長色数色数色数色数 JPEG 写真の表示に向く 1,600万色 PNG イラストの表示に向く 280兆色 GIF イラストの表示に向く 256色

(

(演習

演習

演習6)

6)

6)行内の画像データの高さを指定する

行内の画像データの高さを指定する

「tsujido.css」を開き、下記の通り修正してください「index.html」を開き、下記の通り修正してください前略 a{text-decoration:none;} a:link{color:#170;text-decoration:underline;} a:visited{color:#3a0;} a:hover{color:#fff;background-color:#f80;font-weight:bold;} a:active{color:#f00;background-color:#ffa;font-weight:bold;border:solid1px #f00;} img.top{vertical-align:middle;} 前略 <body> <h1>辻堂案内にようこそ</h1> <p class="head">辻堂案内は辻堂周辺を紹介するサイト

です。<imgsrc="tsujido.jpg" title="辻堂" alt="[写真／辻堂]" width="200"

height="155" class="top"></p> 後略

(6)

(

(演習

演習

演習6)

6)

6)結果

結果

画像を表示する高さを指定するスタイル

スタイル vertical-align:高さ位置機能文字や画像を表示する高さを調整する値 top・・・親要素のボックスの上辺に合わせる middle・・・親要素のボックスの中間に合わせる bottom・・・親要素のボックスの下辺に合わせる em、pxなどの数値・・・下方向への移動量を指定する %・・・親要素との比率で指定する text-top・・・親要素のフォントの上辺に合わせる text-bottom・・・親要素のフォントの下辺に合わせる super・・・やや高く表示する sub・・・やや低く表示する baseline・・・親要素のベースラインに揃える

(

(演習

演習

演習7

7 7-

7 -

-

-1)

1)

1)画像を左右の端に表示する

画像を左右の端に表示する

「shuuhen.html」を下記の通り修正し、「history.html」で保存してください

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<p class=“honbun”><imgsrc=“history.jpg” width=“240” height=“180” title=“お寺” alt=“[写真／お寺]”> 村の中心(現在の辻堂元町)の鎌倉道との十字路に寺があり、「四ッ辻のお堂」から転じて辻堂となったといわれている。十字路の場所は、諸説ある(写真は宝珠寺)。</p> </div> <p class="contents"><a href="index.html">トップページへ戻る</a></p> </body> </html>

(

(演習

演習

演習7

7

7 7-

-

-1)

1)画像を左右の端に表示する

1)

画像を左右の端に表示する

画像を左右の端に表示する(

(

(つづき

つづき

つづき)

)

「tsujido.css」を開き、下記の通り修正してください JPGファイル「history.jpg」を作業フォルダにコピーしてください前略 a{text-decoration:none;} a:link{color:#170;text-decoration:underline;} a:visited{color:#3a0;} a:hover{color:#fff;background-color:#f80;font-weight:bold;} a:active{color:#f00;background-color:#ffa;font-weight:bold;border:solid 1px #f00;} img.top{vertical-align:middle;} p.honbunimg{float:right;margin-left:1em;}

(7)

(

(演習

演習

演習7

7

7 7-

-

-1)

1)

1)結果

結果

画像を左右の端に表示するスタイル

スタイル float:表示位置機能要素を左右に配置して、文字を回り込ませる値 right・・・ブロックを右に配置する left・・・ブロックを左に配置する none・・・ブロックに文字を回り込ませない

(

(演習

演習

演習7

7 7-

7 -

-

-2)

2)

2)画像のはみ出しを修正する

画像のはみ出しを修正する

「tsujido.css」を開き、下記の通り修正してください「history.html」を下記の通り修正してください前略 .contents{background-color:#fc6;padding:0.5em;margin:0;clear:both;} 中略 img.top{vertical-align:middle;} p.honbunimg{float:right;margin-left:1em;} p.photo{min-height:180px;} 前略

<p class=“honbunphoto”><imgsrc=“history.jpg” width=“240”

height=“180” title=“お寺” alt=“[写真／お寺]”> 村の中心(現在の辻堂元町)の鎌倉道との十字路に寺があり、「四ッ辻のお堂」から転じて辻堂となったといわれている。十字路の場所は、諸説ある(写真は宝珠寺)。</p> 後略

(

(演習

演習

演習7

7

7 7-

-

-2)

2)

2)結果

2)

結果

(8)

画像のはみ出しを修正するスタイル

29/30 湘南工科大学講義資料Webプログラミング1(2013) 阿倍左右に配置された要素の下に表示するスタイル要素の高さや幅の最大値、最小値を指定するスタイル

min-height, min-width, max-height, max-widthなどがある

スタイル clear:フロート化された要素の扱い機能フロート化された要素への回り込みを解除するかどうかを指定する値 right・・・右に配置された要素への回り込みを解除する left・・・左に配置された要素への回り込みを解除する both・・・配置された要素への回り込みを解除する none・・・何もしないスタイル min-height:要素の最小限の高さ機能要素の高さの最小値を指定する値 em、pxなどの数値・・・要素の最小限の高さを数値で指定する %・・・親要素の高さに対する比で指定する

HTML+CSS(5)

HTML+CSS(5)まとめ

まとめ

本日の演習内容について復習してください

演習演習演習演習内容内容内容内容作成ファイル作成ファイル作成ファイル作成ファイル演習１リンクを設定する index.html shuuhen.html 演習２リンクスポットの見栄えを調整する index.html tsujido.css 演習３ページ内にリンクを設定する shuuhen.html 演習４別のページの特定箇所へリンクを張る index.html 演習５画像データを表示する index.html 演習６行内の画像データの高さを指定する index.html tsujido.css 演習７画像を左右の端に表示する history.html tsujido.css