TITLE:第12回の課題(2) TITLE:第13回の課題(2) *課題(2): 全体のレイアウトの設定 [#j85bfa1f] > 前回の課題と同じように、W ebページ全体のレイアウトを、スタイルシートを使って設定します。&br; 「タイトル」「目次」「コメント」「プロフィール」のように、 Webページをいくつかのグループに分割するために、div要素を使います。 そして、CSSファイルにレイアウトのための設定をします。&br; なお、&color(red){''すでに自分で設定できている場合は、あらためて書き換える必要はありません''};。 < **1. HTMLにレイアウトを設定する(前回説明済み) [#p9a4f86a] 次の図のような、目次を左や右に配置するレイアウトを設定します。 説明にしたがって、設定をしてください。 #ref(Lecture/JouhouC2007/12th/exercise3/layout.png,nolink); まず、HTMLファイルのbody要素内に、div要素を次のように追加します。 これは、中身を「コンテンツ全体」「タイトル」「目次」「コメント(文章)」「プロフィールと連絡先」の4つのブロックにわけるための設定です。 #pre(novervatim){{ &color(red){<div class="all">}; &color(#0099FF){<div class="header">}; ('''タイトルの部分''') &color(#0099FF){</div>}; &color(#009999){<div class="sidebar">}; ('''目次の部分''') &color(#009999){</div>}; &color(#FF6600){<div class="contents">}; ('''コメント(文章)の部分''') &color(#FF6600){</div>}; &color(#0099FF){<div class="footer">}; ('''プロフィールと連絡先の部分''') &color(#0099FF){</div>}; &color(red){</div>}; }} つまり、次のような意味の設定になります。 +ページ全体に「all」というクラス名のブロックを作る +その中に「header」「sidebar」「contents」「footer」というブロックを置く **2. スタイルシートを設定する [#w4e25f8b] ***(1) CSSファイルの作成 [#k0543011] レイアウトの設定が書かれたCSSファイルを作成します。 今回は、新しいCSSファイルを作成します。 ファイル名は、次のとおりです。 -「0702」+「学籍番号」+「.css」(半角文字で!)~ (学籍番号がC2062000の場合、ファイル名は 「''0702c2062000.css''」) -「0703」+「学籍番号」+「.css」(半角文字で!)~ (学籍番号がC2062000の場合、ファイル名は 「''0703c2062000.css''」) ***(2) スタイルシートの設定 [#x02f6516] まず、次の設定を追加してください。 -すべてのブロックのmarginとpaddingを0に設定 -全体のブロックの幅を700pxにする&br;(幅は自由に変更してください) -タイトルのブロックの幅を100%にする(全体のブロックの横幅にする) #pre(novervatim){{ .all, .header, .sidebar, .contents, .footer { margin: 0; padding: 0; } .all { width: 710px; } .header { width: 100%; } }} 次に、目次を左右のどちらかに設定します。 [[前回説明した>Lecture/JouhouC2007/12th]] 幅の設定や左右への配置・回り込みの設定を使います。&br; 目次を左に配置する場合は、次のようにスタイルシートに設定を追加します。 #pre(novervatim){{ .sidebar { float: left; width: 200px; } .contents { margin-left: 210px; width: 500px; %% width: 500px;%% } }} これは、次のような意味になります。 -目次のブロックを左に配置 -目次のブロックの幅を200pxに指定&br;(幅は自由に変更してください) -コメントのブロックを右に配置(「float: left」を指定しても結果は同じです) -コメント(文章)のブロックの幅を500pxに指定&br;(幅は自由に変更してください) また、目次を右に配置する場合は、次のようにスタイルシートに設定を追加します。 #pre(novervatim){{ .sidebar { float: right; width: 200px; } .contents { margin-right: 210px; width: 500px; } }} これは、次のような意味になります。 -目次のブロックを右に配置(その後のブロックは左に配置) -目次のブロックの幅を200pxに指定&br;(幅は自由に変更してください) -コメントのブロックを左に配置(「float: right」を指定しても結果は同じです) -コメント(文章)のブロックの幅を500pxに指定&br;(幅は自由に変更してください) 最後に、プロフィールと著作権のブロックに設定をします。 #pre(novervatim){{ .footer { clear: both; width: 100%; } }} これは、次のような意味になります。 -回り込みを解除する(左右へのレイアウトを解除する) -ブロックの幅を100%にする(全体のブロックの横幅にする) また、次のようにbody要素と.allクラスへ設定すれば、 全体をセンタリング(中央揃え)することができます。 試してみてください。 #pre(novervatim){{ body { text-align: center; } .all { width: 700px; margin-left: auto; margin-right: auto; text-align: left; } }} > 注意:&br; Windows版のInternet Explorer 5.5などでは、「margin-○○: auto」に対応していないため、「text-align: center」でブロックをセンタリングするバグを利用しています。 < **課題の提出 [#v4392dfb] ***提出方法 [#pd69905b] 作成したファイルと''使用してる画像ファイルすべて''を、 次の場所にコピーして提出してください。 -「マイコンピュータ」→「Fsの資料・課題」→「kawano」→「提出」 ***提出期限 [#h518caec] -原則として、''平成19年7月10日13時''までとします。 -期限以後は、特別な理由がない限り、提出を受け付けません。 -課題のやりなおしは、提出期限まで受け付けます。 &br; ---- #navi2(Lecture/JouhouC2007/13th,prev,toc,next) |