BGS-WORKS Blog » Coding http://blog.bgs-works.com WEB業界で生き残るためのTipsやカスタマイズ方法をご紹介　 bgs-works.com Sat, 24 Jul 2010 15:07:28 +0000 ja hourly 1 http://wordpress.org/?v=3.0 [Cording] HTML5やCSS3のブラウザ対応表 http://blog.bgs-works.com/2010/04/cording-html5%e3%82%84css3%e3%81%ae%e3%83%96%e3%83%a9%e3%82%a6%e3%82%b6%e5%af%be%e5%bf%9c%e8%a1%a8/ http://blog.bgs-works.com/2010/04/cording-html5%e3%82%84css3%e3%81%ae%e3%83%96%e3%83%a9%e3%82%a6%e3%82%b6%e5%af%be%e5%bf%9c%e8%a1%a8/#comments Fri, 09 Apr 2010 06:07:22 +0000 admin http://blog.bgs-works.com/?p=623 そろそろ本腰入れるべきなのか？
のHTML5ですが、やっぱり使えるテクがブラウザごとの差がありますよね。
その差を一覧にしてくれているサイトさんを発見です。

Web Designer’s Checklist
おお～サイトも綺麗でとっても見やすい！
HTML5とCSS3ってこんなことも出来るんや～とちょっと感動しました。

CSS3 Generator

これもスゴイ！！
Generatorですよ。まさにジェネレーター！
CSS3で新しく実装されたものだけのピックアップなのかなぁ？
みんなすごいね。すごいの作るね。

最後はHTML5もCSS3も関係ないけど・・・・
IEのみタグの考え方の違いを一覧にしてくれています。
Internet Explorer User Agent Style Sheets
すでにIE9が載ってるとこがすげ～

便利なサイトはいっぱいあるなぁ。。

タグ:, ,

関連する投稿

  • 関連する投稿はありません。
]]> http://blog.bgs-works.com/2010/04/cording-html5%e3%82%84css3%e3%81%ae%e3%83%96%e3%83%a9%e3%82%a6%e3%82%b6%e5%af%be%e5%bf%9c%e8%a1%a8/feed/ 0 [Cording] ブラウザごとの表示を確認するサービス http://blog.bgs-works.com/2010/04/cording-%e3%83%96%e3%83%a9%e3%82%a6%e3%82%b6%e3%81%94%e3%81%a8%e3%81%ae%e8%a1%a8%e7%a4%ba%e3%82%92%e7%a2%ba%e8%aa%8d%e3%81%99%e3%82%8b%e3%82%b5%e3%83%bc%e3%83%93%e3%82%b9/ http://blog.bgs-works.com/2010/04/cording-%e3%83%96%e3%83%a9%e3%82%a6%e3%82%b6%e3%81%94%e3%81%a8%e3%81%ae%e8%a1%a8%e7%a4%ba%e3%82%92%e7%a2%ba%e8%aa%8d%e3%81%99%e3%82%8b%e3%82%b5%e3%83%bc%e3%83%93%e3%82%b9/#comments Wed, 07 Apr 2010 03:20:33 +0000 admin http://blog.bgs-works.com/?p=620 いやぁ本当に感激したサービスです。

Adobe browserLab
AdobeのIDだけ持っていれば、ブラウザ上で受けれるサービス。
IEやFirefox、Safari、Choromeなど、今活躍しているブラウザごとに、サイトがどう見えるか確認できるんです。
まぁそれだけなら、他にもありそうですよね？Adobeのすごいのはここから。
オニオスキン機能というのを使うと、2つのブラウザの見え方クロスオーバーで比べる事が出来るんです！
「こんな違うの？？？」とがっかりするほどわかりやすい確認方法です。
コーディングをしている皆様はもちろんですが、
確認作業をしなきゃいけないディレクターの方々も、一度お試しあれ！！

タグ:,

