BGS-WORKS Blog » Coding http://blog.bgs-works.com WEB業界で生き残るためのTipsやカスタマイズ方法をご紹介　 bgs-works.com Sun, 13 Mar 2011 04:22:53 +0000 ja hourly 1 http://wordpress.org/?v=3.0 [Cording] カラーミーで、サムネイルマウスオーバーで拡大画像の効果をつける http://blog.bgs-works.com/2011/03/cording-%e3%82%ab%e3%83%a9%e3%83%bc%e3%83%9f%e3%83%bc%e3%81%a7%e3%80%81%e3%82%b5%e3%83%a0%e3%83%8d%e3%82%a4%e3%83%ab%e3%83%9e%e3%82%a6%e3%82%b9%e3%82%aa%e3%83%bc%e3%83%90%e3%83%bc%e3%81%a7%e6%8b%a1/ http://blog.bgs-works.com/2011/03/cording-%e3%82%ab%e3%83%a9%e3%83%bc%e3%83%9f%e3%83%bc%e3%81%a7%e3%80%81%e3%82%b5%e3%83%a0%e3%83%8d%e3%82%a4%e3%83%ab%e3%83%9e%e3%82%a6%e3%82%b9%e3%82%aa%e3%83%bc%e3%83%90%e3%83%bc%e3%81%a7%e6%8b%a1/#comments Sun, 13 Mar 2011 04:22:53 +0000 admin http://blog.bgs-works.com/?p=756
カラーミーショップをカスタマイズすると、JSが外部から呼び出せないジレンマに陥ることがありますよね。
(新しく追加されたFTPオプションなるものを使えば、外部JSを呼び出せるようになるのかな？わかんないけど)

でも、最近ECサイトで良く見かける、
詳細画面でトップ画像以外のサムネイルにマウスオーバーすると、トップ画像の場所にサムネイルのでかい画像に差し変わる。という効果を入れてみたくないですか？
新規ページで画像だけが開くのも昔チックだし・・・

で、HTML内に埋め込める短いJSソースで、カラーミーの独自タグを生かした方法を見つけました。

入れ込むJavascript

<script type='text/javascript'>
<!--
function largeImg(sImg)
{
document.images['imgBox'].src=sImg;
}
-->
</script>

HTML側のソース

<!-- 商品画像 -->
<{if $product.img_url != ""}>
    <div class="img"><img src="<{$product.img_url}>" class="large" width="400" name="imgBox" /></div>
<{else}>
    <div class="img"><img src="http://img.shop-pro.jp/tmpl_img/21/now200.gif" class="large" /></div>
<{/if}>
<!--// 商品画像 -->

<!-- 商品画像その他 -->
<table cellspacing="0" cellpadding="0">
<tr>
<td><{if $product.ot1_url != ""}><a href="JavaScript:void(0)" onmouseover='largeImg("<{$product.ot1_url}>")' onmouseout='largeImg("<{$product.img_url}>")'><img src="<{$product.ot1_url}>" width="125" /></a><{/if}></td>
<td><{if $product.ot2_url != ""}><a href="JavaScript:void(0)" onmouseover='largeImg("<{$product.ot2_url}>")' onmouseout='largeImg("<{$product.img_url}>")'><img src="<{$product.ot2_url}>" width="125" /></a><{/if}></td>
<td><{if $product.ot3_url != ""}><a href="JavaScript:void(0)" onmouseover='largeImg("<{$product.ot3_url}>")' onmouseout='largeImg("<{$product.img_url}>")'><img src="<{$product.ot3_url}>" width="125" /></a><{/if}></td>
</tr>
</table>
<!--// 商品画像その他 -->

HTMLのtableタグはもちもん、自分のコードに合わせてくれていいんですけど、

onmouseover='largeImg("<{$product.ot1_url}>")'
でサムネイル用のイメージタグである
<{$product.ot1_url}>
を出して、
onmouseout='largeImg("<{$product.img_url}>")'
で一番目の商品画像である
<{$product.img_url}>
タグに戻すって訳ですね。

上に書いたJSはその入れ替わる場所を指定する方法なんだそうです。

