ホームページ作成

【ホームページ作成】装飾・レイアウトの動的変更 (HTML,CSS,JavaScript)

装飾・レイアウトの動的変更 (HTML,CSS,JavaScript)

HTMLやスタイルシート（CSS）、JavaScriptを使った装飾、レイアウトの動的な変更方法について解説しました。

クリックしたタブの色を変化させる方法

ページを移動することなく一瞬でボックス内の表示内容が切り替わる「タブボックス」を、もっと見やすく改良してみましょう！選択中のタブがどれなのか明確に分かるよう、タブの色を変化させる方法をご紹介。

ガイド：西村文宏
夜の間だけハロウィン仕様に変化させる

毎日20時～翌4時の夜間だけ、ウェブサイトをハロウィン仕様のデザインに自動的に変化させる仕組みを作ってみましょう。ハロウィンデザインのスタイルシートを作っておき、夜間にだけ適用されるようにします。

ガイド：西村文宏
角丸タブを使ったタブボックスを作る

閲覧者が「タブ」をクリックすると、ページを移動することなく一瞬でボックス内の表示内容が切り替わる「タブボックス」を、上部の角を丸くした（タブらしく見える）タブを使って作ってみましょう。《まとめ編》

ガイド：西村文宏
ページ移動せずに内容を変更するタブを作る

ページを移動することなくボックス内の表示内容を切り替えられる「タブ」機能を作ってみましょう。閲覧者が「タブ」をクリックすると一瞬で内容が変化します。狭い領域に沢山の情報を掲載したい場合などに使えます。

ガイド：西村文宏
スタイルシートを切り替えられる機能を作る

複数のスタイルシートを用意しておき、閲覧者がプルダウンメニューを使って自由に切り替えられる機能を作ってみましょう。読み込むCSSファイルそのものを変更できるので、装飾やレイアウトを大きく変更できます。

ガイド：西村文宏
読みやすいように！閲覧者に色を自由に変更させる方法

白地に黒では、輝度差が大きくて目が疲れてしまいます。読み物ページなどでは、閲覧者の目が疲れないようにしたいですね。背景色・文字色を、閲覧者が自由に変更できるようにしてみましょう。

ガイド：西村文宏

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

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