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

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

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

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

    ガイド:西村 文宏

  • 夜の間だけハロウィン仕様に変化させる

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

    ガイド:西村 文宏

  • 角丸タブを使ったタブボックスを作る

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

    ガイド:西村 文宏

  • ページ移動せずに内容を変更するタブを作る

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

    ガイド:西村 文宏

  • スタイルシートを切り替えられる機能を作る

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

    ガイド:西村 文宏

  • 読みやすいように!閲覧者に色を自由に変更させる方法

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

    ガイド:西村 文宏

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

人気ホームページ作成ランキング

Powered by 価格.com

デジタル関連コミュニティ

北欧好きが、愛用の北欧モノを見せ合うコミュニティ

メルマガ登録

【デジタルメルマガ】オトナのオトコなら知っておきたい、PCやデジモノに関する情報をお届けします。

ショッピングカタログ

All About ウェブマガジン

女性向け

雨が楽しくなる!レイングッズ15

男性向け

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

All About モバイル

QRコード

All Aboutがケータイで読める!

オススメ記事をメールでチェック

知識・経験を生かして、記事を書いてみませんか?