タグ:, , , ,
]]> http://blog.bgs-works.com/2011/03/cording-%e3%82%ab%e3%83%a9%e3%83%bc%e3%83%9f%e3%83%bc%e3%81%a7%e3%80%81%e3%82%b5%e3%83%a0%e3%83%8d%e3%82%a4%e3%83%ab%e3%83%9e%e3%82%a6%e3%82%b9%e3%82%aa%e3%83%bc%e3%83%90%e3%83%bc%e3%81%a7%e6%8b%a1/feed/ 0 [JS] jQueryのプラグイン。画像関係のまとめサイト http://blog.bgs-works.com/2011/01/js-jquery%e3%81%ae%e3%83%97%e3%83%a9%e3%82%b0%e3%82%a4%e3%83%b3%e3%80%82%e7%94%bb%e5%83%8f%e9%96%a2%e4%bf%82%e3%81%ae%e3%81%be%e3%81%a8%e3%82%81%e3%82%b5%e3%82%a4%e3%83%88/ http://blog.bgs-works.com/2011/01/js-jquery%e3%81%ae%e3%83%97%e3%83%a9%e3%82%b0%e3%82%a4%e3%83%b3%e3%80%82%e7%94%bb%e5%83%8f%e9%96%a2%e4%bf%82%e3%81%ae%e3%81%be%e3%81%a8%e3%82%81%e3%82%b5%e3%82%a4%e3%83%88/#comments Sat, 22 Jan 2011 13:10:03 +0000 admin http://blog.bgs-works.com/?p=720 うわ〜と感動するほど、網羅してくれてます、このまとめ！
本当いつもすみません。
大変お世話になっております。かちびと.net様！

画像を使ったいろいろなjQueryプラグイン224個まとめ( 200+ collection of jQuery for images )

と

広告等に使えそうなjQueryプラグインいろいろ

ブログを構築する上ですごく便利なjQuery。
あんまりわかってないので、こういうまとめてくれてるのはすごく助かります。
「こういう動きを実装したい」と思っても、それをどんな名前で探せば効率よく見つかるのか、
そこが問題ですからねぇ。検索上位で希望する動きのプラグインが見つかるとも限りませんしね・・・

すぐに見失ってしまって慌てるので、覚え書きをかねての投稿でした。

タグ:, ,
]]> http://blog.bgs-works.com/2011/01/js-jquery%e3%81%ae%e3%83%97%e3%83%a9%e3%82%b0%e3%82%a4%e3%83%b3%e3%80%82%e7%94%bb%e5%83%8f%e9%96%a2%e4%bf%82%e3%81%ae%e3%81%be%e3%81%a8%e3%82%81%e3%82%b5%e3%82%a4%e3%83%88/feed/ 0 [JS] Feed2.js　を使ってフィードを表示すると、新しい記事がすぐ反映されないときの対処法 http://blog.bgs-works.com/2010/10/js-feed2-js%e3%80%80%e3%82%92%e4%bd%bf%e3%81%a3%e3%81%a6%e3%83%95%e3%82%a3%e3%83%bc%e3%83%89%e3%82%92%e8%a1%a8%e7%a4%ba%e3%81%99%e3%82%8b%e3%81%a8%e3%80%81%e6%96%b0%e3%81%97%e3%81%84%e8%a8%98/ http://blog.bgs-works.com/2010/10/js-feed2-js%e3%80%80%e3%82%92%e4%bd%bf%e3%81%a3%e3%81%a6%e3%83%95%e3%82%a3%e3%83%bc%e3%83%89%e3%82%92%e8%a1%a8%e7%a4%ba%e3%81%99%e3%82%8b%e3%81%a8%e3%80%81%e6%96%b0%e3%81%97%e3%81%84%e8%a8%98/#comments Thu, 21 Oct 2010 09:23:04 +0000 admin http://blog.bgs-works.com/?p=713 最近「これ使って」といわれて使ったFeed2.js
導入はRSS Feed（フィード）を表示するを参考にさせていただいて、サクサクいけたのですが、
実際使い始めると「記事を書いても反映されない」とクレームが・・・・
これは困るということで、調べました。

feed2.jsは基本の設定で、新しい反映は　”1時間毎に確認”　になっているようなんです。
なんでやねん！遅いやん！と思ってしまいましたが、文句を言っても始まらないので、地味に設定自体をいじってしまいましょう。

変更する箇所は以下です。
feed2.jsフォルダ直下にある「feed2js_config.php」を開きます。
34行目の

define(‘MAGPIE_CACHE_AGE’, 60*60);

を

define(‘MAGPIE_CACHE_AGE’, 300);

に変更。
これで5分毎に反映の確認をしにいきます。