関連する投稿

  • 関連する投稿はありません。
]]> http://blog.bgs-works.com/2010/04/cording-%e3%83%96%e3%83%a9%e3%82%a6%e3%82%b6%e3%81%94%e3%81%a8%e3%81%ae%e8%a1%a8%e7%a4%ba%e3%82%92%e7%a2%ba%e8%aa%8d%e3%81%99%e3%82%8b%e3%82%b5%e3%83%bc%e3%83%93%e3%82%b9/feed/ 0 [CSS] 画像置換を使わないマウスオーバーテクニック　position指定編 http://blog.bgs-works.com/2010/04/css-%e7%94%bb%e5%83%8f%e7%bd%ae%e6%8f%9b%e3%82%92%e4%bd%bf%e3%82%8f%e3%81%aa%e3%81%84%e3%83%9e%e3%82%a6%e3%82%b9%e3%82%aa%e3%83%bc%e3%83%90%e3%83%bc%e3%83%86%e3%82%af%e3%83%8b%e3%83%83%e3%82%af/ http://blog.bgs-works.com/2010/04/css-%e7%94%bb%e5%83%8f%e7%bd%ae%e6%8f%9b%e3%82%92%e4%bd%bf%e3%82%8f%e3%81%aa%e3%81%84%e3%83%9e%e3%82%a6%e3%82%b9%e3%82%aa%e3%83%bc%e3%83%90%e3%83%bc%e3%83%86%e3%82%af%e3%83%8b%e3%83%83%e3%82%af/#comments Thu, 01 Apr 2010 06:40:51 +0000 admin http://blog.bgs-works.com/?p=598 ○○編・・・
とか言うほどのものでもないですが、自分の覚書を兼ねての投稿です。
まずは通常とマウスオーバーを一緒に切り出します。

そんでもって、１つ１つのボタンのサイズを測っておきます。
で、以下のソースです。

HTML側のソース

<div id="Navigation">
<ul>
<li class="b1"><a href="/aboutus.php"><img src="navi.jpg" alt="TOP" /></a></li>
<li class="b2"><a href="/campaign.php"><img src="navi.jpg" alt="MENU" /></a></li>
<li class="b3"><a href="/faq.php"><img src="navi.jpg" alt="CONTACT" /></a></li>
<li class="b4"><a href="/voice.php"><img src="navi.jpg" alt="ABOUT US" /></a></li>
</ul>
</div>

CSS側のソース

#Navigation{
	clear:both;
	margin:0;
	padding:0;
	height: 40px;
	width: 600px;
}

#Navigation ul{
	margin:0;
	padding: 0px;
	list-style: none;
}

#Navigation ul li{
	margin: 0;
	padding: 0px;
	height: 40px;
	overflow:hidden;
	position:relative;
	float:left;
}
#Navigation ul li a{ position:relative; }
#Navigation ul li a:hover{ border:none; }

#Navigation ul li.b1{ width:120px; }
#Navigation ul li.b1 a{
	top:0;
	left:0;
}
#Navigation ul li.b2{ width:135px; }
#Navigation ul li.b2 a{
	top:0;
	left:-120px;
}
#Navigation ul li.b3{ width:155px; }
#Navigation ul li.b3 a{
	top:0;
	left:-255px;
}
#Navigation ul li.b4{ width:190px; }
#Navigation ul li.b4 a{
	top:0;
	left:-410px;
}
#Navigation ul li a:hover{ top:-40px; }

今いるページでナビの画像をマウスオーバー時に指定したい場合は、
Navigationのdivより前で各ページ名のクラスで包み込んで、以下のソースをcss側に追加です。

#Navigation ul li.b1 a:hover,
.Top #Navigation ul li.b1 a{
	top:-40px;
	left:0;
}

#Navigation ul li.b2 a:hover,
.Menu #Navigation ul li.b2 a{
	top:-40px;
	left:-120px;
}

