KAWANO's PukiWiki Plus! - 第11回の課題(2)

課題(2): スタイルシートの切り替えの準備をする

HTMLファイルを編集して、 スタイルシートを切り替えるプログラムを追加します。

スクリプトをHTMLファイルに組み込む

スタイルシートを指定した link タグ内に id="cssid" の属性を書き加えます。

＜/head＞の直前にスクリプト（プログラムの一種）を書き加えます。 スクリプトのみ部分だけを、下に書いておきました。 コピーして使ってかまいません。 「第10回のCSSファイル名」というところは、 第10回の課題のCSSファイル名（0622学籍番号.css）に書き換えてください。

  0
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15

  ...
  <link id="cssid" rel="stylesheet" href="第10回のCSSファイル名" type="text/css">
<script type="text/javascript">
<!--
function replace_css(id,url){
  if(!document.getElementById) return false;
  var element = document.getElementById(id);
  if(!element || !element.cloneNode) return false;
  var new_node = element.cloneNode(true);
  new_node.href = url;
  element.parentNode.replaceChild(new_node,element);
  return true;
}
// -->
</script>

修正結果は、次の図ようになります。
なお、図の中の「style.css」の部分は、前回の課題で作成したCSSファイルと読み替えてください。

切り替えのためのタグを記述する

タイトルと目次の間、 またはプロフィールの次あたりにスクリプトを使うためのタグを追加します。

<a href="#" onclick="replace_css('cssid','CSSファイルの名前');">基本</a> 
（注：「CSSファイルの名前」には、前回の課題のCSSファイルを入力してください）

これは「基本」という文字をクリックしたら、スタイルシートを前回までの課題のCSSファイルに切り替えるという意味になります。 「基本」という文字の部分は別の言葉に変えてもかまいません。他の箇所は変更しないでください。

さらに次の2行を追加します。

<a href="#" onclick="replace_css('cssid','0629学籍番号.css');">第11回</a>
<a href="#" onclick="replace_css('cssid','');">なし</a> 
（注：「学籍番号」には、自分の学籍番号（c2092XXX）を入力してください）

ここまでの設定ができると、次のようなことができます。

• 「基本」という文字をクリックすると、前回の課題のスタイルシートでの表示に切り替わる
• 「第11回」という文字をクリックしたら、 スタイルシートを「0629学籍番号.css」（今回作成）に切り替わる
• 「なし」をクリックするとスタイルシートを使わない表示に切り替わる

たとえば、リンク部分をdiv要素で囲んでおけば、次のような内容になります。

  0
  1
  2
  3
  4
  5
  6

<div>
[
<a href="#" onclick="replace_css('cssid','0622c2092000.css');">基本</a> |
<a href="#" onclick="replace_css('cssid','0629c2092000.css');">第11回</a> |
<a href="#" onclick="replace_css('cssid','');">なし</a> 
]
</div>

次へに進んでください。