クリックで「折りたためる」ボックスを作る(3ページ目)

ボックスに見えるよう装飾する

先ほど記述したHTMLを、ボックスらしく見えるようにスタイルシートで装飾します。 ここでは、以下のようなスタイルシートを記述します。 配色やサイズなどは自由に修正して下さい。 （※主に太字の部分を書き換えると、配色やサイズを変更できます。）

■スタイルシートソース：

<style type="text/css"><!--
div.CollapsibleBox {
   /* ■ボックス全体■ */
   border: 1px solid darkblue; /* 枠線:濃青 */
   font-size: 80%;             /* 文字サイズ:80% */
   width: 390px;               /* 横幅:390px */
}
div.CollapsibleBox div.CollapsibleBoxTitle {
   /* ■タイトル枠■ */
   background-color: darkblue; /* 背景色:濃青 */
   color: white;               /* 文字色:白 */
   margin: 0px;
   padding: 0px;
}
div.CollapsibleBox div.CollapsibleBoxTitle p.cBoxTitle {
   /* ■タイトル文字列■ */
   font-weight: bold;          /* 太字 */
   border: 1px solid darkblue; /* 枠線:濃青 */
   margin: 0px;
   padding: 0px;
}
div.CollapsibleBox div.CollapsibleBoxTitle p.cBoxButtons {
   /* ■ボタン群■ */
   margin: 0px;
   padding: 1px 3px;
   float: right;
   text-align: right;    /* 右寄せ */
}
div.CollapsibleBox div.CollapsibleBoxTitle p.cBoxButtons a img {
   /* ■ボタンそのもの■ */
   border-width: 0px;    /* リンクの枠線を消す */
}
div.CollapsibleBox div.CollapsibleBoxBody {
   /* ■本文枠■ */
   margin: 0px;
   padding: 0px;
   background-color: #eeeeff; /* 背景色:淡青 */
   color: #000055;            /* 文字色:暗青 */

div.CollapsibleBox div.CollapsibleBoxBody p {
   /* ■本文■ */
   margin: 0px;
   padding: 0.5em;   /* 内側の余白:0.5文字分 */
}
--></style>

先ほどのHTMLソースに、上記のスタイルシートを適用させると、以下のように見えます。

冒頭のサンプルと同じデザインになりました。
まだ、JavaScriptを記述していないため、ボタンをクリックしても何も起こりません。

最後に、JavaScriptを使って、折りたたんだり消したりできる機能を加えましょう。