#Navigation ul li.b3 a:hover,
.Contact #Navigation ul li.b3 a{
	top:-40px;
	left:-255px;
}

#Navigation ul li.b4 a:hover,
.Aboutus #Navigation ul li.b4 a{
	top:-40px;
	left:-410px;
}
タグ:, , ,

関連する投稿

]]> http://blog.bgs-works.com/2010/04/css-%e7%94%bb%e5%83%8f%e7%bd%ae%e6%8f%9b%e3%82%92%e4%bd%bf%e3%82%8f%e3%81%aa%e3%81%84%e3%83%9e%e3%82%a6%e3%82%b9%e3%82%aa%e3%83%bc%e3%83%90%e3%83%bc%e3%83%86%e3%82%af%e3%83%8b%e3%83%83%e3%82%af/feed/ 0 [Cording] IEでmin-heightやmax-widthを使えるようにするJavascript http://blog.bgs-works.com/2010/01/cording-ie%e3%81%a7min-height%e3%82%84max-width%e3%82%92%e4%bd%bf%e3%81%88%e3%82%8b%e3%82%88%e3%81%86%e3%81%ab%e3%81%99%e3%82%8bjavascript/ http://blog.bgs-works.com/2010/01/cording-ie%e3%81%a7min-height%e3%82%84max-width%e3%82%92%e4%bd%bf%e3%81%88%e3%82%8b%e3%82%88%e3%81%86%e3%81%ab%e3%81%99%e3%82%8bjavascript/#comments Tue, 26 Jan 2010 06:13:15 +0000 admin http://blog.bgs-works.com/?p=547 CSSハックで使えるようになる場面もありますが、
positonなんかとmin-heightと一緒に使うとハックも役に立たなくなるようで、
もういっそのことJavascriptで処理してもらおう！！と探しました。

minmax.js
使い方は読み込むのみ！！
しかもスクリプト本体でIEのみ読み込むようにしてくれているので、モダンブラウザでは存在がなくなる。
素晴らしいです。

ありがとうございます。

タグ:, , , ,

関連する投稿

]]> http://blog.bgs-works.com/2010/01/cording-ie%e3%81%a7min-height%e3%82%84max-width%e3%82%92%e4%bd%bf%e3%81%88%e3%82%8b%e3%82%88%e3%81%86%e3%81%ab%e3%81%99%e3%82%8bjavascript/feed/ 0 [CSS] dtとddをfloatで横並びをすると、dlの背景が消えてしまうバグの回避方法 http://blog.bgs-works.com/2009/12/css-dt%e3%81%a8dd%e3%82%92float%e3%81%a7%e6%a8%aa%e4%b8%a6%e3%81%b3%e3%82%92%e3%81%99%e3%82%8b%e3%81%a8%e3%80%81dl%e3%81%ae%e8%83%8c%e6%99%af%e3%81%8c%e6%b6%88%e3%81%88%e3%81%a6%e3%81%97%e3%81%be/ http://blog.bgs-works.com/2009/12/css-dt%e3%81%a8dd%e3%82%92float%e3%81%a7%e6%a8%aa%e4%b8%a6%e3%81%b3%e3%82%92%e3%81%99%e3%82%8b%e3%81%a8%e3%80%81dl%e3%81%ae%e8%83%8c%e6%99%af%e3%81%8c%e6%b6%88%e3%81%88%e3%81%a6%e3%81%97%e3%81%be/#comments Mon, 07 Dec 2009 02:57:09 +0000 admin http://blog.bgs-works.com/?p=483 タイトル通りなのですが、このバグ相変わらずのIE対策。
ずっと、うまく表示できなかったので、別のタグに切り替えて切り抜けていたんですけど、なんかわざわざ作りなおすのも面倒くさい・・・と思い直し、調べるとえらく簡単でした。

ずばり。
ｄｌタグに”display:inline-block;”を付ける。