作った人の感性でしょうが、クライアント（日本人）がせっかちなんですかね？
1時間毎で文句なしなんですかね？
私が個人で使うとしてもちょっと気になっちゃうなぁ。

タグ:,
]]> http://blog.bgs-works.com/2010/10/js-feed2-js%e3%80%80%e3%82%92%e4%bd%bf%e3%81%a3%e3%81%a6%e3%83%95%e3%82%a3%e3%83%bc%e3%83%89%e3%82%92%e8%a1%a8%e7%a4%ba%e3%81%99%e3%82%8b%e3%81%a8%e3%80%81%e6%96%b0%e3%81%97%e3%81%84%e8%a8%98/feed/ 0 [Cording] 初めてのJQuery — class名で判定してCSSを指定する方法 http://blog.bgs-works.com/2010/09/cording-%e5%88%9d%e3%82%81%e3%81%a6%e3%81%aejquery-class%e5%90%8d%e3%81%a7%e5%88%a4%e5%ae%9a%e3%81%97%e3%81%a6css%e3%82%92%e6%8c%87%e5%ae%9a%e3%81%99%e3%82%8b%e6%96%b9%e6%b3%95/ http://blog.bgs-works.com/2010/09/cording-%e5%88%9d%e3%82%81%e3%81%a6%e3%81%aejquery-class%e5%90%8d%e3%81%a7%e5%88%a4%e5%ae%9a%e3%81%97%e3%81%a6css%e3%82%92%e6%8c%87%e5%ae%9a%e3%81%99%e3%82%8b%e6%96%b9%e6%b3%95/#comments Sat, 25 Sep 2010 12:54:59 +0000 admin http://blog.bgs-works.com/?p=688 HTML5とCSS3の勉強を始めると、どうしてもJSが必要になると感じました。
（対応していないブラウザへ最低限の装飾を、条件分岐でJSをかけるとか？）
今まで出来上がりのサンプルしか使った事のない私ですが、簡単なJSをオリジナルでかけるようにしとかなきゃこれから大変！！と思い、「初めてのJQuery」を勉強日記としてアップしていきたいと思います。

とりあえず、すぐにも必要になるであろう、条件分岐をHTML上の「class名」で判定してみたいと思います。
今回はズル、というかなんというか、ほとんど人に教えてもらって作りました。
実際のコードから

<script type="text/javascript">
$(function(){
	$("p").each(function(){
		if( $(this).attr("class") != $("body").attr("class") ) {
			$(this).css("color", "#ff0000");
		}
	});
});
</script>

HTML側はこんなん

<body class="About">
<h1>jQueryサンプル</h1>
<p class="Top">Top</p>
<p class="About">About</p>
<p class="Hoge">Hoge</p>
<p class="Hage">Hage</p>
</body>

では、復習がてらの説明です。

