各学年（各ユーザ）に所属する記事を降順表示させてください。

1.グローバルナビゲーションA：

現在"いる"ページをon表示させてください。<li class="here">になれば、下地がピンクになります。

＊ヒント：<li>にするか、<li class="here">にするかは、変数と分岐を用いることで可能になります。なお、IEの仕様ゆえ、<ul><li>部分の改行にヘンな隙間が入ります。ですので、改行を<!-- -->でコメントアウトしています。ややこしくなりそうでしたら、IE以外のブラウザで課題にチャレンジしていただけたらと存じます。

2.閲覧している学年に所属する記事のリスト：

閲覧している学年に所属する記事を降順で最大5件、リスト表示させてください。

<li class="here">
  <a href="＊＊＊"><span class="arrow">5年生</span></a>
  <ul class="child">
    <li><a href="＊＊＊"><span class="arrow">運動会に向けて</span></a></li>
    <li><a href="＊＊＊"><span class="arrow">演奏しました</span></a></li>
  </ul>
</li>

と、<li class="here">のなかに、<ul class="child">～</ul>を入れ子で作成してください。（改行コードをコメントアウトしないとIEではヘンな隙間ができますのでご注意ください。）

3.大見出し：

学年（ユーザ名）を表示させてください。

4.見出し：

ブログ記事タイトルを表示させてください。

5.本文：

ブログ記事の本文を表示させてください。

6.ボタン：

パーマリンクを貼ってください。

7.本文の下：

日付、所属カテゴリーとそのブログ記事リストページへのリンク、学年と学年アイコンが表示されるようにしてください。

8.文字サイズ：

書いた人の学年によって、文字のサイズを違えてください。

• 1・2年生が書いたら、大サイズの文字
• 3・4年生が書いたら、中サイズの文字
• 5・6年生が書いたら、小サイズの文字

にするということです。

<div class="文字サイズ">
  見出し
  本文
  ボタン
</div>

という構造になっています。CSSで、文字サイズを制御します。

• 1・2年生は <div class="fontS">
• 3・4年生は <div class="fontM">
• 5・6年生は <div class="fontL">

になるよう、MTタグを用いて、class名を変更させる方法を考えてみてください。

フォントサイズ制御専用のCSSを用意しました。詳しくは http://kiasma.jp/20080621/css/typography.css をご覧ください。