はい。これだけ。
うそん～まじで～って感じです。

”display:inline-block;”　っていまいち使いどころがわからなくて、なじみがなかったのでついでに調べてみました。

うう・・・よくわからない・・・・

あ、これは便利かも～ハックいっぱい入れなきゃだけど。

また使いどころがはっきりしたら記事を書きたいと思います。。

タグ:, , , ,

関連する投稿

]]> http://blog.bgs-works.com/2009/12/css-dt%e3%81%a8dd%e3%82%92float%e3%81%a7%e6%a8%aa%e4%b8%a6%e3%81%b3%e3%82%92%e3%81%99%e3%82%8b%e3%81%a8%e3%80%81dl%e3%81%ae%e8%83%8c%e6%99%af%e3%81%8c%e6%b6%88%e3%81%88%e3%81%a6%e3%81%97%e3%81%be/feed/ 0 [CSS]　タイトルの並び、右寄せでテキストなどを配置する方法 http://blog.bgs-works.com/2009/11/css%e3%80%80text-float/ http://blog.bgs-works.com/2009/11/css%e3%80%80text-float/#comments Mon, 16 Nov 2009 01:30:03 +0000 admin http://blog.bgs-works.com/?p=459 テキストだけじゃなくて、たとえばRSSのIconだとか、Newマークだとか、
タイトルの右寄せで何か表示させたいときはありませんか？最近そういうオーダーが増えてるんですよね～
で、よくつかっている方法をご紹介します。
完全オリジナルなので、IEハックは入ってしまっているし、なんだか長ったらしいんですけど、すみません。

h4{
position:relative;
}
h4 em{
display:block;
float:right;
line-height:1.4;
position:relative;
*position:absolute;
*right:6px;
font-style:normal;
font-size:85%;
font-weight:normal;
}

h4タグの中に右寄せにしたいものを 　<em>　タグで囲ってください。
するとそれだけpositionの指定どおりに動いてくれます。
ちなみに上記のh4には実際は背景があって、paddingをある程度とっている配置になっています。
特にIEハックの　*right:6px;　や　line-height:1.4;　なんかは自分のデザインによって変更する必要がありますヨ。
また、画像を右寄せにする場合は、 　<em>　の調整が必要になると思いますが、基本は　position　でやっていけます。

これ変じゃない？ってとこあったら、こっそり教えてくださいませ・・・

タグ:, , ,

関連する投稿

]]> http://blog.bgs-works.com/2009/11/css%e3%80%80text-float/feed/ 0 [Cording] IE6用に透過pngを使用する場所によってのタイプ別JS　Vol.3 （背景画像編） http://blog.bgs-works.com/2009/11/cording-ie6-png-vol3/ http://blog.bgs-works.com/2009/11/cording-ie6-png-vol3/#comments Wed, 04 Nov 2009 14:37:51 +0000 admin http://blog.bgs-works.com/?p=438 とうとう来ましたね〜cssの「background」対応バージョン。
いままでも単純に1枚画像ならbackground-imageとして指定する事は出来たのですが、
「background-position」やら「background-repeaat」やらには対応してないものばかりでした。
これが指定出来ないのが本当につらかった・・・・

ようやく見つけましたよ。
png指定も簡単で、且つ、background指定諸々にも耐えうるJS！！

DD_belatedPNG
09/11/04現在の最新バージョンは0.0.8aのようですが、とにかく最新バージョンをダウンロードします。

使い方は、まずHTMLにjsファイルを読み込みます。
もう一つHTML側に、透過pngを使いたいタグ名やclass名をドンドン追加していきます。
公式ページのUsageには以下のソースが載っています。

<!--[if IE 6]>
<script src="DD_belatedPNG.js"></script>
<script>
  /* EXAMPLE */
  DD_belatedPNG.fix('.png_bg');

  /* string argument can be any CSS selector */
  /* .png_bg example is unnecessary */
  /* change it to what suits you! */
