Web データ管理 HTML+CSS (7) (2 章 ) 2011/11/16( 水 ) 1/15
演習室の PC のハードディスクには演習で作成したデータは保管できません 各 PC の ネットワーク接続 ショートカットからメディア情報センターのサーバーにアクセスしてください (Z ドライブとして使用できます ) 演習名 使用するフォルダ 演習 1 Z: Webデータ管理 20111116 演習 1 演習 2 Z: Webデータ管理 20111116 演習 2 演習 3 Z: Webデータ管理 20111116 演習 3 演習 4 Z: Webデータ管理 20111116 演習 4 講義で使うフォルダ 2/15
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
スタイルシート 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
( 演習 1) 結果 5/15
本文 (main) width:70% 本文の幅を 70% とする サイドバー (side) margin-left:70% サイドバーの左の 70% を空ける 本文 (main) float 属性を指定する本文が浮いたような (float) 状態となり サイドバーが回り込んで表示される ボックスをフロート化して並べる仕組み 6/15
スタイルシート 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
( 演習 2) 結果 8/15
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
( 演習 3) 結果 10/15
スタイルシート 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
( 演習 4) 結果 12/15
リキッドレイアウトを実現するスタイル スタイル 機能 値 position: 指定方法 表示位置の指定方法を決める static 通常通りボックスを上から下に配置する (top, left などは無視する ) relative static 同様上から下に配置するが top,left に準拠する absolute static 以外の親要素を基準とし top,left に準拠する fixed ブラウザの表示領域を基準として top,left に準拠する リキッドレイアウトを実現するスタイル 13/15
index.html tsujido.css shuuhen.html history.html 演習で作成した HTML コンテンツ 14/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