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

Size: px

Start display at page:

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

くにもとながだき
7 years ago
Views:

1 Webプログラミングプログラミング1 HTML+CSS (5) (2 章 ) 2013/5/22( 水 ) 演習室の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 講義で使うフォルダ 1/30 2/30 HTMLファイル index.html を開き以下の通り変更して保存してください <h1> 辻堂案内にようこそ</h1> <p class= head > 辻堂案内は辻堂周辺を紹介するサイトです </p> <p class= contents > <a href= shuuhen.html > 辻堂周辺 </a> 辻堂駅と湘南工科大学辻堂の歴史作者について</p> ( 演習 1)リンクを設定する HTMLファイル shuuhen.html を開き以下の通り変更して保存してください <title> 辻堂周辺 </title> </head> <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> ( 演習 1)リンクを設定する(つづきつづき) 3/30 4/30

7 Z: Webプログラミング1 20130522 演習 7 講義で使うフォルダ 1/30 2/30 HTMLファイル index.

2 クリッククリックリンクを張るためのタグタグ <a href= リンク先のURL ファイル名 > ~ </a> リンク先のURLやファイル名に対してリンクを張る同じフォルダ内のファイルにリンク <a href= hoge.html > フォルダ内のファイルにリンク <a href= folder/hoge.html > 隣のフォルダ内のファイルにリンク <a href=../folder/hoge.html> ( 演習 1) 結果リンクを張るためのタグ 5/30 6/30 シート 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> ( 演習 2)リンクスポットの見栄えを調整する ( 演習 2) 結果 7/30 8/30

3 a:link まだクリックしていないリンクスポットのを指定するフォント文字色背景色枠線など a:visited クリック済みのリンクスポットのを指定するフォント文字色背景色枠線など a:hover リンクスポットにマウスポインタが置かれた時のを指定するフォント文字色背景色枠線などリンクの文字の下線をなくすには text-decoration: 装飾指定文字の装飾を指定する underline 文字に下線を引いて表示する overline 文字の上部に線を引いて表示する line-through 文字に取り消し線を引いて表示する none 文字を装飾せずに表示する a:active 選択中のリンクスポットのを指定するフォント文字色背景色枠線などリンクに指定できる 9/30 リンクの文字の下線をなくすには 10/30 HTMLファイル shuuhen.html を開き下記の通り修正してください <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> ( 演習 3)ページ内にリンクを設定する ( 演習 3) 結果 11/30 12/30

a:active 選択中のリンクスポットのを指定するフォント文字色背景色枠線などリンクに指定できる 9/30 リンクの文字の下線をなくすには 10/30 HTMLファイル shuuhen.

4 ページ内のリンクを張るためのタグタグ < 要素名 id= 場所名 > タグ場所名の名前をつけリンク先として利用できるようにする <a href = # 場所名 > ~ </a> 場所名にジャンプするリンクを張る HTMLファイル index.html を開き下記の通り修正してください <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> ページ内のリンクを張るためのタグ 13/30 ( 演習 4) 別のページの特定箇所へリンクを張る 14/30 別のページの特定箇所にリンクを張るためのタグタグ <a href = リンク先のURLやファイル名 # 場所名 > ~ </a> URLやファイル名で指定されたページ内の場所名にジャンプするリンクを張る ( 演習 4) 結果別のページの特定箇所にリンクを張るためのタグ 15/30 16/30

html"> 辻堂周辺 </a> <a href="shuuhen.html#eki"> 辻堂駅 </a>と<a href="shuuhen.html#univ"> 湘南工科大学 </a> <a href="history.

5 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> JPGファイル tsujido.jpg を作業フォルダにコピーしてください ( 演習 5) 画像データを表示する ( 演習 5) 結果 17/30 18/30 画像を表示するためのタグタグ <img src= 画像ファイル名 title= 画像の説明 alt= 画像の代替文字列 width= 横幅 height= 縦幅 > ファイル名で指定された画像を表示する表示サイズを横幅縦幅で指定する画像形式の違い画像形式特長画像を表示するためのタグ色数 JPEG 写真の表示に向く 1,600 万色 PNG イラストの表示に向く 280 兆色 GIF イラストの表示に向く 256 色 19/30 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 を開き下記の通り修正してください <h1> 辻堂案内にようこそ</h1> <p class="head"> 辻堂案内は辻堂周辺を紹介するサイトです <img src="tsujido.jpg" title=" 辻堂 " alt="[ 写真 / 辻堂 ]" width="200" height="155" class="top"></p> 後略 ( 演習 6) 行内の画像データの高さを指定する 20/30

html#univ"> 湘南工科大学 </a> <a href="history.html"> 辻堂の歴史 </a> 作者について</p> JPGファイル tsujido.

6 画像を表示する高さを指定する ( 演習 6) 結果 vertical-align: 高さ位置文字や画像を表示する高さを調整する top 親要素のボックスの上辺に合わせる middle 親要素のボックスの中間に合わせる bottom 親要素のボックスの下辺に合わせる em pxなどの数下方向への移動量を指定する % 親要素との比率で指定する text-top 親要素のフォントの上辺に合わせる text-bottom 親要素のフォントの下辺に合わせる super やや高く表示する sub やや低く表示する baseline 親要素のベースラインに揃える画像を表示する高さを指定する 21/30 22/30 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> <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> ( 演習 7-1) 画像を左右の端に表示する 23/30 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

さを指定する 21/30 22/30 shuuhen.html を下記の通り修正し history.html で保存してください <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.

7 画像を左右の端に表示する float: 表示位置要素を左右に配置して文字を回り込ませる right ブロックを右に配置する left ブロックを左に配置する none ブロックに文字を回り込ませない ( 演習 7-1) 結果画像を左右の端に表示する 25/30 26/30 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) 画像のはみ出しを修正する ( 演習 7-2) 結果 27/30 28/30

honbun img{float:right;margin-left:1em;} p.photo{min-height:180px;} history.html を下記の通り修正してください <p class= honbun photo ><img src= history.

8 左右に配置された要素の下に表示する clear:フロート化された要素の扱いフロート化された要素への回り込みを解除するかどうかを指定する right 右に配置された要素への回り込みを解除する left 左に配置された要素への回り込みを解除する both 配置された要素への回り込みを解除する none 何もしない要素の高さや幅の最大最小を指定する min-height: 要素の最小限の高さ要素の高さの最小を指定する em pxなどの数要素の最小限の高さを数で指定する % 親要素の高さに対する比で指定する min-height, min-width, max-height, max-widthなどがある画像のはみ出しを修正する 29/30 本日の演習内容について復習してください演習内容 HTML+CSS(5)まとめ作成ファイル演習 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 30/30

min-height, min-width, max-height, max-widthなどがある画像のはみ出しを修正する 29/30 本日の演習内容について復習してください演習内容 HTML+CSS(5)まとめ作成ファイル演習 1 リンクを設定する index.html shuuhen.

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

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