</script>
<![endif]-->

この

DD_belatedPNG.fix(‘.png_bg’);

のカッコの中に追加していくわけです。

fix(‘.example1, .example2, img’);

みたいに。

これだけ。これだけでマウスオーバーにも耐えうるし、連続背景左上から、とかの指定も可能。
凄い・・・・かなり嬉しい・・・・
透過pngのない世界って、もう面倒くさくって振り返る気が起きなくなっちゃいますね。

タグ:, , , , ,

関連する投稿

]]> http://blog.bgs-works.com/2009/11/cording-ie6-png-vol3/feed/ 0 [Cording] IE6用に透過pngを使用する場所によってのタイプ別JS　Vol.2 （ナビゲーションボタンでのロールオーバー編） http://blog.bgs-works.com/2009/09/cording-ie6%e7%94%a8%e3%81%ab%e9%80%8f%e9%81%8epng%e3%82%92%e4%bd%bf%e7%94%a8%e3%81%99%e3%82%8b%e5%a0%b4%e6%89%80%e3%81%ab%e3%82%88%e3%81%a3%e3%81%a6%e3%81%ae%e3%82%bf%e3%82%a4%e3%83%97%e5%88%a5js-2/ http://blog.bgs-works.com/2009/09/cording-ie6%e7%94%a8%e3%81%ab%e9%80%8f%e9%81%8epng%e3%82%92%e4%bd%bf%e7%94%a8%e3%81%99%e3%82%8b%e5%a0%b4%e6%89%80%e3%81%ab%e3%82%88%e3%81%a3%e3%81%a6%e3%81%ae%e3%82%bf%e3%82%a4%e3%83%97%e5%88%a5js-2/#comments Tue, 15 Sep 2009 01:13:33 +0000 admin http://blog.bgs-works.com/?p=380 以前書いた「[Cording] IE6用に透過pngを使用する場所によってのタイプ別JS　Vol.1」の第2弾です。
今回はナビゲーションで透過pngを使いたい場合。絶対必要なロールオーバー表現を可能にするJSです。
とはいえ、あまりに有名なJSなのでご了承をば。

アルファ画像を扱うalphafilter.jsライブラリ
これです。
他にも数々あれど、ロールオーバーをこんなに簡単に作れるものを私は探せませんでしたよ。作者さまありがとうございます。
使い方は本家サイト見てもらった方が早いのですが、
まずは

<script type="text/javascript" defer="defer" src="js/alphafilter.js"></script>

を読み込みます。
このとき必要なのがdefer="defer"　これを忘れるとうまくいきません。
そのあと必要なことが、
透過pngを使いたいタグやimgにclass="alphafilter"をつけてあげること。
ロールオーバー表現をCSSで作る場合はそれ用のclassを作っていると思うので、それを
class="alphafilter btn"
みたいにして指定してあげればOK。
ちなみに、
ロールオーバー表現は2009/5に追加されていたんですね。
本当に感謝です！

タグ:, , , ,

