Web データ管理 HTML+CSS (6) (2 章 ) 2011/11/9( 水 ) 1/21
演習室の PC のハードディスクには演習で作成したデータは保管できません 各 PC の ネットワーク接続 ショートカットからメディア情報センターのサーバーにアクセスしてください (Z ドライブとして使用できます ) 演習名 使用するフォルダ 演習 1 Z: Web データ管理 20111109 演習 1 演習 2 Z: Web データ管理 20111109 演習 2 演習 3 Z: Web データ管理 20111109 演習 3 演習 4 Z: Web データ管理 20111109 演習 4 演習 5 Z: Web データ管理 20111109 演習 5 演習 6 Z: Web データ管理 20111109 演習 6 講義で使うフォルダ 2/21
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
( 演習 1) 結果 4/21
表を定義するタグ タグ機能タグ機能タグ機能タグ機能 <table> ~ </table> 表を定義する <tr> ~ </tr> 表の行を定義する <td> ~ </td> 表の項目を定義する <th> ~ </th> 表の項目の見出しを定義する 表を定義するタグ 5/21
スタイルシート 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
( 演習 2) 結果 7/21
スタイル 機能 値 border-collapse: 枠線の表示方法 表の項目同士を離して表示するかどうか指定する collapse 表の項目を離さずに表示する separate 表の項目を離して表示する (default) スタイル 機能 値 vertical-align: 高さ位置の指定 行の中で文字や画像を表示する高さを指定する baseline 1 行目のベースラインが揃うように調整する (default) top 上辺に揃えて表示する middle 中央に揃えて表示する bottom 下辺に揃えて表示する 表に指定できるスタイル 8/21
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
( 演習 3) 結果 10/21
表のタイトルを指定するタグ タグ 機能 <caption>~</caption> 表の見出しを指定する 表のタイトルを指定するタグ 11/21
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
( 演習 4) 結果 13/21
番号入りのリストを作るためのタグ タグ 機能 <ol> ~ </ol> 番号入りのリストを定義する タグ 機能 <li> ~ </li> リストの各行を定義する 番号入りのリストを作るためのタグ 14/21
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
( 演習 5) 結果 16/21
箇条書きのリストを作るタグ タグ 機能 <ul> ~ </ul> 箇条書きのリストを定義する 箇条書きのリストを作るタグ 17/21
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
( 演習 6) 結果 19/21
リストを設定するスタイル スタイル 機能 値 list-style-type: 各種の値 リストの表示スタイルを設定する disc 塗りつぶされた丸を表示する circle 白抜きの丸を表示する square 塗りつぶされた四角を表示する decimal 算用数字で表示する lower-roman 小文字のローマ字で表示する upper-roman 大文字のローマ字で表示する lower-alpha 小文字のアルファベットで表示する upper-alpha 大文字のアルファベットで表示する none 何も表示しない リストを設定するスタイル 20/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