JavaScript から CSS へ移行

自分のサイトのメニューの Hover 効果を JavaScript から CSS へ移行しました。

JavaScript で画像の切り替えを行うと、呼び出しが 2 回行われるためレスポンス的に良くありません。同じ画像ファイルに、通常の画像と Hover 時の画像を上下に並べて保存し、a:Hover で、background-position をその画像の大きさ分ずらすことで、画像の切り替えができます。

このように、JavaScript から、CSS へ以降するメリットは多くあると思います。

画像ファイルが 1 度に読み込まれるのでタイムラグが発生しない。
通常時と Hover 時の両方の画像を用意しないで、1 つのファイルで管理できる。
そもそも、JavaScript を使わなくて良くなるのが最大の利点。

実はこの方法、先日 XP 視覚テーマファイル (MSSTYLE ファイル) を弄ってた時に思いついた方法です。(XP 視覚テーマでもこの方法を採用しています) しかし、今日検索してみたところ、この方法は有名なようで... 知らなかったです orz

投稿日時 : 2005年1月11日 10:29

コメントを追加

# re: JavaScript から CSS へ移行 2005/01/13 22:06 中博俊

へーうまいこと出来てるなぁ。

# re: JavaScript から CSS へ移行 2005/01/14 11:36 じゃんぬねっと

知らなかったってホント? (w

# あ、他のブラウザでもテストしないとなー。
# ねすけと Opera インストしよっかな...

# re: JavaScript から CSS へ移行 2005/01/14 14:19 中博俊

FireFoxは？(w

# re: JavaScript から CSS へ移行 2005/01/14 16:12 じゃんぬねっと

あ... (w
まあ、多分ズレてない... ズレてない...w

ブラウザごとに、CSS で対応する時って、
それぞれのブラウザのバグを生かして設定する方法がありますね。
CSS の再読込の有無を利用したり...

width : 720px;
w/idth : 704px;

# re: JavaScript から CSS へ移行 2005/01/17 11:18 虎( ´;ﾟ;ё;ﾟ;)

どうも虎( ´;ﾟ;ё;ﾟ;)です
また、どうでもいいことに突っ込みます

> JavaScript で画像の切り替えを行うと、呼び出しが 2 回行われるため良くない。
Imageオブジェクトを使用してhtmlロード時に画像を読み込むようにすれば
呼び出し回数はCSSで書くのと同じになりませんか？
http://www.tagindex.com/javascript/link/change1.html

> 　・画像ファイルが 1 度に読み込まれるのでタイムラグが発生しない。
> 　・通常時と Hover 時の両方の画像を用意しないで、1 つのファイルで管理できる。
> 　・そもそも、JavaScript を使わなくて良くなるのが最大の利点?
ここはul、liでマークアップするほうがよいかと思われます

以上、どうでもいい突っ込みでしたorz

# re: JavaScript から CSS へ移行 2005/01/17 11:27 じゃんぬねっと

> Imageオブジェクトを使用してhtmlロード時に画像を読み込むようにすれば
> 呼び出し回数はCSSで書くのと同じになりませんか？

あ... orz

> ここはul、liでマークアップするほうがよいかと思われます

そういえば、HTML-lint くんに、
<div> の中に <li> は入れられないと叱られた orz
<div> <ul> <li> にすべきですね。
来週までには直しておきます。

# って、そういう意味じゃないのかな...

# re: JavaScript から CSS へ移行 2005/01/17 13:24 虎( ´;ﾟ;ё;ﾟ;)

> # って、そういう意味じゃないのかな...
上の発言の意味は
> 　・画像ファイルが 1 度に読み込まれるのでタイムラグが発生しない。
> 　・通常時と Hover 時の両方の画像を用意しないで、1 つのファイルで管理できる。
> 　・そもそも、JavaScript を使わなくて良くなるのが最大の利点?
の部分は僕には順不同リストに見えたので、pでマークアップするのではなく
ul,liを使用したほうが正しいのでは無いだろうか
ということを言っていたのですが、伝わりませんでしたかorz

> <div> の中に <li> は入れられないと叱られた orz
liはulかolの中にしか存在し得ないですからね

http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/lists.html#h-10.2

# re: JavaScript から CSS へ移行 2005/01/21 22:53 みゃみゅ玉子

みゃみゅ玉子です。

> <div> の中に <li> は入れられないと叱られた orz
これをやりたくて設定するのが、styleでリストアイテムにする方法ですかね。
<div class="a">
<a class="listItem" href="-----">リンク</a>
</div>
にしといて、
a.listItem
{
　display: list-item;
　list-style-image: url("画像");
}
とか。
こうやっておくと、リストのマークがhoverのときに変えられたりして楽しいです。

# re: JavaScript から CSS へ移行 2005/01/22 9:07 じゃんぬねっと

大抵、

　<div id="top">
　　<ul>
　　　<li class="menu">
　　　　<img...>
　　　</li>
　　</ul>
　</div>

でないかい?

# re: JavaScript から CSS へ移行 2005/01/22 10:39 ぺがらぼ

なるほど、これなら、アイコンの切り替えも楽になるねぇ。
私のサイトもメニューいじろっかなぁ...
まぁ、その前にリニューアルで、関係なくなるか...

# re: JavaScript から CSS へ移行 2005/01/22 11:07 じゃんぬねっと

そうですね、JavaScript はなるべく使わない方が良いでしょうから。(^-^)
ただ、CSS がグチャグチャにならないように工夫が必要です。

# id と class の使い分けが下手 > じゃんぬ

# re: JavaScript から CSS へ移行 2005/01/24 2:11 みゃみゅ玉子

> ただ、CSS がグチャグチャにならないように工夫が必要です。

これでいつも後で後悔してます。orz

idなんてほとんど使ってません。（笑）
どんなときに使うのがいいんでしょう？
↓こんな感じでしか使ってない気がします。

<ul class="menuList">
　<li id="menu01"><a href="#page1">一番うえ</a></li>
　<li id="menu02"><a href="#page2">二番目</a></li>
</ul>

ul.menuList li
{
background-color: #000099;
color: #ffffff;
}

li#menu01
{
list-style-image: url("画像1");
}
li#menu02
{
list-style-image: url("画像2");
}

# re: JavaScript から CSS へ移行 2005/01/24 10:19 じゃんぬねっと

＞みゃみゅ玉子さん
私は、Div タグなどの一意のものにしか使いませんね...
一意でないもので、引き継ぐものは Class。
一意なもので、使いまわすのは ID って感じです。

# HTML-lint に怒られちゃうもので (w

タイトル
名前
URL
コメント
名前をブラウザに記憶する