IE6対応！jQueryで透過PNGのロールオーバーを作る (1/3)
透過PNGに対応したロールオーバーのサンプル。メニュー画像は半透明になっており背景が透けている。IE6を含むクロスブラウザーに対応している（画像クリックでサンプルページを表示します） ロールオーバーの基本部分をおさらい 「透過PNG対応」といっても、IE6以外のブラウザーでは単に透過PNG画像を用意するだけですので、通常のロールオーバーと変わりません。まずは前回のおさらいをかねて、通常のロールオーバーを作成しましょう。以下のようなHTML／XHTML（以下、HTML）を用意します。メニューはul/li要素で記述し、img要素のclass属性には「rollover」を設定します。ここでは、次のような半透明の透過PNG画像を用意し、img要素のsrc属性に指定しています。 ▼サンプル01（HTML部分） <ul> <li><a href="#"><img src="images/jquery.
ウィンドウサイズを変えるとコンテンツが再配置される可変グリッドレイアウトに関する情報まとめ
ウィンドウサイズを変えると コンテンツ（記事等）が再配置される 可変グリッドレイアウトに関する サンプルサイトやWPテーマ、 ライブラリなどの情報のまとめです。 詳しい方には参考にならないっぽいです。 いろいろ意見は分かれそうですが、知っておいて損は無いかなぁと思いますのでメモ。 可変グリッドレイアウトサイト可変グリッドレイアウトを使用したサイトの例。 D&DEPARTMENT PROJECT ECサイト。綺麗にまとまってます。MT使用。 D&DEPARTMENT PROJECT daily vitamins 暇つぶしが出来るサイト？どういう趣旨か分かりませんが、可変グリッド。WPです。 daily vitamins 小林聡美.jp 小林聡美さんのサイト。凄く見やすいです。MT使用。 小林聡美.jp Marunouchi.com 丸の内の情報サイト。ハイクオリティです。写真をダイナミックに
RedLine Magazine : jQueryでリストを開閉させたい
jQueryでリストを開閉させたい こちらの記事、サンプルを拝見して。 Css Globe - Sitemap Styler: Style your Sitemaps with CSS and Javascript 英文なのだが、上記ページの「Examples」の部分の各サンプルを見れば何がしたいかはすぐに分かると思う。サイトマップだけでなく、いろんな場所で使えそう。動きも気持ちいいし、是非使ってみたいと思ったのだが、実際使ってみるとダダーと下階層のulリストを開くためには左の「+」マークを的確にポチっとしないといけない。またjs無効の際、下階層のulリストはCSS側で「display:none;」になっているので、そのままでは中身が表示されない。 じゃあそれ、jQueryでやってみよう。 もう少し自分好みな感じにできないかなーということで、jQueryでやってみることにした。対象となるペ
[JS]ホバー時に光源が移動するエフェクトがかっこいいスクリプト
マウスのホバー時に、光源がカーソルに追従するエフェクトがかっこいいスクリプトをcoders.meから紹介します。
jQueryとCSSを使ってフォームのinput要素を楽に整列させる方法:phpspot開発日誌
Justify elements using jQuery and CSS jQueryとCSSを使ってフォームのinput要素を楽に整列させる方法が紹介されております。 何ができるか？というのは次の図を見て頂くのがはやいでしょう。 ビフォア ↓↓↓↓ アフター これを実現するために、CSSとマークアップによって実現するのが普通ですが、jQueryによってもっとスマートに出来るようですね。 具体的には、次のように、label の中で width がもっとも大きいもののサイズを得て、そのサイズにJavaScriptで調整しちゃうというものです。 $(document).ready(function() { var max = 0; $("label").each(function(){ if ($(this).width() > max) max = $(this).width(); });
8のjQueryのすごいTIPS
8のjQueryのすごいTIPS 原文：8 awesome JQuery tips and tricks 微妙なTIPSもあるのですが、役に立つのもあるのでご紹介。 target="_blank" のリンクの作成 XHTML 1.0 Strict ではtarget=blank属性が利用できない。そこでjQueryを利用して別ウィンドウを開く方法を紹介しよう。 $('a[@rel$='external']').click(function(){ this.target = "_blank"; }); <a href="http://www.lepinskidesign.com.br/" rel="external">lepinskidesign.com.br</a> [to-R補足] 実際に利用する際はjavascript部分を$(function(){...})などで包む必要があります。[
"吹き出し"を画像使わずにCSSで作る方法 | エンタープライズ | マイコミジャーナル
Filament Group ツールティップとしての吹き出しエフェクトはWebページでは広く使われるようになったUIのひとつだ。吹き出しの四隅は丸みを帯びて角の外側は透過表示になり、吹き出しを示すための小さい突起がついているところに特徴がある。多くの場合で背景画像がこれらUIを実現するために使われる。 Filament Groupにおいて、これに背景画像を使わずCSSと若干のHTML、それに多少のJavaScriptを使って実現する例がImage-free CSS Tooltip Pointers - A Use for Polygonal CSS?として紹介されている。Filament GroupではjQuery UIウィジェットの開発中にこの問題にあたり、CSSで多角形を描画するためのよく知られたトリックといくつかの工夫を凝らすことでこれを実現したと説明している。 背景画像を使わないで
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
[JS]クロスブラウザ対応、背景をアニメーションで変更するスクリプト -Blend
http://www.designwalker.com/2009/03/form-design-2.html
position：fixedのright , bottomをIE6に対応させる | CSS Lecture
lllcolor.com