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
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 ]マージンの相殺■
どうしたらこういう場合の表示を同じにできるか?
これの正しい処方解説は下記へ。
そこで講義している内容から、CSSの正しい処方について解説しようと思います。
趣旨はブラウザ間の表示を一つのスタイルシートで同じにする(特にIE6-7と、Firefoxなどのモダンブラウザの表示差)・・・です。
各例題のソースをダウンロードして実際にやってみるとよく理解できると思います。
ちなみに手法など全て私のオリジナルです。
まずWEB開発で最初にするべきことは
検証用のブラウザをIEからFirefoxへ変える、です。
IE6,7はCSSを独自解釈していますので害があります。
またFirefoxはCSSを正しく解釈し、開発用に優れたアドオンがたくさんあります。
いつも使用しているアドオンは『Firebug』と『web developer』です。
二つとも日本語版があります。
さて、
まずはもっとも初歩の問題『マージンの相殺』。
IE6/IE7とFirefox/Opera/GoogleChrome/Safariの両方で表示を見比べてみてください。
■例題[ 1 ]マージンの相殺■
■症状[ 1 ]マージンの相殺■
どうしたらこういう場合の表示を同じにできるか?
これの正しい処方解説は下記へ。
マージン(margin)の相殺:CSS2の正しい処方
[ 2008/12/18 02:35 ]
外側と内側のBOXの余白はmarginではなく、
外側BOXのpaddingで空けます。
これですべてのブラウザで同じ表示が実現できます。
■CSS2の処方[ 1 ]マージンの相殺■
/*↓処方CSSソース↓************/
/*↓症状CSS↓************/
外側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;
}
マージン(margin)の相殺:CSS2の正しい処方
[ 2009/01/21 12:01 ]
たとえば、タンスのような構造もこの方法を使い
簡単に構築できます。
■縦並びBOX サンプル■
この場合のポイントは
内容物のBOXには下方向のマージンだけを指定して
BOXどうしの間隔を設定します。
一番最後のBOXはすでに外側BOXのパディングで間隔が設定してありますのでマージンをすべて0に設定します。
※重要なことは、間違ってもマージンの相殺の仕様を利用しようとしないこと。こういう仕様ではデザインはできませんので、上記の手法で回避します。
簡単に構築できます。
■縦並び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;
}
※重要なことは、間違ってもマージンの相殺の仕様を利用しようとしないこと。こういう仕様ではデザインはできませんので、上記の手法で回避します。
-
Amazon.co.jp
詳解HTML&XHTML&CSS辞典私が使用している書籍の改訂版です。お勧めします。 Amazon で購入!
プライバシーについて
-
Amazon.co.jp
DOM Scripting 標準ガイドブック丁寧な解説というより、馬鹿丁寧、ある意味使い勝手悪すぎだけど、中身はとても良いです(^^;)!! Amazon で購入!
プライバシーについて
-
Amazon.co.jp
初めてのActionScript 3.0わかりやすい解説と最高のサンプルコード Amazon で購入!
プライバシーについて
-
Amazon.co.jp
詳解HTML&スタイルシート辞典使用している本です。廃本なので中古しかありませんが最高のXHTML1.0、CSS2.1の辞典。 Amazon で購入!
プライバシーについて
data
・・・・・・・・・・・・・・・・
■Apache サーバ ドキュメント■■アスキー デジタル用語辞典
■.htaccess実践活用術
■スタイルシート例文辞典
■Beginner's CGI
・・・・・・・・・・・・・・・・
Other Menu
prev
|
next
Date : 2008/12/13 18:25
Posted by valley | | Edit |
avater