TITLE:第9回の課題 *課題: ネット上の記事へのコメントでHTMLファイルを書く [#be0dc49c] TITLE:クラスとdiv・span要素の利用 *クラスとdiv・span要素の利用 [#m1a64293] 前回までと同様に、''「インターネット上のあらゆる記事へのコメント」'' を作成します。 ''2つのファイルを作ります''。 -HTMLファイル: 記事へのコメントをHTMLで書く -CSSファイル: HTMLファイルのスタイルを書く **1. インターネット上の記事にコメントをする [#e29a13ad] ***(1) 情報を集める [#q6e65094] 自分が現在興味のあるテーマについて、 インターネットからニュース等を探して、 ''自分が興味を持った記事を1つ集めなさい''。 やり方は、第3回の課題と同じです。 [[第3回の課題の説明>../../3rd/exercise#q6e65094]]を見てください。 ***(2) 情報にコメントをつける [#a01eab99] 記事を探したら、次の順にコメントを作りなさい。 なお、文字数は、''「100〜150文字程度(上限なし)」''としますが、 内容はささいなことでかまいません。 やり方は、第3回の課題と同じです。 [[第3回の課題の説明>../../3rd/exercise#a01eab99]]を見てください。 **2. HTMLファイルの作成 [#n5e1c11f] 第8回の課題で作成したファイルをもとに、 今回の課題を作成します。 ***(1) ファイルの作成 [#x281debe] 第8回の課題で作成したファイルを開いたあとに、 次のようにして、名前をつけて別のファイルを作ります。 -メニューから「ファイル」→「名前をつけて保存」 -ファイルを次のようにつけて保存 --「0606」+「学籍番号」+「.html」(半角文字で!)~ (学籍番号がC2072000の場合、ファイル名は「''0606c2072000.html''」) ***(2) コメントの追加・目次の更新 [#i6abd85d] 次のようなレイアウトになるように、 今回作ったコメントを追加して、目次の部分を更新します。 第2回〜第4回までの、HTMLの技術を使って、作成してください。 **div要素とspan要素の機能 [#o5ab8c3f] ''div''要素を使うと、 複数の要素をまとめてグループ化することができます。 また、クラスと組み合わせれば、オリジナルの要素(意味づけ)ができます。 div要素は、''ブロックレベル要素''なので、 ひとつのブロックを作ることができます。 #pre(novervatim){{ ページのタイトル <h1>第1章</h1> 目次 ・第9回のコメントへのリンク ・第7回のコメントへのリンク (途中省略) ・プロフィール COLOR(red):<div class="section1"> <h2>第1節</h2> <p>...</p> <p>...</p> COLOR(red):</div> --- 第9回の課題のコメント ... [トップへ戻る] COLOR(red):<div class="section2> <h2>第2節</h2> <p>...</p> <p>...</p> COLOR(red):</div> 第7回の課題のコメント ... [トップへ戻る] (途中省略) プロフィール ... [トップへ戻る] --- 連絡先・著作権の情報 }} 作成するときの注意点は、次のとおりです。 -コメントを作る --それぞれのコメントの最後には、ページのトップ(一番上)にジャンプする「トップへ戻る」というリンクを作る -目次を更新する --すべてのコメントへジャンプできるリンクをつくる -[[第3回の課題で説明した注意点>../../3rd/exercise#n5e1c11f]]を守る -ファイルの最後にある、連絡先の「更新日」の日付を更新する ''span''要素を使うと、 文章中に、HTMLには用意されていない、 オリジナルの要素(意味づけ)ができます。 span要素は、''インラインレベル要素''なので、 指定した部分は改行されません。 #pre(novervatim){{ <address> 作成日: 2008-04-18; 更新日: &color(red){2008-06-06};<br> Copyright (C) 2008 兵庫太郎, All rights reserved.<br> このページに関する問合せ先:<br> E-Mail. <a href="mailto:c2072000@ed.hyogo-dai.ac.jp"> c2072000@ed.hyogo-dai.ac.jp</a> </address> <p> これからはCOLOR(red):<span class="note">COLOR(black):Webカメラによる授業参観COLOR(red):<span>COLOR(black):ができるかもしれません。 </p> }} **div・span要素とクラスの組み合わせ [#v6c355a5] 上の例にはすでに書かれていますが、 div要素やspan要素にクラスを指定することで、 HTMLの構成要素として定義されていない(定義できない) 部分に対しても、スタイルを設定することができます。 div要素にクラスを指定すれば、 複数の要素に対してまとめてスタイルを設定することができます。 span要素にクラスを指定すれば、 特定の部分にだけスタイルを設定することができます。 **2. CSSファイルの作成 [#ya26744d] コメントが書かれたHTMLファイルに、スタイルを設定します。 たとえば、上記のdiv要素とspanをを使った例に、 次のようなスタイルを指定することができます。 #pre(novervatim){{ COLOR(blue):.section1 COLOR(red):{ background: #ffeeee; color: #ff0000; COLOR(red):} COLOR(blue):.section2 COLOR(red):{ background: #ffeeee; color: #ff00ff; COLOR(red):} COLOR(blue):.note COLOR(red):{ color: #ff0000; background: #ffff00; COLOR(red):} }} 今回は、HTMLファイルとは別に、 スタイルシートの設定が書かれたCSSファイルを作成します。 ファイル名は、次のとおりとします。 -「0606」+「学籍番号」+「.css」(半角文字で!)~ (学籍番号がC2072000の場合、ファイル名は 「''0606c2072000.css''」) CSSを使って、HTMLファイルの各要素に次のような設定をしてください。 -【今回分】 --リスト(関連情報の部分)の番号や記号を設定する(ulまたはol要素) --「トップへ戻る」用に、「.jump_top」というクラスを設定し、右揃えの設定をする ---HTMLファイルで、現在設定しているp要素を、div要素に書き換える --目次用に、「.toc」というクラスを設定して、適当なスタイルを設定する -【前回までの分】 --背景に画像を入れる(ページ全体、h1〜h6、p、blockquote要素) ---すべてに背景画像を入れなくて良い --フォントの設定(すべての要素で設定) ---スタイル、太さ、サイズなど --行揃えの設定(h1〜h6要素) --行間の設定(p要素、blockquote要素) --マージン(margin)の設定(h1〜h6、p、blockquote要素) --まわりの空間(padding)の設定(h1〜h6、p、blockquote要素) --ページ全体の文字色と背景色(body要素) --見出しの文字色と背景色(h1〜h6要素) --見出しの枠線の設定(色・太さ・種類)(h1〜h6要素) ***提出方法 [#pd69905b] 作成したファイルと''使用してる画像ファイルすべて''を、 次の場所にコピーして提出してください。 -「マイコンピュータ」→「Fsの資料・課題」→「kawano」→「提出」 ***提出期限 [#h518caec] -原則として、''平成20年6月13日13時''までとします。 -期限以後は、特別な理由がない限り、提出を受け付けません。 -課題のやりなおしは、提出期限まで受け付けます。 &br; &navi2(Lecture/JouhouC2008/9th,next);進んでください。 ---- #navi2(Lecture/JouhouC2008/9th,prev,toc,next) |