Webデータ管理
HTML+CSS (7) (2章) 2011/11/16(水)
講義で使うフォルダ
演習室のPCのハードディスクには演習で作成したデータは
保管できません。
各PCの「ネットワーク接続」ショートカットからメディア情報セ
ンターのサーバーにアクセスしてください(Zドライブとして使
用できます)。
演習名 使用するフォルダ 演習1 Z:¥Webデータ管理¥20111116¥演習1¥ 演習2 Z:¥Webデータ管理¥20111116¥演習2¥ 演習3 Z:¥Webデータ管理¥20111116¥演習3¥ 演習4 Z:¥Webデータ管理¥20111116¥演習4¥(演習1)スタイルシートで段組みを作成する
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>
スタイルシート「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%;}
ボックスをフロート化して並べる仕組み
本文(main) ⇒ width:70%
本文の幅を70%とする
サイドバー(side) ⇒ margin-left:70%
サイドバーの左の70%を空ける
本文(main) ⇒ 「float」属性を指定する
本文が浮いたような(float)状態となり、サイド
バーが回り込んで表示される
(演習2)段組みの左右を入れ替える
スタイルシート「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%;}
(演習3)幅を固定した段組みを作成する
HTMLファイル「index.html」を開き、下記の通り修正してください スタイルシート「tsujido.css」を開き、下記の通り修正してください 前略 <h1>辻堂案内にようこそ</h1> <div id="container"> <div id="main"> 中略 </div> </div> </div> </body> </html> 前略 #container{width:720px;margin:auto;} #main{float:right;width:70%;} #side{margin-right:70%;}(演習4)リキッドレイアウト(サイドバー幅固定、
本文幅可変)を実現するには
スタイルシート「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;}
