TITLE:第11回の課題(2) *課題(2): スタイルシートの切り替えの準備をする [#be0dc49c] > HTMLファイルを編集して、 スタイルシートを切り替えるプログラムを追加します。 < **スクリプトをHTMLファイルに組み込む [#q0f6a98b] スタイルシートを指定した link タグ内に id="cssid" の属性を書き加えます。 </head>の直前にスクリプト(プログラムの一種)を書き加えます。 スクリプトのみ部分だけを、下に書いておきました。 コピーして使ってかまいません。 「第10回のCSSファイル名」というところは、 &color(Red){第10回の課題のCSSファイル名(0622'''学籍番号'''.css)に書き換えて};ください。 #code(html,nolink){{ ... <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> }} 修正結果は、次の図ようになります。&br; なお、&color(Red){図の中の「style.css」の部分は、前回の課題で作成したCSSファイル};と読み替えてください。 #ref(Lecture/JouhouC2007/10th/exercise2/script1.png,nolink,スクリプト) **切り替えのためのタグを記述する [#h3d4abee] タイトルと目次の間、 またはプロフィールの次あたりにスクリプトを使うためのタグを追加します。 #pre(novervatim){{ <a href="#" onclick="replace_css('cssid','CSSファイルの名前');">基本</a> COLOR(red):(注:「CSSファイルの名前」には、前回の課題のCSSファイルを入力してください) }} これは「基本」という文字をクリックしたら、スタイルシートを前回までの課題のCSSファイルに切り替えるという意味になります。 「基本」という文字の部分は別の言葉に変えてもかまいません。他の箇所は変更しないでください。 さらに次の2行を追加します。 #pre(novervatim){{ <a href="#" onclick="replace_css('cssid','0629'''学籍番号'''.css');">第11回</a> <a href="#" onclick="replace_css('cssid','');">なし</a> COLOR(red):(注:「学籍番号」には、自分の学籍番号(c2092XXX)を入力してください) }} ここまでの設定ができると、次のようなことができます。 -「基本」という文字をクリックすると、前回の課題のスタイルシートでの表示に切り替わる -「第11回」という文字をクリックしたら、 スタイルシートを「0629'''学籍番号'''.css」(今回作成)に切り替わる -「なし」をクリックするとスタイルシートを使わない表示に切り替わる たとえば、リンク部分をdiv要素で囲んでおけば、次のような内容になります。 #code(html,nolink){{ <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> }} ---- &navi2(Lecture/JouhouC2010/11th,next);に進んでください。 &br; ---- #navi2(Lecture/JouhouC2010/11th,prev,toc,next) |