ホームページ作成/表示・非表示の切替 (HTML,CSS,JavaScript)

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

閲覧者が自らの操作で、折りたたんだり・展開したり・消したりできるボックスを作ってみましょう。邪魔なら閉じたり折りたたんだりしておける「メッセージやメニューの表示用ボックス」などとして活用できます。

西村 文宏

西村 文宏

ホームページ作成 ガイド

初心者向けの「わかりやすさ」を重視した解説に定評があるウェブ系テクニカルライター。ウェブの黎明期に趣味で始めた個人サイト製作からその「楽しさ」に魅了され、作成方法に関する様々な情報を発信。企業や団体のウェブサイト製作・解説書籍の執筆なども行っている。

...続きを読む

ボックスそのものを作るHTML

まずは、ボックスそのものを作ります。HTMLで以下のように記述します。

■HTMLソース:

<div class="CollapsibleBox">
   <div class="CollapsibleBoxTitle">
      <p class="cBoxButtons">
         <img src="buttoncol.gif" width="18" height="14" alt="折りたたみ/復元">
         <img src="buttonclose.gif" width="18" height="14" alt="閉じる">
      </p>
      <p class="cBoxTitle">ボックスタイトル:</p>
   </div>
   <div class="CollapsibleBoxBody">
      <p>
         1. ~本文~<br>
         2. ~本文~<br>
         3. ~本文~<br>
      </p>
   </div>
</div>

ボタン画像は、以下の2つを使っています。
折りたたみ/復元 : buttoncol.gif
閉じる : buttonclose.gif

後からスタイルートで装飾するために、class属性を使ってクラス名を付加しています。 div要素がいっぱいで分かりにくいかも知れませんが、構造は下記の通りさほど複雑ではありません。

HTMLソースの構造
▲HTMLの構造

なお、クラス名に使っている「CollapsibleBox」とは「折りたためるボックス」という意味で付けた名称です。 このクラス名である必要はないので、何でも自由に付けて下さい。(ただし、変更した場合は、後述のスタイルシート側の記述も同様に変更する必要があります。)

上記のソースを実際に表示させると、以下のように見えます。
何も装飾を施していないので、まだボックスのようには見えません。
※この記事内には、All Aboutサイト内共通のスタイルシートが適用されているため、標準の見え方とは少々異なる場合があります。

折りたたみ/復元 閉じる

ボックスタイトル:

1. ~本文~
2. ~本文~
3. ~本文~

次に、スタイルシートを使って、ボックスらしく見えるよう装飾を施しましょう。

  • 前のページへ
  • 1
  • 2
  • 3
  • 6
  • 次のページへ

あわせて読みたい

カテゴリー一覧

All Aboutサービス・メディア

All About公式SNS
日々の生活や仕事を楽しむための情報を毎日お届けします。
公式SNS一覧
© All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます