ホームページ作成

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

表示・非表示の切替 (HTML,CSS,JavaScript)

HTMLやスタイルシート（CSS）、JavaScriptを使ったアイテムの表示、非表示の切り替え方法について解説しました。

クリックで「展開できる」ボックスを作る

最初はタイトルだけが表示され、本文領域は折り畳まれている状態。閲覧者がボタンをクリックすることで本文領域を展開（表示）させられるようなボックスを作ってみましょう。邪魔にならないボックスが作れます。

ガイド：西村文宏
クリックで「折りたためる」ボックスを作る

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

ガイド：西村文宏
「表示／非表示」を切り替える2つの方法

JavaScriptを使ってスタイルを変化させることで、特定の箇所（要素）の［表示／非表示］を切り替えることができます。方法は「visibility」を使う場合と「display」を使う場合の2種類。その違いと記述方法をご紹介。

ガイド：西村文宏
ドロップダウンメニューの表示・非表示

マウスを乗せるだけでサブメニューが展開されるドロップダウンメニューを作ってみましょう。まずは第1のステップとして、文字や画像の表示・非表示をマウスの動作に合わせて切り替える方法をご紹介致します。

ガイド：西村文宏
[第2回] 指定の場所（座標）に表示させる

マウスを乗せるだけでサブメニューが展開されるドロップダウンメニューを作ってみましょう。今回は、座標（端からの距離）を指定することで、望みの場所にぴったり表示させる方法をご紹介致します。

ガイド：西村文宏
第3回簡単なドロップダウンメニューを作る

最低限の機能を備えた簡単な「ドロップダウンメニュー」を作成してみましょう。スタイルシートでメニューバーをデザインし、HTMLに短いJavaScriptを書くだけで実現できます。

ガイド：西村文宏

マネしたくなるアイデア住宅

住まいには、人の個性がよく現れるもの。同じ空間をどのように使うかで、雰囲気も、快適さも大きく変わってくる。ここでは、「建築家と家を建てる」ガイドの川畑博哉氏が厳選した10軒を紹介し、建築家それぞれのこだわりのポイントを紹介しよう。建築のプロたちが考え出した、マネしたくなるアイデアが満載！さぁ、いますぐチェック！