装飾・レイアウトの動的変更 (HTML,CSS,JavaScript)(2ページ目)

複数のタブ切り替え機能は、HTML＋CSSだけで作成可能ページを移動せずにボックスの表示内容を切り替えられる下図のようなタブ機能(タブボックス)は、多くのウェブサイトで使われています。タブの切り替え処理にはJavaScriptが使われることもありますが、実はHTML＋CSSだけで作れます。スクリプト...続きを読む

10月31日はハロウィンですね。ハロウィンは夜のお祭りですし、夜の間だけウェブサイトをハロウィン仕様のデザインに自動的に変化させる仕組みを作ってみるのはいかがでしょうか。以下の枠内には、ハロウィンの説明文が書かれています。この記事を、夜8時～深夜4時の間に見ると、（以下の枠内だけ）ハロウィン仕様のデ...続きを読む

過去2回に渡って、「ページ移動せずに内容を変更するタブ機能（タブボックス）を作る」方法と、「角の丸いタブを作る」方法をご紹介いたしました。そこで今回はそれらを合わせて、下記のように上部の角を丸くした（タブらしく見える）タブを使ってタブボックスを作ってみましょう。<!--/*表示領域全体*/div.s...続きを読む

タブを押すと一瞬で表示内容が切り替わる機能の作り方ウェブページを移動することなく指定範囲の表示内容を切り替えられるタブ機能は、狭い領域にたくさんの情報を掲載したい場合に便利です。ジャンル別に記事を掲載するニュースサイトや、地域別にお知らせを掲載する情報サイトなど、多数のウェブページで見かけます。この...続きを読む

読み込んでいるスタイルシートをファイルごと切り替える読み込むCSSファイルを閲覧者が自由に選択できるようにすることで、動的にデザインを切り替えられる機能になる現在のページで読み込んでいるCSS(スタイルシート)ファイルを、閲覧者がプルダウンメニューを使って(CSSファイルごと)切り替えられる機能を作...続きを読む

目に負担がかかっていませんか？テキストエディタにせよ、ワープロソフトにせよ、画面の基本は、「白地に黒（白色の背景に黒色の文字）」ですね。しかし、この白と黒は、輝度差が大きくなりすぎて、目に負担がかかってしまう組み合わせなようです。特に長い文章を読ませるようなページを作る場合は、閲覧者の目が疲れないよ...続きを読む