演習室の PC のハードディスクには演習で作成したデータは保管できません各 PC のネットワーク接続ショートカットからメディア情報センターのサーバーにアクセスしてください演習名使用するフォルダ演習 1 Z: Web データ管理演習 1 演習 2 Z: Web データ管

Size: px

Start display at page:

Download "演習室の PC のハードディスクには演習で作成したデータは保管できません各 PC のネットワーク接続ショートカットからメディア情報センターのサーバーにアクセスしてください演習名使用するフォルダ演習 1 Z: Web データ管理演習 1 演習 2 Z: Web データ管"

みちしげねぎたや
5 years ago
Views:

1 Web データ管理 HTML+CSS (5) (2 章 ) 2011/11/2( 水 ) 1/30

2 演習室の PC のハードディスクには演習で作成したデータは保管できません各 PC のネットワーク接続ショートカットからメディア情報センターのサーバーにアクセスしてください演習名使用するフォルダ演習 1 Z: Web データ管理演習 1 演習 2 Z: Web データ管理演習 2 演習 3 Z: Web データ管理演習 3 演習 4 Z: Web データ管理演習 4 演習 5 Z: Web データ管理演習 5 演習 6 Z: Web データ管理演習 6 演習 7 Z: Web データ管理演習 7 講義で使うフォルダ 2/30

3 HTML ファイル index.html を開き以下の通り変更して保存してください前略 <body> <h1> 辻堂案内にようこそ </h1> <p class= head > 辻堂案内は辻堂周辺を紹介するサイトです </p> <p class= contents > <a href= shuuhen.html > 辻堂周辺 </a> 辻堂駅と湘南工科大学辻堂の歴史作者について </p> </body> </html> ( 演習 1) リンクを設定する 3/30

4 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> ( 演習 1) リンクを設定する ( つづき ) 4/30

5 クリッククリック ( 演習 1) 結果 5/30

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

7 スタイルシート tsujido.css を下記の通り修正してください前略.honbun{background-color:#fff;line-height:1.5;padding:0.8em;text-indent:1em;margin:0;}.shoukai{border-left:solid 20px #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:solid 1px #f00;} HTML ファイル index.html を下記の通り修正してください前略 <p class="head"> 辻堂案内は辻堂周辺を紹介するサイトです </p> <p class="contents"><a href="shuuhen.html"> 辻堂周辺 </a> 辻堂駅と湘南工科大学 <a href="history.html"> 辻堂の歴史 </a> 作者について </p> </body> </html> ( 演習 2) リンクスポットの見栄えを調整する 7/30

8 ( 演習 2) 結果 8/30

9 スタイル機能値スタイル機能値スタイル機能値スタイル機能値 a:link まだクリックしていないリンクスポットのスタイルを指定するフォント文字色背景色枠線など a:visited クリック済みのリンクスポットのスタイルを指定するフォント文字色背景色枠線など a:hover リンクスポットにマウスポインタが置かれた時のスタイルを指定するフォント文字色背景色枠線など a:active 選択中のリンクスポットのスタイルを指定するフォント文字色背景色枠線などリンクに指定できるスタイル 9/30

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

11 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) ページ内にリンクを設定する 11/30

12 ( 演習 3) 結果 12/30

13 ページ内のリンクを張るためのタグタグ < 要素名 id= 場所名 > 機能場所名の名前をつけリンク先として利用できるようにするタグ機能 <a href = # 場所名 > ~ </a> 場所名にジャンプするリンクを張るページ内のリンクを張るためのタグ 13/30

14 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) 別のページの特定箇所へリンクを張る 14/30

15 ( 演習 4) 結果 15/30

16 別のページの特定箇所にリンクを張るためのタグタグ <a href = リンク先の URL やファイル名 # 場所名 > ~ </a> 機能 URL やファイル名で指定されたページ内の場所名にジャンプするリンクを張る別のページの特定箇所にリンクを張るためのタグ 16/30

17 HTML ファイル index.html を開き下記の通り修正してください前略 <h1> 辻堂案内にようこそ </h1> <p class="head"> 辻堂案内は辻堂周辺を紹介するサイトです <img src="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> JPG ファイル tsujido.jpg を作業フォルダにコピーしてください ( 演習 5) 画像データを表示する 17/30

18 ( 演習 5) 結果 18/30

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