関連する投稿

]]> http://blog.bgs-works.com/2009/09/cording-ie6%e7%94%a8%e3%81%ab%e9%80%8f%e9%81%8epng%e3%82%92%e4%bd%bf%e7%94%a8%e3%81%99%e3%82%8b%e5%a0%b4%e6%89%80%e3%81%ab%e3%82%88%e3%81%a3%e3%81%a6%e3%81%ae%e3%82%bf%e3%82%a4%e3%83%97%e5%88%a5js-2/feed/ 0 [Cording] IE6用に透過pngを使用する場所によってのタイプ別JS　Vol.1 http://blog.bgs-works.com/2009/09/cording-ie6%e7%94%a8%e3%81%ab%e9%80%8f%e9%81%8epng%e3%82%92%e4%bd%bf%e7%94%a8%e3%81%99%e3%82%8b%e5%a0%b4%e6%89%80%e3%81%ab%e3%82%88%e3%81%a3%e3%81%a6%e3%81%ae%e3%82%bf%e3%82%a4%e3%83%97%e5%88%a5js/ http://blog.bgs-works.com/2009/09/cording-ie6%e7%94%a8%e3%81%ab%e9%80%8f%e9%81%8epng%e3%82%92%e4%bd%bf%e7%94%a8%e3%81%99%e3%82%8b%e5%a0%b4%e6%89%80%e3%81%ab%e3%82%88%e3%81%a3%e3%81%a6%e3%81%ae%e3%82%bf%e3%82%a4%e3%83%97%e5%88%a5js/#comments Tue, 08 Sep 2009 02:08:50 +0000 admin http://blog.bgs-works.com/?p=365 透過png。IE７以上が浸透してきたいま、どうしても使用頻度を上げてしまう透過png。
だがしかし、IE6ユーザーの壁は厚い。（かくゆう私も仕事場ではいまだにIE6）
ということで、どうしても使わざるを得ないIE6用Javascript。

私は透過pngを使うアイテムの場所で、使い分けていますので、それをご紹介。
ちなみにどれもかなり、かなぁり有名で。いまさら感たっぷりです。
本日はこちら

装飾用画像などで使う場合（CSSのbackground指定あり）

IE PNG Fix
私が使っているのは「IEPNGFix v2.0 Alpha」未だにBeta版となっていますが、十分動きます。

ダウンロードすると、色々入っているのですが、必要なものは
・iepngfix_tilebg　のJSファイルと
・iepngfix　のHTCファイルと
・blank　のGIFイメージ

以上3つを任意の場所にアップします。
HTMLファイル側で設定するのは「iepngfix_tilebg」JSファイルの読み込みのみ。HTCの読み込みは必要ありません。
たとえばこんな感じ

<script src="js/iepngfix_tilebg.js" type="text/javascript"></script>

上記はｊｓというフォルダの中に格納している場合です。

次にHTCファイルにblank.gifイメージへのリンク先を指定している場所があるので、それを自分がアップした場所に指定し直します。
私の仕事では使うHTMLファイルからの参照が一定ではないので、絶対パスで指定します。
HTCファイルの大体16行目あたりにあると思います。

IEPNGFix.blankImg = 'http://自分のドメイン/images/blank.gif';

上記はimagesというフォルダの中に格納している場合です。

そんで最後、HTCファイルを使用する指定をCSS側に入れます。
たとえばこんな感じに

img {
behavior:url(http://自分のドメイン/js/iepngfix.htc);
}

ここも私は絶対パスで指定します。相対でも問題はないはずです。
imgタグ全体につけると、すべてのimg src="" ・・・・で指定しているイメージが対象になります。
が、これだけではbackgroundで指定しているイメージは対象になっていません。
ということで、IDなりClassなり、background指定で透過pngを使いたい場合はそこにも１つづつ指定していかなければなりません。

#Navigation{
margin:0px;
padding:0;
width:870px;
height:56px;
background:url(../images/navi_bg.png) no-repeat top left;
behavior:url(http://自分のドメイン/js/iepngfix.htc);
}

みたいに。
background-repeatとかpositionとかにも対応しているものなので、使える場面は多いと思います。

次は、ナビゲーションに透過pngを使いたい場合。
マウスオーバーに対応しているJavascriptです。

タグ:, , , ,

関連する投稿

]]> http://blog.bgs-works.com/2009/09/cording-ie6%e7%94%a8%e3%81%ab%e9%80%8f%e9%81%8epng%e3%82%92%e4%bd%bf%e7%94%a8%e3%81%99%e3%82%8b%e5%a0%b4%e6%89%80%e3%81%ab%e3%82%88%e3%81%a3%e3%81%a6%e3%81%ae%e3%82%bf%e3%82%a4%e3%83%97%e5%88%a5js/feed/ 0 [CSS] cssだけでImage Galleryを作る http://blog.bgs-works.com/2009/09/css-%ef%bd%83%ef%bd%93%ef%bd%93%e3%81%a0%e3%81%91%e3%81%a7image-gallery%e3%82%92%e4%bd%9c%e3%82%8b/ http://blog.bgs-works.com/2009/09/css-%ef%bd%83%ef%bd%93%ef%bd%93%e3%81%a0%e3%81%91%e3%81%a7image-gallery%e3%82%92%e4%bd%9c%e3%82%8b/#comments Mon, 07 Sep 2009 03:08:01 +0000 admin http://blog.bgs-works.com/?p=363 なんだかいまさらな感じですが、相変わらずのIE6で惑わされたので、また使えるように覚書です。

