トラブル克服&実験レポート / WebDevelopment  [WEB制作の正しい作法]  

WEB開発・CG製作でのトラブル解決と実験です。
articleList
27PNG画像による透過処理の実験 / Transparent PNG image processing experiments 26Apache インストールの注意点 / httpd-2.2.19 is Buggy software 25jQuery1.4以上のgetJsonエラーと対策/getJson's Error on jquery ver.1.4 24jQuery エラーの原因は、DivX Webプラグイン 23Lady Gaga の新曲リリースにあわせて、カウントダウンするWEBツール作りました。/ Free download countdown parts for Lady Gaga's new album. 22jQueryで上下スクロールの修正 21URIを引数からタイトルに変更しました。 20WIndows7 64bitOSへIE8-32bitの再インストール 19Illustratorで超高速WEBデザイン 18『Clear Fixの勧め』:CSS2の正しい処方![5]/ブラウザ間の表示差を無くす 17『Clear Bothのブラウザ別仕様』:CSS2の正しい処方![4]/ブラウザ間の表示差を無くす 16『Clear Bothの必要性』:CSS2の正しい処方![3]/ブラウザ間の表示差を無くす 15jQueryプラグインに挑戦^^ 14jQuery実験:EASINGサンプルの応用「スライドメニュー」 13jQuery:実験-上下スクロール 12jQueryプラグインの実験-アニメのEasingサンプル 11『3ピクセルジョグ』:CSS2の正しい処方![2]/ブラウザ間の表示差を無くす 10『マージンの相殺』:CSS2の正しい処方!/ブラウザ間の表示差を無くす 9マルチポストスパム対策決定版!! 8404エラーの不明ファイルURIを取得する。 7サーバーへ連続アクセスの原因究明!! 6Movable Type3.33-ja の文字化けバグ解消。 5FireFox でGoogleMapが表示されない!! 4検索エンジン、インデックス登録にかかる時間は? 3タチの悪いウイルスにやられました。 2偶然発見しました(^^;) / MacIEをマウスでスクロール 1壊れたイラストレータファイルを復活!
digivalley0225
digivalley0225 digivalley0225
10

『マージンの相殺』:CSS2の正しい処方!/ブラウザ間の表示差を無くす [ 2008/12/13 18:25 ]

現在、某WEBスクールで講師をしています。
そこで講義している内容から、CSSの正しい処方について解説しようと思います。
趣旨はブラウザ間の表示を一つのスタイルシートで同じにする(特にIE6-7と、Firefoxなどのモダンブラウザの表示差)・・・です。
各例題のソースをダウンロードして実際にやってみるとよく理解できると思います。
ちなみに手法など全て私のオリジナルです。

まずWEB開発で最初にするべきことは
検証用のブラウザをIEからFirefoxへ変える、です。
IE6,7はCSSを独自解釈していますので害があります。
またFirefoxはCSSを正しく解釈し、開発用に優れたアドオンがたくさんあります。
いつも使用しているアドオンは『Firebug』と『web developer』です。
二つとも日本語版があります。

さて、
まずはもっとも初歩の問題『マージンの相殺』。
IE6/IE7とFirefox/Opera/GoogleChrome/Safariの両方で表示を見比べてみてください。


■例題[ 1 ]マージンの相殺■

■症状[ 1 ]マージンの相殺■


どうしたらこういう場合の表示を同じにできるか?
これの正しい処方解説は下記へ。

Date : 2008/12/13 18:25
Posted by valley | | Edit |

avater

マージン(margin)の相殺:CSS2の正しい処方
[ 2008/12/18 02:35 ]

外側と内側のBOXの余白はmarginではなく、
外側BOXのpaddingで空けます。
これですべてのブラウザで同じ表示が実現できます。

■CSS2の処方[ 1 ]マージンの相殺■

/*↓処方CSSソース↓************/

.base //外側BOX
{
margin:10px auto;
padding:10px;
width:200px;
height:100px;
background: #aaa256;
}

.base div //内側BOX
{
padding:5px;
width:120px;
height:55px;
background:#fffce2;
}


/*↓症状CSS↓************/


.base //外側BOX
{
margin:10px auto;
width:200px;
height:100px;
background: #aaa256;
}

.base div //内側BOX
{
margin:10px;
padding:5px;
width:120px;
height:55px;
background:#fffce2;
}

Date : 2008/12/18 02:35
Posted by valley | | Edit |

avater

マージン(margin)の相殺:CSS2の正しい処方
[ 2009/01/21 12:01 ]

たとえば、タンスのような構造もこの方法を使い
簡単に構築できます。

■縦並びBOX サンプル■

この場合のポイントは
内容物のBOXには下方向のマージンだけを指定して
BOXどうしの間隔を設定します。
一番最後のBOXはすでに外側BOXのパディングで間隔が設定してありますのでマージンをすべて0に設定します。

.base3{
margin:10px auto;
padding:10px;

width:200px;
height:275px;
background: #aaa256;
}

.boxStd {
margin:0 0 5px 0;
padding:5px;
width:190px;
height:55px;
background:#aafce2;
}

.boxBtm {
margin:0;
padding:5px;
width:190px;
height:55px;
background:#fffce2;
}


※重要なことは、間違ってもマージンの相殺の仕様を利用しようとしないこと。こういう仕様ではデザインはできませんので、上記の手法で回避します。

Date : 2009/01/21 12:01
Posted by valley | | Edit |

avater