$(“p”).each(function(){

この $("p") で今回は「Pタグ」すべてを対象とし、
.each で「Pタグ」を1つづつ function 内の処理をするように回しています。

次に function 内ですが、

if( $(this).attr(“class”) != $(“body”).attr(“class”) ) {

この部分の詳細説明。
$(this) は上記で指定しているPタグのこと（thisは「これ」ですよね〜）
$("body") は「bodyタグ」を直接指定しています。
今回のHTMLコードをみてもらうとわかりますが、「bodyタグ」にクラスをつけていますよね？これをJSに見つけて欲しいための指定なのです。
.attr("class") はドットの前に指定した$(this)やら$("body")やらのタグの中に書かれているものを探しにいく指定。今回は”class”としましたので、クラス名を取りにいきます。
で、その2つのクラス名が同じか違うかの判定をif文でしている訳です。（!= は「ノットイコール」の時ということになります）

$(this).css(“color”, “#ff0000″);

ここはそのままわかりそうな感じですが、「this」である「Pタグ」に新しくCSSを上書きしています。
CSSの書き方は、最初の””内にプロパティ（background-colorとかfontとか）２個目の””の中に値（カラー番号とかフォントファミリーとか）を指定します。
CSSの指定が多い場合は $(this).css("color", "#ff0000"); の部分を増やしていきます。

HTML側の説明は省くとして、
これでPタグとBODYタグ 両方のクラス名が一緒でない場合は、JS内に書かれたCSSが上書きされる指定が出来ました。

CSS3の指定が使えないブラウザには、上記分岐の応用で、専用のCSSを振り分ける事が出来ます。
このサンプルだと、「ブラウザごとのCSSを別で作れば解決やん？」と思ってしまいますが、
実際作ってみると、それだけではどうにもならない事が出てきちゃうんです。（私は勉強中にさっそくぶちあたりました）
上記サンプルはそのままだと実践用ではないですが、考えようによっては使いやすくなる気がします。

タグ:, , , , ,
]]> http://blog.bgs-works.com/2010/09/cording-%e5%88%9d%e3%82%81%e3%81%a6%e3%81%aejquery-class%e5%90%8d%e3%81%a7%e5%88%a4%e5%ae%9a%e3%81%97%e3%81%a6css%e3%82%92%e6%8c%87%e5%ae%9a%e3%81%99%e3%82%8b%e6%96%b9%e6%b3%95/feed/ 1 [CSS3] CSS3でメジャー効果をIE6-8でも使いたい http://blog.bgs-works.com/2010/09/css3-css3%e3%81%a7%e3%83%a1%e3%82%b8%e3%83%a3%e3%83%bc%e5%8a%b9%e6%9e%9c%e3%82%92ie6-8%e3%81%a7%e3%82%82%e4%bd%bf%e3%81%84%e3%81%9f%e3%81%84/ http://blog.bgs-works.com/2010/09/css3-css3%e3%81%a7%e3%83%a1%e3%82%b8%e3%83%a3%e3%83%bc%e5%8a%b9%e6%9e%9c%e3%82%92ie6-8%e3%81%a7%e3%82%82%e4%bd%bf%e3%81%84%e3%81%9f%e3%81%84/#comments Wed, 22 Sep 2010 12:36:18 +0000 admin http://blog.bgs-works.com/?p=682 CSS3　やればやるほど面白いですね。タグを重ねまくったり、JSで頑張ってた事がCSSだけで出来ちゃった！みたいな。

しかし、作った後、各ブラウザで確認すると、モダンブラウザであれ対応がマチマチでがっかりする事も多いですね〜
特に、IEは9だけしかほぼ対応していなし・・・
やる気そがれちゃいます。
でも、そうは言っても、実践で使ってもいきたいので、例によってJSとかに助けてもらいましょう。ってことです。

1. CSS3 PIE

コーディングしてると、角丸やマルチバックグラウンドなどの実装は結構タブを使ってしまって嫌ですよね。
これがCSS指定で綺麗に作れるのなら、本当にすぐにでも使いたいですよね。
という事でこいつを使いたい場所で呼び出せばいいだけらしいです。
htc ファイルで作られているので、例えば角丸のタブを作ったクラスがあった場合

.tabBox{
    padding: 2em 1em;
    border: 1px solid #CCC;
    background: #FFF;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: #CCC 0 0 .25em;
    -moz-box-shadow: #CCC 0 0 .25em;
    box-shadow: #CCC 0 0 .25em;
    behavior: url(PIE.htc);
}

とかになる訳です。
もちろん読み込む先のURLは自分がアップした場所を指定しなきゃ駄目ですよ。

2. IE用filterとかを巧みに使う
これは、部分的にココだけだから、ココだけ用に！
というときはいいかも。
ただCSSコードがハックだらけになって、見にくくなるかもな〜とか思っちゃいます。

3. CSS3 Solutions for Internet Explorer
もう一つ見つけた個別に対応型。
グラデーションとかマルチバックグラウンドにも対応してる。
すごいな〜こんなん自力で見つけられないわ・・・

4. ie-css3.js ( :nth-childなどのCSS3擬似クラスをIEでも使えるようにするjs ) で失敗した事。
CSS3の擬似セレクタに対応させるためのJSです。
まだ疑似クラスをどうやって効果的に使うのか勉強不足ですが、いざってときに役立ちそうなので、メモです。

でも結局、私が使いたかったtransitionのハックが見つけられなかった・・・
というか対応してないのはJSを呼べばいいんだろうけど・・・
せめてIE9だけでも対応してて欲しかったな〜
MacのFF（3.6ver 現在）も未対応だけど、こっちは次のバージョンアップで対応してくれるでしょ！！
多分 (- – ;

タグ:, , ,
]]> http://blog.bgs-works.com/2010/09/css3-css3%e3%81%a7%e3%83%a1%e3%82%b8%e3%83%a3%e3%83%bc%e5%8a%b9%e6%9e%9c%e3%82%92ie6-8%e3%81%a7%e3%82%82%e4%bd%bf%e3%81%84%e3%81%9f%e3%81%84/feed/ 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