Webプログラミング プログラミング1 HTML+CSS (5) (2 章 ) 2013/5/22( 水 ) 演 習 室 の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/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
クリック クリック リンクを 張 るためのタグ タグ <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
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
ページ 内 のリンクを 張 るためのタグ タグ < 要 素 名 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ファイル 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
画 像 を 表 示 する 高 さを 指 定 する ( 演 習 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" "http://www.w3.org/tr/html4/strict.dtd"> <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
画 像 を 左 右 の 端 に 表 示 する 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
左 右 に 配 置 された 要 素 の 下 に 表 示 する 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