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

Size: px

Start display at page:

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

きょうすけくぬぎ
4 years ago
Views:

1 Web データ管理 HTML+CSS (6) (2 章 ) 2011/11/9( 水 ) 1/21

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

3 HTML ファイル shuuhen.html を開き以下の通り変更して保存してください前略 <p class= honbun > 湘南工科大学は 1963 年に創立した工学部のみの単科大学で機械工学科電気電子工学科情報工学科コンピュータ応用学科コンピュータデザイン学科人間環境学科の 6 学科から構成されます </p> <table> <tr><th> 機械工学科 </th><td> 機械の開発設計生産組立管理まで多彩な視点でモノづくりの技術を学ぶ </td></tr> <tr><th> 電気電子工学科 </th><td> エコ情報通信を支え生活を豊かにする電気と電子の技術を学ぶ </td></tr> <tr><th> 情報工学科 </th><td> すべてはプログラミングからはじまる企画立案開発ができる情報エンジニアへ </td></tr> <tr><th> コンピュータ応用学科 </th><td> みんなで力をあわせて進めるモノづくり社会で発揮できる実践的な創造力を習得 </td></tr> <tr><th> コンピュータデザイン学科 </th><td> 感性を活かしたデザインと設計技術で機能性や使いやすさを形にする </td></tr> <tr><th> 人間環境学科 </th><td> 文系理系双方から総合的に学びテクノロジーと創造力を身につける </td></tr> </table> </div> ( 演習 1) 表を作成する 3/21

4 ( 演習 1) 結果 4/21

5 表を定義するタグタグ機能タグ機能タグ機能タグ機能 <table> ~ </table> 表を定義する <tr> ~ </tr> 表の行を定義する <td> ~ </td> 表の項目を定義する <th> ~ </th> 表の項目の見出しを定義する表を定義するタグ 5/21

6 スタイルシート tsujido.css を下記の通り修正してください前略.shoukai{border-left:solid 20px #ccc;margin:1em 0;background-color:#fff;} 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;} p.photo{min-height:180px;} table{margin:auto;border:solid 2px #000;border-collapse:collapse;width:75%;} th,td{height:3em;border:solid 1px #000;padding:0.5em;} th{background-color:#ffe5a3;width:10em;} td{vertical-align:middle;} ( 演習 2) 表にスタイルを適用する 6/21

7 ( 演習 2) 結果 7/21

8 スタイル機能値 border-collapse: 枠線の表示方法表の項目同士を離して表示するかどうか指定する collapse 表の項目を離さずに表示する separate 表の項目を離して表示する (default) スタイル機能値 vertical-align: 高さ位置の指定行の中で文字や画像を表示する高さを指定する baseline 1 行目のベースラインが揃うように調整する (default) top 上辺に揃えて表示する middle 中央に揃えて表示する bottom 下辺に揃えて表示する表に指定できるスタイル 8/21

9 HTML ファイル shuuhen.html を開き下記の通り修正してください前略 <table> <caption> 湘南工科大学工学部の学科一覧 </caption> <tr><th> 機械工学科 </th><td> 機械の開発設計生産組立管理まで多彩な視点でモノづくりの技術を学ぶ </td></tr> <tr><th> 電気電子工学科 </th><td> エコ情報通信を支え生活を豊かにする電気と電子の技術を学ぶ </td></tr> tsujido.css を開き下記の通り修正してください前略 th{background-color:#ffe5a3;width:10em;} td{vertical-align:middle;} caption{background-color:#350;color:#fff;padding:0.2em 0;} ( 演習 3) 表にタイトルを追加する 9/21

10 ( 演習 3) 結果 10/21

11 表のタイトルを指定するタグタグ機能 <caption>~</caption> 表の見出しを指定する表のタイトルを指定するタグ 11/21

12 HTML ファイル index.html を開き下記の通り修正してください前略 <p class="head"> 辻堂案内は辻堂周辺を紹介するサイトです <img src="tsujido.jpg" title=" 辻堂 " alt="[ 写真 / 辻堂 ]" width="200" height="155" class="top"></p> <div class="contents"> <ol> <li><a href="shuuhen.html"> 辻堂周辺 </a> <a href="shuuhen.html#eki"> 辻堂駅 </a> と <a href="shuuhen.html#univ"> 湘南工科大学 </a></li> <li><a href="history.html"> 辻堂の歴史 </a></li> <li> 作者について </li> </ol> </div> </body> </html> ( 演習 4) 番号入りのリストを作成する 12/21

13 ( 演習 4) 結果 13/21

14 番号入りのリストを作るためのタグタグ機能 <ol> ~ </ol> 番号入りのリストを定義するタグ機能 <li> ~ </li> リストの各行を定義する番号入りのリストを作るためのタグ 14/21

15 HTML ファイル index.html を開き下記の通り修正してください前略 <div class="contents"> <ul> <li><a href="shuuhen.html"> 辻堂周辺 </a> <ol> <li><a href="shuuhen.html#eki"> 辻堂駅 </a></li> <li><a href="shuuhen.html#univ"> 湘南工科大学 </a></li> </ol> </li> <li><a href="history.html"> 辻堂の歴史 </a></li> <li> 作者について </li> </ul> </div> ( 演習 5) 箇条書きのリストリストの中にリストを作成する 15/21

16 ( 演習 5) 結果 16/21

17 箇条書きのリストを作るタグタグ機能 <ul> ~ </ul> 箇条書きのリストを定義する箇条書きのリストを作るタグ 17/21

18 tsujido.css を開き下記の通り修正してください前略 caption{background-color:#350;color:#fff;padding:0.2em 0;} li{list-style-image:none;padding-left:0.2em;} ol li{list-style-image:none;list-style-type:lower-roman;} ( 演習 6) リストにスタイルを指定する 18/21

19 ( 演習 6) 結果 19/21

20 リストを設定するスタイルスタイル機能値 list-style-type: 各種の値リストの表示スタイルを設定する disc 塗りつぶされた丸を表示する circle 白抜きの丸を表示する square 塗りつぶされた四角を表示する decimal 算用数字で表示する lower-roman 小文字のローマ字で表示する upper-roman 大文字のローマ字で表示する lower-alpha 小文字のアルファベットで表示する upper-alpha 大文字のアルファベットで表示する none 何も表示しないリストを設定するスタイル 20/21

21 本日の演習内容について復習してください演習内容作成ファイル演習 1 表を作成する shuuhen.html 演習 2 表にスタイルを適用する shuuhen.html tsujido.css 演習 3 表にタイトルを追加する shuuhen.html tsujido.css 演習 4 番号入りのリストを作成する index.html 演習 5 箇条書きのリストリストの中にリストを作成する index.html 演習 6 リストにスタイルを指定する index.html tsujido.css HTML+CSS(6) まとめ 21/21

Web プログラミング 1 HTML+CSS (6) (2 章 ) 2013/5/29( 水 ) 演習室の PC のハードディスクには演習で作成したデータは保管できません各 PC のネットワーク接続ショートカットからメディア情報センターのサーバーにアクセスしてください (Z ドライブとして使用

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