JavaScriptでCSSファイル スタイルシートを切替

三郷北高校の「情報」の授業で使っているCSS・HTMLファイルの教材を改良したものです。

ジャバスクリプトでCSSファイルを切り替える

css11.htmを開く(別ウィンドウ)
開いたページで、cssファイルの「変更ボタン」を押してみてください。

スタイルシートによるレイアウトデザイン見本帖。 大藤 幹 (著), 松原 慶太 (著), 押本 祐二 (著) を参考にしました。

ジャバスクリプトでCSSファイルを切り替えるHPの作成方法

  1. css11を開いたら、ソースを表示してください。
  2. このHTMLファイルをコピペして、「css11.htm」という名前で、適当なフォルダに保存してください。
  3. 「css11.htm」ファイルの先頭に以下の記述があります。
    <!-- ============================== -->
    1. <link rel="stylesheet" href="base.css" type="text/css"/>
    2. <link rel="alternate stylesheet" href="css1.css" title="css1" type="text/css" />
    3. <link rel="alternate stylesheet" href="css2.css" title="css2" type="text/css" />
    4. <link rel="alternate stylesheet" href="css3.css" title="css3" type="text/css" />
    5. <script src="switchcss.js"></script>
    「alternate」は「代替のもの」という意味です。
  4. 4つのCSSファイルと、1つのJavaScriptのソースのダウンロードが下の方にあるので、 以下の名前で、同じフォルダに保存してください。
    1. base.css
      最初に使われるCSSファイル
    2. css1.css
      代替のCSSファイル
    3. css2.css
      代替のCSSファイル
    4. css3.css
      代替のCSSファイル
    5. switchcss.js
      CSSファイル切替 用JavaScript
  5. CSSファイル切替 用のボタン「css1を使用」などの画像ファイルを下の方でダウンロードして、同じフォルダに保存してください。
  6. 保存したcss11.htmを開いてみてください。

CSSファイルとJavaScriptのソースのダウンロード

  1. base.cssのダウンロード
  2. css1.cssのダウンロード
  3. css2.cssのダウンロード
  4. css3.cssのダウンロード
  5. switchcss.jsのダウンロード

CSSファイル切替 用のボタン「css1を使用」などの画像

  1. 「css1を使用」css1.gif右クリックして、対象をファイルに保存。
  2. 「css2を使用」css2.gif右クリックして、対象をファイルに保存。
  3. 「css3を使用」css3.gif右クリックして、対象をファイルに保存。

ジャバスクリプトでCSSファイルを切り替えるHPの説明

css11.htmの55行目
下のボタンを押して、CSSファイルを・・・
★<a href="#" onclick="Changecss('css1'); return false;">

  • href="#" hrefはhyper referenceの略。(参照元)。こうするとブラウザにもよるが、どこにも飛ばない。
  • onclick="Changecss('css1') ボタンをクリックclickした時に「Changecss」というジャバスクリプトを動かす。
    その時に「Changecss」というジャバスクリプトに「css1」という因数を伝える。
  • return false return(返す) false(失敗)。clickした時に何らかのエラーがあった時は、システムに「false」を返す。
    普通、そういう事は起きないので、気にする事はない。
  • 「Changecss」「css1」は別の名前に変更しても良い。

★<img src="css1.gif" border="1" alt="css1" /></a>
・css1.gifを「css1を使用」の画像ファイルとして呼び出す為のもの。

  • imgはイメージimageの略。(映像)
  • src="css1.gif" srcはソースsourceの略。(情報源, 出典)
  • border="1" ボーダーborder(境界)境界線の太さを「1」に設定
  • alt="css1" altはオルタネートalternate(代替のもの)の略。画像が表示されない場合、代わりに「css1」という文字が表示される。
  • &nbspは no-break(改行されない)space(空白文字)の略。
    ボタンの間に空白を入れる為に使っている。
  • 「"css1.gif"」「"1"」「"css1"」は変更可

CSSファイルを切り替えるジャバスクリプトの説明

switch css.jsの内容。

ジャバスクリプトは何をしているのか。

  1. <link>タグを探す。
  2. <link rel="alternate stylesheet" href="css1.css" title="css1"
    のような、ものが、幾つか見つかる。
  3. rel="***stylesheet***"という部分があり、かつ、「title」という言葉を使っていれば、とりあえず、リンクを無効にする。
  4. ジャバスクリプトChangecss(ttl)を呼び出した時のttlが「title」の次にある場合だけ、 リンクを有効にする。
  5. これで、Changecss(css1)とすれば、title="css1"と書いてある行の<link>だけが有効になる。

ジャバスクリプトの説明

  • function Changecss(ttl) {
    Changecssという関数functionには因数があって、その名前はttlである。
    ttlはtitleの略で、私が使っているだけで、別の名前でも良い。
    HTMLソースでChangecss('css1'); と書くと、ttlに'css1'が代入される。
  • var i, lnklst;
    var変数として、i, lnklstを使用する事を宣言する。
  • for(i=0; (lnklst = document.getElementsByTagName("link")[i]); i++) {
    linkリンクタグを使っている行をリストアップする。
  • if(lnklst.getAttribute("rel").indexOf("stylesheet") && lnklst.getAttribute("title")) {
    そのリストの中で「rel」の内容に「stylesheet」という言葉を使っていて、
    さらに「title」という言葉を使っていれば、
  • lnklst.disabled = true;
    リンクを無効にする。
  • if(lnklst.getAttribute("title") == ttl lnklst.disabled = false;
    HTMLファイルに書いてある
    <link rel="alternate stylesheet" href="css1.css"title="css1"・・・ />の
    title="○□○"の○□○が、この関数を呼び出した時のttlと同じならば、リンクを有効にする。
  • } } }
  • 「Changecss」「ttl」「i」「lnklst」は変更可

CSSファイル、スタイルシートについて

HTMLクイック リファレンス(スタイルシート リファレンス)
スタイルシート リファレンス(目的別)(ABC順)などがあります。
(別ウィンドウ)

CSSファイルの基本的な使い方は
CSSファイルを利用したホームページの作成を参考にしてください。

CSSファイルを使ったホームページの作り方。無料公開講座

  • 費用:無料
  • 場所:埼玉県三郷市三郷北高校
  • 日時:7月26、27、8月2、3の土日、4日間の13時〜16時。
  • 内容:CSSファイルの使い方。検索で上位ヒットする方法。検索エンジンの仕組み。HTMLタグと検索順位の関係
  • サイト内リンク検索で上位表示されるホームページの作り方三郷北高校無料公開講座

ホームページの作り方に関する無料公開講座

  • 講座名:テキストエディタを使ったホームページの作成
  • 講座内容予定:
    1. 12月27日(土)1時〜4時。NoEditorの使い方。
    2. 12月28日(日)〃。HTMLタグについて。
    3. 1月4日(日)〃。検索で上位表示されるホームページの作成。
    4. ホームページ・ブログの作成経験がある方に最適です。
    5. ホームページの作成が主題です。
  • 費用:無料
  • 場所:三郷北高校 パソコン教室5階
  • サイト内リンクテキストエディタを使ったホームページの作成

最後まで読んでいただいて、ありがとうございました。
↑JavaScriptでCSSファイルを切り替えるの一番上へ↑