*情報デザインB 第13回 [#j22b151f] :「classを使う -レイアウト編-」| 今回も、classを使ったレイアウトの課題を行います。 #contents **連絡事項 [#jfa69fee] 第2回から第13回までの課題の''最終提出期限''をお知らせします。 最終提出期限は、''1月30日(月)24:00''です。 未提出の課題があれば、期限までに提出してください。 提出が遅れたからといって、祭典には影響はありませんので、 安心してください。 ただし、&color(red){期限後に提出された課題は、一切採点しません};。 注意してください。 **classを使ったレイアウト(前回の復習) [#v0178b18] [[前回>../12th]]は、[[第11回:http://ei-www.hyogo-dai.ac.jp/~masahiko/syll05/designB11.html]] の課題で作ったファイルを使って、 classとdiv要素を用いたWebページのレイアウトを行いました。 -classとdiv要素を使って、文書をブロックにわけた -ブロックごとのclassに、スタイルシートでレイアウトを設定した。 **今回の課題 [#u0429c27] [[第10回の課題のファイル:http://ei-www.hyogo-dai.ac.jp/~masahiko/syll05/designB10.html]]を使用します。 もし第10回の課題ができていない場合は、それまでの課題のファイルを使ってください。 前回の課題で行ったように、 ''ニュースとそのコメントが書かれたWebページに、'' ''classとdiv要素を使ったレイアウトを設定してください''。 ***ファイルの準備 [#f9fc3fd3] 今回の課題のファイル名は、次のとおりとします。 第10回の課題のファイルを、別のフォルダーにコピーして、名前を変えておいてください。 -HTMLファイルの名前:「0113」+学籍番号+「.html」 --学籍番号が「E2041000」の場合、ファイル名は「0113e2041000.html」 -スタイルシートの名前:「style13.css」 ***レイアウトを設定する [#s4f7bfd6] 前回と同じく、図のような、目次を左や右に配置するレイアウトを、 スタイルシートを使って設定します。 #ref(../12th/layout.png,nolink); [[前回の説明>../12th#s4f7bfd6]]を参考に、次のようにして、レイアウトを設定してください。 +HTMLファイルのbody要素を、div+class要素を使って、ブロックにわける --「タイトル」「目次」「文章(コンテンツ)」の3つのブロック +スタイルシートをレイアウト用の基本設定をする +左が目次、または、右が目次のどちらかのレイアウトを設定する +目次ブロックの幅など、微調整をする **課題の提出 [#ca5dc2d7] ***提出方法 [#ne627bdd] 学籍番号を名前とするフォルダに必要ファイルをすべて入れたものを提出します。 ***提出先 [#a90c7be1] いつもと同じ場所にあります。 ***締め切り [#q7c81879] 1月30日(月)24:00 |