邪魔なら閉じられるボックス
下記には、最新記事をお知らせする小さなボックスが表示されています。 ボックス上部の右端にある「
」ボタンをクリックすると、このボックスを折りたたむことができます。 さらに「
」ボタンをクリックすると消し去ることもできます。 試してみて下さい。
※スタイルシートとJavaScriptが有効な環境でのみ動きます。
新着記事：
1. 「リスト(ul要素)を装飾した際の表示差を解消」
2. 「別窓を開かずに、その場で拡大画像を表示！」
3. 「元のページに戻れないリンクを作る」
※折りたたんだボックスを再度展開するには、もう一度「」ボタンをクリックします。
※消し去ってしまったボックスを再表示するには、このページ自体を再読込して下さい。
この、折りたたんだり消し去ったりできるボックスは、JavaScriptを使ってスタイルシートを操作することで実現しています。 同一ページ内にいくつでも作ることができます。
お勧め記事：
ボックスそのものには何も特殊な技術は使っておらず、ただHTMLで記述しているだけです。 ですから、ボックスの中身には文字でも画像でも何でも自由に記述可能です。
本日の写真：
海底
今回は、上記のように、閲覧者が折りたたんだり消したりできるボックスの作り方をご紹介いたします。
【この記事の目次】
(1) 概要 （このページ）
(2) HTMLを記述
(3) スタイルシートで装飾
(4) JavaScriptで機能追加
(5) ソースのまとめ
(6) 同一ページに複数のボックスを配置する場合の注意
各ソースは段階を追って少しずつ解説していますので、順番に読まれることをお勧めいたします。 さっさとコピー＆ペーストして試してみたい場合は、5ページ目へどうぞ。
