ハナモゲラボ / 試行錯誤の実験人生

日々、PCや各種デバイス、楽器等に翻弄されながら電脳の森をさまよう男の日常と様々な実験をさらりと記しております。

JQuery : マウスオーバーでフェード効果

November 13 2008

読み込ませておけば何かと便利なJQuery。
使い勝手が良すぎてホント重宝しております。

今回はマウスオーバーでフェード効果を使うやり方。
どっかで見て習得したものの、ひさしぶりにこれをやろうと思ったら
案の定ど忘れしてたんで覚え書きとして書いておく。

まずJQueryを読み込ませておいてから、下記のスクリプトを書く。

$(document).ready(function(){
$("img.jquery-hover").fadeTo(0,1.0);
$("img.jquery-hover").hover(function(){
$(this).fadeTo(300,0.8);
},
function(){
$(this).fadeTo(300,1.0);
});
});

適当な名前でjsファイルとして保存して、またlinkタグで読み込ませよう。

ちなみにfadeTo(speed, opacity, callback)というプロパティになってます。
speed : フェードの速度。”slow”, “normal”, “fast” の文字列か、ミリ秒を数値で指定。
opacity : 不透明度。0 ~ 1 で指定。この不透明度になるまで、フェードします。
callback : フェードが終了した後に実行されるコールバック関数。(オプション)
今回は不透明度を1~0.8まで300ミリ秒かけて操作するという設定です。

で、imgタグにclass名「jquery-hover」を足してやれば完成。
なんてお手軽。

pタグで囲んで背景色ひいてあげるとその色が透けます。
グラデーション画像ひいてもおもしろいかもです。

追記:
Wordpressで使用する場合、この書き方ではコンフリクトして動かないので
$の部分をすべてjQueryで置き換えれば動作します。
wp_enqueue_scriptで読み込ませればOKです。

idとかclass、君たちの名前は?

November 09 2008

仕事の合間とかにWeb関連の事が書かれたブログを巡回するのが好きです。
やっぱ同じ仕事をしている人達の発見とかやり方は刺激になります。

その中で見つけた記事で
「idとclassになんて名前をつけるのか?」というエントリーがけっこうありました。
これは案件に明確な仕様書でもあれば、その通りつけるんでしょうけど
まず今までそんなガチな案件をやった事がないヘボヘボさんなので・・(泣)

正直、CSS関連は他の制作会社様のコーダーの方達のノウハウをそのまま適用してます。
「あと続きお願いします」って仕事の時に参考にさせてもらって学びました。
だから最初に「Wrapper」って見たときに、「YO!YO!チェケラウ!」みたいな
そんなイメージが頭に浮かんで思わず笑ってしまいました。
いや、初めて見たもんですからそんな単語。

参考エントリー「もう、class名やid名で悩まないんだからっ!!」
http://css-happylife.com/log/memo/000100.shtml

ここに書かれている物は普段でもよく使いますが
正直、どこに何書いたっけ?ってのは、
例えば納品後、半年以上経って「あそこに新製品足して」って場合に
CSSファイルに書かれた膨大なclass名なんてすっかり忘却の彼方って事はままあります。
自分で書いたモンですらわかんねえんですから、他人が見たってわかるわけないですね。
それどころか@importで複数のファイルを読み込ませていると、どこになにが(泣)という
非常に情けない結果になりうる事だってあります。

■自分で見ても!(A)
■他人が見ても!(B)
■簡単にわかる!!(二人)
僕の名前はWrapper~~♪僕の名前はFooter~~♪(30代以上西日本限定:by,ヤンマー)
なんていうのはホント試行錯誤していくしかありません。
幸い、業務はほとんどの場合一人で完結する(今現在)ので、
自分がウンウン悩めばいいだけなんですけどもw

参考エントリー「サイトタイプ別class名管理方法」
http://gyauza.egoism.jp/clip/archives/2008/09/080929-classnaming/
うむう、このエントリーは非常に興味深いです。

「ウチはこれだよ!」って仕様を確立させるのが一番いいんだろうなあ。
そして一番良いのはどんどん「これがメジャー」ってのが固まってきてくれるのがいいんですが。

よくやるのが
CSSリセットやボックスなどの情報をbasic.cssって形にしといて
あとはhtmlタグ別にcssファイルを作る、というパターンです。
class名にはhtmlファイルの名前を頭に入れておきます。(例:dt.index_newinfoとか)
それを一気に@importで読ませます。
これが一番(久々に更新とかで忘却してる際に)見つけやすかった。
アンダーバー入れてしまうとNN6.1とかは読んでくれませんが。

参考サイト:「正しい知識を得たい人の爲のCSS2リファレンス 」
http://hp.vector.co.jp/authors/VA022006/css/index.html
やっぱここの内容を頭にガッツリ入れとかないとなあ。
何が正しいかはその人の環境にもよりますが、出来る事ならちゃんとしたいもんです。
関西では「シュッとした」という言い方が一番近いような(笑)

あ、少なくとも最近は.redtextとか書かなくなりましたっ。
日々勉強、これにつきますね。いやホント。

imgタグにheightとwidthの属性は必要?

November 08 2008

探し物をしてる際になんとなく見つけた記事。
「imgのwidthとheightはいるのか」
http://gyauza.egoism.jp/clip/archives/2007/04/imgwidthheight/

ほほう、興味深い記事ですこれは。
(ただ単によく設定し忘れる、というのは実はないしょだ)

どうやらXHTMLの仕様上では必須属性ではないようです。
個人的にXHTML+CSSでサイトを構築するようになって、最初に頭にあったのは
「文書と見栄えの分離」っていう事でした。(あまり深くは考えずに)

テーブルレイアウトしてた時にソース内に無数に出来てくる数字の羅列(width=”60″とか)を
置換で一気に削除したりして、へいこらとCSSで設定してたのに
なんで画像だけこれがいるんかいね?という疑問も確かにあったんです。
そりゃ画像に全部classつけて・・・ってのも面倒だけども。

ブラウザとしてはHTMLが読み込まれた時に、imgにheightとwidthが設定されてると
前もってその領域を確保してレンダリングするので
読み込み終了までにレイアウトがカックンカックン動かなくてすむそうです。
たまにテキストと画像が多数あるとこでこういうカクカクの挙動見たことある。
あれはそーいうことだったんだなあ。

メンテナンスする制作側からみたら、たとえばロゴとかが変わった場合に
画像サイズまで変わってしまうと、HTMLの修正もしなくちゃならんですから
あえてこの属性を記述しないってのもメリットといえばメリットかも知れない。
(まあDreamweaver上で一気に置換してしまえばいい事なんだけど)

あと、幅が狭い画像に長めのalt属性が書き込まれてた場合には
テキストが切れてしまうってのもデメリットかな。

いろいろな記事を読みあさってみると、なんとWeb Designingの2004年8月号で
属性ありとなしのソースを読み込ませてみたら、
属性なしの方が速かった、という事が書かれていたそうです。
http://www.lucky-bag.com/archives/2005/07/width_height.html
うーん、スピードだけを見てもたぶんそんなに大した違いはなさげやけども。
HDDのベンチマークテストが普通の人の大半には意味も興味もないのと同じような・・

古いブラウザを考慮すれば入れとかなければイカン気もしますが
長い目で(将来を見据えて)見たらあえて入れない方がいいかも知れないですね。
img以外の他の要素はみんなCSSで設定してるわけですから。

一番アカンのがありなしが混在しているというその「仕事の雑さ」でしょうね。
自重せねば・・・・・・

« Dec 2018 January 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31