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

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

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

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

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

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

css11を開いたら、ソースを表示してください。
このHTMLファイルをコピペして、「css11.htm」という名前で、適当なフォルダに保存してください。
「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」は「代替のもの」という意味です。
４つのCSSファイルと、１つのJavaScriptのソースのダウンロードが下の方にあるので、以下の名前で、同じフォルダに保存してください。
1. base.css
  最初に使われるCSSファイル
2. css1.css
  代替のCSSファイル
3. css2.css
  代替のCSSファイル
4. css3.css
  代替のCSSファイル
5. switchcss.js
  CSSファイル切替 用JavaScript
CSSファイル切替 用のボタン「css1を使用」などの画像ファイルを下の方でダウンロードして、同じフォルダに保存してください。
保存したcss11.htmを開いてみてください。

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

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

「css1を使用」css1.gif右クリックして、対象をファイルに保存。
「css2を使用」css2.gif右クリックして、対象をファイルに保存。
「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（境界）境界線の太さを「１」に設定
alt="css1" altはオルタネートalternate（代替のもの）の略。画像が表示されない場合、代わりに「css1」という文字が表示される。
＆nbspは no-break（改行されない）space（空白文字）の略。
ボタンの間に空白を入れる為に使っている。
「"css1.gif"」「"1"」「"css1"」は変更可

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

switch css.jsの内容。

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

＜link＞タグを探す。
＜link rel="alternate stylesheet" href="css1.css" title="css1"
のような、ものが、幾つか見つかる。
rel="***stylesheet***"という部分があり、かつ、「title」という言葉を使っていれば、とりあえず、リンクを無効にする。
ジャバスクリプトChangecss(ttl)を呼び出した時のttlが「title」の次にある場合だけ、リンクを有効にする。
これで、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. ホームページの作成が主題です。
費用：無料
場所：三郷北高校　パソコン教室５階

最後まで読んでいただいて、ありがとうございました。

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