20 tsujido.css を開き下記の通り修正してください前略 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;} index.html を開き下記の通り修正してください前略 <body> <h1> 辻堂案内にようこそ </h1> <p class="head"> 辻堂案内は辻堂周辺を紹介するサイトです <img src="tsujido.jpg" title=" 辻堂 " alt="[ 写真 / 辻堂 ]" width="200" height="155" class="top"></p> 後略 ( 演習 6) 行内の画像データの高さを指定する 20/30

21 ( 演習 6) 結果 21/30

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

23 shuuhen.html を下記の通り修正し history.html で保存してください <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=shift_jis"> <meta http-equiv="content-style-type" content="text/css"> <link rel="stylesheet" href="tsujido.css" type="text/css"> <title> 辻堂の歴史 </title> </head> <body> <h1> 辻堂が辻堂になるまで </h1> <div class="shoukai"> <h2> 辻堂の名前の由来 </h2> <p class= honbun ><img src= history.jpg width= 240 height= 180 title= お寺 alt= [ 写真 / お寺 ] > 村の中心 ( 現在の辻堂元町 ) の鎌倉道との十字路に寺があり四ッ辻のお堂から転じて辻堂となったといわれている十字路の場所は諸説ある ( 写真は宝珠寺 ) </p> </div> <p class="contents"><a href="index.html"> トップページへ戻る </a></p> </body> </html> ( 演習 7-1) 画像を左右の端に表示する 23/30

24 tsujido.css を開き下記の通り修正してください前略 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.honbun img{float:right;margin-left:1em;} JPG ファイル history.jpg を作業フォルダにコピーしてください ( 演習 7-1) 画像を左右の端に表示する ( つづき ) 24/30

25 ( 演習 7-1) 結果 25/30

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

27 tsujido.css を開き下記の通り修正してください前略.contents{background-color:#fc6;padding:0.5em;margin:0;clear:both;} 中略 img.top{vertical-align:middle;} p.honbun img{float:right;margin-left:1em;} p.photo{min-height:180px;} history.html を下記の通り修正してください前略 <p class= honbun photo ><img src= history.jpg width= 240 height= 180 title= お寺 alt= [ 写真 / お寺 ] > 村の中心 ( 現在の辻堂元町 ) の鎌倉道との十字路に寺があり四ッ辻のお堂から転じて辻堂となったといわれている十字路の場所は諸説ある ( 写真は宝珠寺 ) </p> 後略 ( 演習 7-2) 画像のはみ出しを修正する 27/30

28 ( 演習 7-2) 結果 28/30

29 左右に配置された要素の下に表示するスタイルスタイル機能値 clear: フロート化された要素の扱いフロート化された要素への回り込みを解除するかどうかを指定する right 右に配置された要素への回り込みを解除する left 左に配置された要素への回り込みを解除する both 配置された要素への回り込みを解除する none 何もしない要素の高さや幅の最大値最小値を指定するスタイルスタイル機能値 min-height: 要素の最小限の高さ要素の高さの最小値を指定する em px などの数値要素の最小限の高さを数値で指定する % 親要素の高さに対する比で指定する min-height, min-width, max-height, max-width などがある画像のはみ出しを修正するスタイル 29/30

30 本日の演習内容について復習してください演習内容作成ファイル演習 1 リンクを設定する index.html shuuhen.html 演習 2 リンクスポットの見栄えを調整する index.html tsujido.css 演習 3 ページ内にリンクを設定する shuuhen.html 演習 4 別のページの特定箇所へリンクを張る index.html 演習 5 画像データを表示する index.html 演習 6 行内の画像データの高さを指定する index.html tsujido.css 演習 7 画像を左右の端に表示する history.html tsujido.css HTML+CSS(5) まとめ 30/30

Web データ管理 HTML+CSS (6) (2 章 ) 2011/11/9( 水 ) 湘南工科大学講義資料 Web データ管理 (2011) 阿倍 1/21

Web データ管理 HTML+CSS (6) (2 章 ) 2011/11/9( 水 ) 1/21 演習室の PC のハードディスクには演習で作成したデータは保管できません各 PC のネットワーク接続ショートカットからメディア情報センターのサーバーにアクセスしてください (Z ドライブとして使用できます ) 演習名使用するフォルダ演習 1 Z: Web データ管理 20111109 演習