課題: ネット上の記事へのコメントでHTMLファイルを書くクラスとdiv・span要素の利用前回までと同様に、「インターネット上のあらゆる記事へのコメント」 を作成します。 2つのファイルを作ります。
1. インターネット上の記事にコメントをする(1) 情報を集める自分が現在興味のあるテーマについて、 インターネットからニュース等を探して、 自分が興味を持った記事を1つ集めなさい。 やり方は、第3回の課題と同じです。 第3回の課題の説明を見てください。(2) 情報にコメントをつける記事を探したら、次の順にコメントを作りなさい。 なお、文字数は、「100〜150文字程度(上限なし)」としますが、 内容はささいなことでかまいません。 やり方は、第3回の課題と同じです。 第3回の課題の説明を見てください。2. HTMLファイルの作成第8回の課題で作成したファイルをもとに、 今回の課題を作成します。(1) ファイルの作成第8回の課題で作成したファイルを開いたあとに、 次のようにして、名前をつけて別のファイルを作ります。
(2) コメントの追加・目次の更新次のようなレイアウトになるように、 今回作ったコメントを追加して、目次の部分を更新します。 第2回〜第4回までの、HTMLの技術を使って、作成してください。div要素とspan要素の機能div要素を使うと、 複数の要素をまとめてグループ化することができます。 また、クラスと組み合わせれば、オリジナルの要素(意味づけ)ができます。 div要素は、ブロックレベル要素なので、 ひとつのブロックを作ることができます。#spandel ページのタイトル #spanend #spanadd <h1>第1章</h1> #spanend #spandel 目次 #spanend #spandel ・第9回のコメントへのリンク #spanend #spandel ・第7回のコメントへのリンク #spanend #spandel (途中省略) #spanend #spandel ・プロフィール #spanend #spanadd <div class="section1"> #spanend #spanadd <h2>第1節</h2> #spanend #spanadd <p>...</p> #spanend #spanadd <p>...</p> #spanend #spanadd </div> #spanend --- #spandel 第9回の課題のコメント #spanend #spandel ... #spanend #spandel [トップへ戻る] #spanend #spanadd <div class="section2> #spanend #spanadd <h2>第2節</h2> #spanend #spanadd <p>...</p> #spanend #spanadd <p>...</p> #spanend #spanadd </div> #spanend #spandel 第7回の課題のコメント #spanend ... #spandel [トップへ戻る] #spanend #spandel #spanend #spandel (途中省略) #spanend #spandel #spanend #spandel プロフィール #spanend #spandel ... #spanend #spandel [トップへ戻る] #spanend #spandel #spanend --- #spandel 連絡先・著作権の情報 #spanend作成するときの注意点は、次のとおりです。
div・span要素とクラスの組み合わせ上の例にはすでに書かれていますが、 div要素やspan要素にクラスを指定することで、 HTMLの構成要素として定義されていない(定義できない) 部分に対しても、スタイルを設定することができます。 div要素にクラスを指定すれば、 複数の要素に対してまとめてスタイルを設定することができます。 span要素にクラスを指定すれば、 特定の部分にだけスタイルを設定することができます。2. CSSファイルの作成コメントが書かれたHTMLファイルに、スタイルを設定します。 たとえば、上記のdiv要素とspanをを使った例に、 次のようなスタイルを指定することができます。#spanend #spanadd .section1 { #spanend background: #ffeeee; color: #ff0000; #spanadd } #spanend #spanadd .section2 { #spanend background: #ffeeee; color: #ff00ff; #spanadd } #spanend #spanadd .note { #spanend color: #ff0000; background: #ffff00; #spanadd } #spanend #spanadd今回は、HTMLファイルとは別に、 スタイルシートの設定が書かれたCSSファイルを作成します。 ファイル名は、次のとおりとします。
提出方法作成したファイルと使用してる画像ファイルすべてを、 次の場所にコピーして提出してください。
提出期限
次へ進んでください。 |