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

Size: px

Start display at page:

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

よいかずはぎにわ
5 years ago
Views:

1 Web データ管理 HTML+CSS (7) (2 章 ) 2011/11/16( 水 ) 1/15

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

3 HTML ファイル index.html を開き以下の通り変更して保存してください前略 <h1> 辻堂案内にようこそ </h1> <div id="main"> <p class= head > 辻堂案内は辻堂周辺を紹介するサイトです <img src="tsujido.jpg" title=" 辻堂 " alt="[ 写真 / 辻堂 ]" width="200" height="155" class="top"></p> </div> <div id="side"> <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> </div> </body> ( 演習 1) スタイルシートで段組みを作成する 3/15

4 スタイルシート tsujido.css を開き以下の通り変更して保存してください前略 th,td{height:3em;border:solid 1px #000;padding:0.5em;} th{background-color:#ffe5a3;width:10em;} td{vertical-align:middle;} 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;} #side.contents{clear:none;} #side.contents ul{padding:0.5em;margin:0;} #side.contents ul li{margin-left:1em;} #main{float:left;width:70%;} #side{margin-left:70%;} 4/15

5 ( 演習 1) 結果 5/15

6 本文 (main) width:70% 本文の幅を 70% とするサイドバー (side) margin-left:70% サイドバーの左の 70% を空ける本文 (main) float 属性を指定する本文が浮いたような (float) 状態となりサイドバーが回り込んで表示されるボックスをフロート化して並べる仕組み 6/15

7 スタイルシート tsujido.css を下記の通り修正してください前略 th,td{height:3em;border:solid 1px #000;padding:0.5em;} th{background-color:#ffe5a3;width:10em;} td{vertical-align:middle;} 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;} #side.contents{clear:none;} #side.contents ul{padding:0.5em;margin:0;} #side.contents ul li{margin-left:1em;} #main{float:right;width:70%;} #side{margin-right:70%;} ( 演習 2) 段組みの左右を入れ替える 7/15

8 ( 演習 2) 結果 8/15

9 HTML ファイル index.html を開き下記の通り修正してください前略 <h1> 辻堂案内にようこそ </h1> <div id="container"> <div id="main"> 中略 </div> </div> </div> </body> </html> スタイルシート tsujido.css を開き下記の通り修正してください前略 #container{width:720px;margin:auto;} #main{float:right;width:70%;} #side{margin-right:70%;} ( 演習 3) 幅を固定した段組みを作成する 9/15

10 ( 演習 3) 結果 10/15

11 スタイルシート tsujido.css を開き下記の通り修正してください前略 #side.contents{clear:none;} #side.contents ul{padding:0.5em;margin:0;} #side.contents ul li{margin-left:1em;} #container{position:relative;width:95%;margin:auto;} #main{margin-left:240px;} #side{width:240px;position:absolute;top:0;left:0;} ( 演習 4) リキッドレイアウト ( サイドバー幅固定本文幅可変 ) を実現するには 11/15

12 ( 演習 4) 結果 12/15

13 リキッドレイアウトを実現するスタイルスタイル機能値 position: 指定方法表示位置の指定方法を決める static 通常通りボックスを上から下に配置する (top, left などは無視する ) relative static 同様上から下に配置するが top,left に準拠する absolute static 以外の親要素を基準とし top,left に準拠する fixed ブラウザの表示領域を基準として top,left に準拠するリキッドレイアウトを実現するスタイル 13/15

14 index.html tsujido.css shuuhen.html history.html 演習で作成した HTML コンテンツ 14/15

15 HTML+CSS( まとめ ) 学習日学習内容対象ファイル HTML+CSS(1) 10/5( 水 ) 本文を作成する index.html HTML+CSS(2) 10/12( 水 ) スタイルシートでページを飾る index.html tsujido.css HTML+CSS(3) 10/19( 水 ) スタイルシートでページを飾る index.html shuuhen.html tsujido.css HTML+CSS(4) 10/26( 水 ) スタイルシートでページを飾る shuuhen.html tsujido.css HTML+CSS(5) 11/2( 水 ) リンクを設定する画像を表示する HTML+CSS(6) 11/9( 水 ) 表を作成するリストを作成する index.html shuuhen.html history.html tsujido.css index.html shuuhen.html tsujido.css HTML+CSS(7) 11/6( 水 ) 段組みを作成する index.html tsujido.css 15/15

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 演習