ayako0802 – ページ 9 – WEBってなんだろう

ファイルマージ方法のメモ

以下Araxis Mergeを使う
http://www.agtech.co.jp/products/araxismerge/

1.CSSファイルを統合する
　文字コードを逐一UTF8Nに設定しておくこと。

2.HTMLファイルを統合する
　手動のほうが早いかも？

以下DFを使う
http://freesoft-100.com/review/df.php
3.jsファイルを統合するorコピーしてくる

4.画像ファイルをコピーしてくる

Dreamweaverの文字コード仕様と文字コード統一の正しい手順

Dreamweaverは
ソース内の”charset”を読み取り
ファイル自身の文字コードは無視し
頼んでもないのに
charsetに記述した文字コードで
ファイルを開いてくれちゃう

【文字コード統一の正しい手順】
①Dreamweaverで、charsetを Shift-JIS -> UTF-8 に置換（ローカルサイトを全て一括置換）
②そのまま上書き保存。（ここで、charsetとファイル自身の文字コードにはまだ矛盾がある）
③ツールを使ってShift-JIS -> UTF-8に文字コードを”本当に”変換。

ページを読み込んでからアンカーリンクを動作させたい

ページを読み込んでからアンカーリンクを動作させるためのjQuery

$(window).load(function() {
	var ahash = location.hash;
	var gotoNum = $(ahash).offset().top;
	$('html,body').animate({ scrollTop: gotoNum }, 'slow');
	return false;
});

アニメーションを最小限にする場合’slow’を0に変える（’fast’でもいいかも）

$(window).load(function() {
	var ahash = location.hash;
	var gotoNum = $(ahash).offset().top;
	$('html,body').animate({ scrollTop: gotoNum }, 0 );
	return false;
});

参考
$(document).ready()？ $(window).load()　の違い
http://www.softel.co.jp/blogs/tech/archives/2425

jQueryで画面をスクロールさせる時の注意点
http://less.carbonfairy.org/post/941824993

jQuery の animate の速度（動作時間）を指定する方法
http://alphasis.info/2011/05/jquery-animate-duration/

CSSのみでブラウザの表示枠ぴったりにレイアウトしたい時

cssのheightは親要素の高さに依存するので、親要素を設定してあげる。

html,body{
height: 100%;
}

出典
http://loconet.web2.jp/blog/archives/2006/04/cssheight100.html

ロールオーバーで半透明

cssの場合

a:hover{
	opacity:0.6;
	-moz-opacity:0.6;
	zoom:1; /* ie 6 7 8 */
	filter: alpha(opacity=60);        /* ie 6 7 */
	-ms-filter: "alpha(opacity=60)";  /* ie 8 */
}

jQueryの場合

$(function(){
	//セレクタで指定。使わないものは.not("#hoge")
	$("#momoHeaderBack a img,.hover").not("#h1logo").hover(function(){
		$(this).fadeTo("normal", 0.6); // マウスオーバーで透明度を60%にする
	},function(){
		$(this).fadeTo("normal", 1.0); // マウスアウトで透明度を100%に戻す
	});
});

jQueryとCSS

.opacity{
	opacity:0.6;
	-moz-opacity:0.6;
	filter: alpha(opacity=60);
	-ms-filter: "alpha( opacity=60 )";
}

$(function(){
	$('a img').on({
		'mouseenter':function(){
		$(this).addClass("opacity");
	},
		'mouseleave':function(){
		$(this).removeClass("opacity");
	}
	});
});

IE振り分け用条件付きコメントまとめ

http://allabout.co.jp/gm/gc/23921/2/

minmax.jsの使い方

max-widthやmin-widthを使えるようにするためのjs
minmax.jsの使い方。

まずはこちらからダウンロード。
http://www.doxdesk.com/software/js/minmax.html

『minmax.js』はIE8で見た場合エラーになってしまう。
ダウンロードしたファイルを修正する必要がある。
以下のページを参考にする。
http://www.plusmb.jp/2010/03/22/5303.html

//36行目を書き換える。これを
if (em.style.setExpression) {
    em.style.setExpression('width', 'minmax_checkFont()');
    document.body.insertBefore(em, document.body.firstChild);
}

//こちらに書き換える
if (em.style.setExpression) {
   try {
       em.style.setExpression('width', 'minmax_checkFont()');
       document.body.insertBefore(em, document.body.firstChild);
    }
    catch(err){} 
}

％の指定について

http://parashuto.com/rriver/responsive-web/sub-pixel-rounding-browser-problem

どうやらPCでのコーディングでは、％指定時に小数点以下の値を使わない方が無難らしい。

あとIE6、IE7でカラム落ちを防止するには、
0.5px分を幅から引くのだそうだ。
たとえば100pxの親要素に入った要素の場合、0.5 ÷ 100 = 0.5%を幅の指定値から引く、と。

リンク時に画像の周囲に表示される点線を消去

リンク時に画像に表示される点線を消去。outline:none;
ブラウザにもよるので気が付かないことも多い。
reset.cssにでも入れておいていいかもしれない。

a:link{ color:#ffffff; text-decoration:underline; outline:none;}
a:visited{ color:#ffffff; text-decoration:underline; outline:none;}
a:hover{ color:#ffffff; text-decoration:none; outline:none;}
a:active{ color:#ffffff; text-decoration:none; outline:none;}

IE6でも透過pngを使おう。DD_belatedPNGのメモ

使い方はコチラ
http://smkn.xsrv.jp/blog/2009/04/postscript_dd_belatedpng_js/

設定の変更を忘れがちなので注意。下記みたいに。

DD_belatedPNG.fix('img');

スマートロールオーバーと併用する時は以下の記述を追加しよう。
理由は以下のページ。
http://d.hatena.ne.jp/mi_kattun/20100324/1269444160
同じ理由でz-indexがうまくきかなくなって嵌ることもあるので気をつけよう。まじで。

<script type="text/javascript src="～/DD_belatedPNG_0.0.8a-min.js"></script>
<script type="text/javascript">
    var oldFixPng = DD_belatedPNG.fixPng;
    DD_belatedPNG.fixPng = function (el) {
        oldFixPng(el);
        if (el.vml && el.vml.image.fill.getAttribute("src").match(/_off\./)) {
            el.vml.image.shape.attachEvent('onmouseenter', function() {
                var image = el.vml.image.fill;
                image.setAttribute("src", image.getAttribute("src").replace("_off.", "_on."));
            });
            el.vml.image.shape.attachEvent('onmouseleave', function() {
                var image = el.vml.image.fill;
                image.setAttribute("src", image.getAttribute("src").replace("_on.", "_off."));
            });
        }
    };
    DD_belatedPNG.fix('img, .png_bg');
</script>