伊那谷で働くWebデザイナーの日記

おっさんホイホイのブログパーツを見つけたのでご紹介。

←（サイドバー上部）にある「STEAL」をクリックしてください（音が出るのでご注意下さい）。消したので以下のリンクからご確認ください。

SPECIAL BLOGPARTS スペシャルブログパーツ
（音が出るのでご注意下さい）

  

ロールオーバーとはリンク画像などにカーソルを乗せた際、別の画像と置換することをいいます。

cssでも背景画像を換えることによって実現できますが、画像に文字が埋めてある場合はリンクテキストをindent:-9999pxなどで画面の外に出さなければなりません。

最近まではよくある方法だったのですが、どうもgoogleはこの方法を悪く評価するらしい、と噂で聞いたのでロールオーバーはｊQuery(Javascript)を利用する方法が多くなるかもしれません。   続きを読む

今回はリンクや画像にカーソルを載せたときに表示される「ツールチップ」作成しました。

2種類作りましたがそれぞれ作り方が違います。

1つ目はリンクの後にツールチップの内容を書きます。スクリプトを工夫することにより、リンクとツールチップを後から増やしてもスクリプトを変更しなくてもいいようにしました。ただし、Javascriptがオフの環境ではレイアウトか崩れ見た目が悪くなります。

2つ目はツールチップを最後に置いてあります。これによりJavascriptがオフの環境でもレイアウトは比較的キレイで見やすいです。ただし、ツールチップを増やすのにかなり複雑なスクリプトになる・・・と思います。   続きを読む

前回製作したアコーディオンパネルと同様に、限られたスペースを有効に使えるタブパネルを作りました。

難しかった場所はスクリプトに出てくる、

li:not("+$("ul.tab li a.selected").attr("href")+")

という部分でした。訳すと「クラス"tab"を持つul要素以下のli要素以下のクラス"selected"を持つa要素の属性値と一致しないli要素」になります。

これでまずselectedが設定されているa要素意外に対応するpanelを指定したことになり、それをhide()で隠しています。

あと今回は、メニューリストの部分にCSS3を使ってグラデーションをかけてみました。
safariやgoogle chromeで見ると綺麗なグラデーションがかかっています。   続きを読む

webサイトの限られたスペースを有効使うことができる「アコーディオンパネル」をチュートリアルに沿って作ってみました。

その中で分からなかったことが一つ。スクリプトで出てくる

$("+dd",this).slideDown("slow");

上記のthisがよくわかりませんでした。

全体的に「現在参照されている要素の次のdd」というセレクタであることはわかるのですが、セレクタのあとに,thisなんて使い方をはじめて知ったので、そんな使い方もあるんだなと。

こういうのはgoogleでも検索しにくいんですよね。this自体がありふれた単語なので。   続きを読む