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

閲覧者がスタイルシートを切り替えられる機能を作る(5ページ目)

複数のCSS(スタイルシート)ファイルを用意しておき、閲覧者がプルダウンメニューを使って自由にスタイルを切り替えられる機能を作ってみましょう。読み込むCSSファイルそのものを変更できるので、装飾やレイアウトを大きく変えられます。好みのデザインを選択できるようにしたり、様々な配色で表示がどう変わるかを確認できるようにしたい場面などで便利です。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

記述するソースのまとめ

今回のソースをまとめて掲載しておきます。

まず、HTMLのhead要素内(<head>~</head>内)に、CSSファイルを読み込む記述と、それを切り替えるJavaScriptを記述します。
<link rel="stylesheet" type="text/css"
      href="style.css" id="mystyle">
<script type="text/javascript">
function changesytle(cssid,cssfile) {
   document.getElementById(cssid).href = cssfile;
}
</script>

次に、HTMLのbody要素内(<body>~</body>内)に、CSSファイルを切り替える候補を表示するためのプルダウンメニューを記述します。
スタイルの変更:
<select onchange="changesytle('mystyle',value);">
   <option value="style.css">標準スタイル</option>
   <option value="red.css">赤系スタイル</option>
   <option value="blue.css">青系スタイル</option>
   <option value="sea.css">海スタイル</option>
   <option value="">スタイルなし</option>
</select>
最初にlink要素に付加したid属性の値「mystyle」と、プルダウンメニューを作るselect要素内に記述した「mystyle」の記述は同じにしなければなりません。変更する際は、両方を同時に変更して下さい。

複数のCSSファイルを別々に変更できるように作る場合は、id名を変えて必要なだけコピーして(link要素とプルダウンメニューを)掲載して下さい。その場合でも、JavaScriptソースの記述は1回だけで十分です。切り替えたいCSSファイルがいくつあっても、呼び出すスクリプト(関数)は同じだからです。

閲覧者がスタイルシートをファイルごと切り替えられるようにする

今回は、読み込んでいるCSS(スタイルシート)ファイルを、閲覧者自身が自由に切り替えられるようにする機能の作り方をご紹介致しました。好みのデザインを選択できるようにしたり、様々な配色で表示がどう変わるのかを確認できるようにしたい場面などで、ぜひ、活用してみて下さい。

【関連記事】

【編集部おすすめの購入サイト】
楽天市場でホームページ作成関連の書籍を見るAmazon でホームページ作成の参考書を見る
  • 前のページへ
  • 1
  • 3
  • 4
  • 5
※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます