以下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.画像ファイルをコピーしてくる
以下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は
ソース内の”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の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"); } }); });
http://allabout.co.jp/gm/gc/23921/2/
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;}
使い方はコチラ
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>