KAWANO's PukiWiki Plus! - Lecture/InfoDesignB2005/12th

情報デザインB 第12回

「classを使う -レイアウト編-」

今回は、 前回の課題を応用して、classを使ったレイアウトの課題を行います。

classの利用（前回の復習）

今回は、前回の課題で作ったファイルを使って、 classとdiv、span要素を用いたWebページのレイアウトを行います。

classを使えば、同じ要素でも異なったデザインを指定することができます。 htmlファイル内ではタグの属性としてclass名を指定し、デザインはcssで指定します。
div,spanとclassを合わせて使うと、新しいタグを自分で作り出すのと同じことができます。 classは p, h1 などほとんどの要素に用いることができますが、今回はdivとspanだけを使います。 使い方は 第７回CSS(2)を参考にしてください。

（第11回の説明より）

前回の課題

今回の課題を行うには、前回の課題として作成したHTMLとスタイルシートの2つファイルが必要です。

前回の課題がまだ出来ていない人は、 第11回の説明を見て、課題を作成してください。

注意

divを使ってパラグラフ（段落）に分けるには、コピーした文章にいちいちdiv要素を入力しなければなりません。しかし、次のような終了タグと開始タグの2行を、文章の行間ごとにコピーしてやれば、割と早く作業ができます。ただし、いらないタグを削除するのは忘れないでください。

</div>
<div>

今回の課題

セリフにスタイルを設定する

前回の課題では、主な登場人物であるさるとかにのセリフにスタイルを設定しました。

今回は、ほかの登場人物（栗、蜂、昆布、うす）のセリフにもスタイルを設定してください。 たとえば、次のようになります。

...
<div>
するとそこへ栗（くり）がぽんとはねて来（き）て、 
</div>
<div class="kuri">
「かにさん、かにさん、なぜ泣（な）くの。」 
</div>
<div>
と聞（き）きました。
</div>
...

スタイルシート（ファイル名:sarukani.css）にスタイルを設定してください。 栗のスタイルの名前は「.kuri」、蜂は「.hachi」、昆布は「.konbu」、うすは「.usu」とします。

...
.kuri { スタイルの指定 }
.hachi { スタイルの指定 }
.konbu { スタイルの指定 }
.usu { スタイルの指定 }
...

目次を作る

「猿かに合戦」（青空文庫）の文章は、 「一」「二」「三」「情報」（底本以下の部分）の４つで構成されています。 それぞれの部分の小見出しを作成し、見出しのスタイル（スタイル名：.komidasi）を作って、スタイルを設定してください。

それぞれの部分へジャンプする目次を、 div、a要素だけを使って、作成してください。

• それぞれの部分の小見出しにアンカーを設定する（参考：第4回）
• タイトル・著者の下に、「目次」という見出しをつくる
• 目次の下にそれぞれの部分へジャンプするリンクをつくる

レイアウトを設定する

次の図のような、目次を左や右に配置するレイアウトを、 スタイルシートを使って設定します。

説明にしたがって、設定をしてください
まず、HTMLファイルのbody要素内に、div要素を次のように追加します。 これは、中身を「コンテンツ全体」「タイトル」「目次」「文章」の4つのブロックにわけるための設定です。

<div class="all">

<div class="title">
（タイトル・著者名の部分）
</div>

<div class="menu">
（目次の部分）
</div>

<div class="contents">
（文章の部分）
</div>

</div>

次に、スタイルシート（ファイル名:sarukani.css）に、 次の設定を追加します。次のような設定です。

• ブロックごとのmarginとpaddingを0に設定
• タイトルのブロックは、幅を100%にする（全体のブロックの横幅にする）

.all, .title, .menu, .contents
{
  margin: 0;
  padding: 0;
}
.all {position: relative;}
.title {width: 100%;}

次に、目次を左右のどちらかに設定します。 第8回で説明した 幅の設定や左右への配置・回り込みの設定を使います。
目次を左に配置する場合は、次のようにスタイルシートに設定を追加します。 「180px」の部分は、自由に大きさを変えてください。

.menu
{
  float: left;
  width: 180px;
}
.contents
{
  margin-left: 180px;
}

これは、次のような意味になります。

• 目次のブロックを左に配置（その後のブロックは右に配置）
• 目次のブロックの幅を180pxに指定
• 文章のブロックの左マージンを180pxに指定
  （文章のブロックを180px分右にずらす）

また、目次を右に配置する場合は、次のようにスタイルシートに設定を追加します。

.menu
{
  float: right;
  width: 180px;
}
.contents
{
  margin-right: 180px;
}

これは、次のような意味になります。

• 目次のブロックを右に配置（その後のブロックは左に配置）
• 目次のブロックの幅を180pxに指定
• 文章のブロックの右マージンを180pxに指定
  （文章のブロックを180px分左にずらす）

また、次のように.allスタイルを設定すれば、 全体をセンタリング（中央揃え）することができます。 試してみてください。

.all
{
  position: relative;
  margin: 0 auto;
  width: 80%;
}

感想を書く

最後に、前回と今回の課題の感想を書いてください。

• 「連絡」の下に「感想」という小見出しを作り、アンカーを設定する
• 目次に「感想」へジャンプするリンクを作る
• 感想を書く

課題の提出

HTMLファイルの文法をチェックする

Another HTML-lint gatewayをつかってチェックします。 「よくできました」と表示されるまで修正すること。

提出方法

学籍番号を名前とするフォルダに必要ファイルをすべて入れたものを提出します。

提出先

いつもと同じ場所にあります。

締め切り

1月13日（金）13:00

}}