更新履歴など。
- 2004.06.07
- できました。いろいろ変わったんでご注意くだされ。
- ファイルの名前も変わったので、それも重ねてご注意を。
ちなみにCCS はCSS-Change-Scriptの略です。 別にカードな魔法少女とは関係ないです。 - 以前のをお使いだった方は、「クッキーの名前」の設定を必ず変えてください。
- 2004.05.28
- スクリプト見直すので、しばらくお待ち下さい。
- 2004.05.26
- OperaでデフォルトのCSSと混ざることがある、
と報告を受けたので誤魔化してみる.
できなかったら131行目の行末〜略〜,10);
の値を多くしてみてください。1/1000秒単位. - あと、よく見てみたらIE以外では title 指定してなくても Off になりそうだったのでこっそり修正.
- 2004.05.19
- ページ移動の際の挙動を修正したりなんだり.
- タグの前後に挿入、の際の入れ方を変更.
- 2004.05.18
- 自動挿入される位置の修正.
- 2004.05.16
- Operaにも対応. ソース追加.
- 2004.05.15
- 選択フォームを select と radio と選べるように.
- 2004.05.14
- ひとまず完成.
- 2004.05.13
- 作り始め
お好きなのをどーぞ。
対象をファイルに保存でひとつ。
スタイルシートのファイルはついてきません。
順番に。
- ccs.jsをダウンロードする。
- つけたいHTMLの中の
<head>
の中に次のように書く。
→<script type="text/javascript" src="ccs.js"></script>
- ついでに、いま使ってるCSSのリンクには、title属性つける。
→<link rel="stylesheet" type="text/css" href="default.css" title="default">
- ccs.jsをメモ帳で開く。
- 「スタイルシートの名前」 と
「スタイルシートのファイル名」 を設定する。
└ 実際あるファイル名(URL)にすること。 ファイル名空白ならスタイル無しモード。 - アップロードする。
- HTMLページを見てみる。
- ページに、CSS選択フォームがでてることを確認する。
- 切り替えて遊んでみる。
- あとはccs.jsの設定を、好みに変えていく。
説明終わり。
HTMLとCSS作ってると、いちいちCSS外して確認するのが、 そりゃもう面倒になってきたので。
で、あー、そういや「スタイル切り替え」ってやつがあったなー、と思い出し、
帝さんとかカヤさんとか使ってるいちゆうポータルさんからもらってきた、
・・・のはよかったんですが、
セレクトフォーム自動挿入
はよいのですが、
一番初めにマッチしたタグに挿入する
ことしかできなく_| ̄|○
<address>
タグに入れよう思ったら、スキンダウンロードのとこに入ったりして。
あと結構、選択のタグも、勝手に入っちゃうので、なんかかんか。
つまり、もうひとこえほしかったわけで。
Operaじゃできないし。
んじゃ自分で作るか、と。(ぉ
そんな感じで、作ってみました(*´ー`)-3
いちゆうさんのと、なんかぐぐってひっかかったkanさんのページを見ながら、あーでもこーでも。
JavaScriptの関数とかサッパリだったので、数時間費やしましたがどーにかこーにか。
で、とりあえずできたこと。
- CSS選択フォームを自動で挿入する?
- 挿入しない.(手動)
- 最初にマッチしたキーワードの、前に挿入.
- 最初にマッチしたキーワードの、後に挿入.
- 最後にマッチしたキーワードの、前に挿入.
- 最後にマッチしたキーワードの、後に挿入.
- CSS選択フォームを挿入するキーワード
- フォームは↑で指定した位置に入ります.
- キーワードに指定できるのは↓のもの
- キーワードの種類と挿入位置は、
- id属性 : その id 要素の中の一番前か後に挿入.
- タグ要素 : そのタグの中の最初か最後に挿入.
- テキスト文字列 : そのテキストの直前か直後
- 指定なし : ページ最上部か最下部.
- CSS選択フォームの造り.
- 選択フォームの前後を挟むタグ
- ↑のタグのid属性.
- ↑のタグのクラス属性.
- 選択フォームは、select:セレクトBOX, radio:ラジオBOX
- そのタグのクラスなど.
- そのタグの直前に入れるテキスト.
- そのタグの直後に入れるテキスト.
・・・が自分で変えられるようにヽ(´▽`)ノ
つまり、最初だけでなく、最後の<address>
タグに挿入できたり、
最後でも、<address>
の前にいれるか、後ろにいれるか指定できたり、
ほかにも、例えばあれですよ、スキンみたく、HTMLに、
<!--CSS_SELECT-->
って書いて、その部分に挿入できたり、
よく使われそうな<div id="footer"> 〜 </div>
の中の、
最前部か最後部に入れられたりとか、
面倒なときとかテストしてるときは、 ページ最上部にいれたり、最下部にいれてみたりとか、
・・・うん、つまりこれがしたかったんですよ、的な。
(´ー`)y−
そんな。
使用上・仕様上の注意、など。
- JavaScriptがONでないとあたりマメに使えません。
- Win + IE6、Opera7、NN7、Firefox、等ではできることを確認。
- Mac では試してないのでできるか分かりませぬ…。
- HTMLにデフォルトのCSS
(通常 or no-script時の)
を書くときは、title属性をつけること。
<link rel="stylesheet" type="text/css" href="default.css" title="default">
- 常時使用するCSS
(CSSを切り替えた時も適用)
を書くときは、title属性をつけないで書くこと。
<link rel="stylesheet" type="text/css" href="main.css">
あるいは@import
とか使えばいいかも。 - JavaScript内でなく、HTML内に直接代替CSSを書いていってもOK。
- HTMLに
<style>
やstyle=""
で直接書かれたCSSは、普通に適用。
Script内の仕様での注意、など。
- Scriptでは
ccs
という連想配列とd=document
がグローバル変数になってます。
他のScriptで使われるグローバル変数と被らないように注意してください。
d=document
は被っても同じ意味ならたぶん○です。
※もし被っても、このScriptは新しく代入されるのでよいのですが、
他のScriptが使えなくなる可能性がありますです。 - Script内では、ブラウザにより、かなり場合分けしてます。
経験則で、DOM標準でなく、気に入らないかも知れませんが、どうかご容赦を。
参考にさせていただきました。
面白い発想と解説ありがとうございます。
- いちゆうさん ..
http://critical.s6.xrea.com/
.. きっかけをいただきました。 - Kanさん ..
east.portland.ne.jp/~sigekazu/css/javascript9.htm (サイトは閉鎖)
.. NN等の考察を参考にさせていただきました。 - ありみかさとみさん ..
http://www.remus.dti.ne.jp/~a-satomi/
.. onloadイベントのあれやこれやを。文書楼より。 - 北村曉さん ..
http://www.akatsukinishisu.net/
.. addEventListnerの使い方を参考に。 - シュテファン・ミュンツ氏 ..
http://selfhtml-jp.teamone.de/
.. JavaScriptの関数のあり方・使い方がわかりやすかったです。
他にもスタイルシート切り替えなスクリプトを作ったりしてらっしゃる方々へのリンク。
発見し次第追加御免。
- いちゆうポータル
- outsider reflex
- 曉に死す → 徒委記 → 「CSS切替スクリプトを書いてみる(徒書)」にて。
- Jemima's Trek: Home → about → style → 「Styleswitching JavaScript」にて。
-
from DFJ
→ HTML/CSS → 上級編 → CSS小技 → 「CSS切り替えスクリプト」にて。
.. 代替CSSの数が半端じゃないです、すごい(笑)