HTML TIPS & TRICKS 2001/09

ルビを制する

QUESTION 2　ルビの有無を切り替えろ！

　ラジオボタンでルビの表示非表示を必要に応じて切り替えることが出来るようにします。

祇園精舎(ぎおんしょうじゃ)の鐘(かね)の音(おと)、諸行無常(しょぎょうむじょう)の響(ひび)きあり。娑羅双樹(さらそうじゅ)の花(はな)の色(いろ)、盛者必衰(じょうしゃひっすい)の理(ことわり)を表(あらわ)す。奢(おご)れる者(もの)も久(ひさ)しからず。唯(ただ)春(はる)の夜(よる)の夢(ゆめ)の如(ごと)し。猛(たけ)き者(もの)も遂(つい)には滅(ほろ)びぬ。偏(ひとえ)に風(かぜ)の前(まえ)の塵(ちり)に同(おな)じ。

HTML

　2つのスタイルシートにリンクしています。内容は後ほど。 


01 <LINK rel="stylesheet" type="text/css" href="rubyFalse.css">
02 <LINK rel="stylesheet" type="text/css" href="rubyTrue.css">
L01

　ルビを表示しないようにするためのスタイルシートです。次の行で、設定値が上書きされます。

L02

　ルビを表示するスタイルシートです。

CSS

rubyTrue.css

01 rt{display:inline;}

　ルビテキストをインラインエレメントとして表示する設定です。

rubyFalse.css

01 rt{display:none;}

　ルビテキストを表示しない設定です。

JavaScript

　ラジオボタンがクリックされたときに処理を呼び出すようにしています。 


01 <input type="radio" name="ruby" checked onClick="document.styleSheets[1].disabled = false;">ルビ表示
02 <input type="radio" name="ruby" onClick="document.styleSheets[1].disabled = true;">ルビ非表示
L01

　2番目にリンクしたスタイルシート（rubyTrue.css）を無効にします。これによって、上書きされていた rubyFalse.css が有効になります。

L02

　L01 と逆の処理です。rubyTrue.css を有効にして、rubyFalse.css を上書きします。

トップページ