HTML側はこんな感じ

        &lt;ul id=&quot;gallery&quot;&gt;
            &lt;li&gt;
                &lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;images/gallery_img2s.jpg&quot; alt=&quot;gallery thumbnail&quot; /&gt;&lt;span&gt;&lt;img src=&quot;images/gallery_img2.jpg&quot; alt=&quot;gallery image&quot; /&gt;&lt;/span&gt;&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;
                &lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;images/gallery_img3s.jpg&quot; alt=&quot;gallery thumbnail&quot; /&gt;&lt;span&gt;&lt;img src=&quot;images/gallery_img3.jpg&quot; alt=&quot;gallery image&quot; /&gt;&lt;/span&gt;&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;
                &lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;images/gallery_img4s.jpg&quot; alt=&quot;gallery thumbnail&quot; /&gt;&lt;span&gt;&lt;img src=&quot;images/gallery_img4.jpg&quot; alt=&quot;gallery image&quot; /&gt;&lt;/span&gt;&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;
                &lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;images/gallery_img5s.jpg&quot; alt=&quot;gallery thumbnail&quot; /&gt;&lt;span&gt;&lt;img src=&quot;images/gallery_img5.jpg&quot; alt=&quot;gallery image&quot; /&gt;&lt;/span&gt;&lt;/a&gt;
            &lt;/li&gt;
        &lt;/ul&gt;

listの中に大きい画像と小さい画像が同時に格納されています。
大きい画像がで囲われているのがポイントです。

CSS側 はこんなんです。

ul#gallery, ul#gallery li{
	margin:0;
	padding:0;
	list-style:none;
}
ul#gallery{
	background:url(../images/gallery_bg.jpg) no-repeat right top;
	width:690px;
	min-height:300px;
	height:auto !important;
	height:100%;
	position:relative;
}
ul#gallery li{
	margin-right:190px;
	margin-bottom:10px;
	zoom:1;
}
ul#gallery li a span{
	display:none;
}
ul#gallery li a:hover{
	background:transparent none repeat scroll 0 0;
	z-index:100;
}
ul#gallery li a:hover span{
	display:block;
	position:absolute;
	width:500px;
	min-height:300px;
	height:auto !important;
	height:100%;
	top:0;
	left:190px;
}

左にサムネイル。右にプレビュー画像のレイアウトになります。
レイアウト関係はpositonで簡単に動かせると思うので、サムネイルを下やら上やら、色々使ってみようと思います。

このテクニックも参考サイトがあるんですけど、
参考にさせてもらったサイト様で出ていたソースそのままだと、IE6がうまく動きませんでした。
どうもdisplayプロパティの順番だとかで、IE6だけマウスオーバーが効かなかったりしたっぽいのですが、
理由はなんだかわかりません。

タグ:, , , ,

関連する投稿

]]> http://blog.bgs-works.com/2009/09/css-%ef%bd%83%ef%bd%93%ef%bd%93%e3%81%a0%e3%81%91%e3%81%a7image-gallery%e3%82%92%e4%bd%9c%e3%82%8b/feed/ 0