うまくいかないというより、大変危険な状態です。
クラッシュしてしまいます。
「プロパティによってはinheritは効きません」と古い本に書いてありました。
早速
{
color: inherit;
}
を
{
/*¥*/
color: inherit;
/**/
}
に変更すると、
何ともなかったように振る舞ってくれます。効きませんじゃありません。
少なくとも「color: inherit;」のときは、大爆発です。
とても危険です。
{
color: inherit;
}
{
/*¥*/
color: inherit;
/**/
}
html>body ~ {
property:value;
}
~~~{
property/**/:/**/value;
}
~~~{
property/**/:value;
}
html[xmlns] ~~~ {
property:value;
}
html[xmlns]>/**/body ~~~ {
property:value;
}
html>body ~~~{
font-size/**/:/**/xxx;
}
html[xmlns]>/**/body ~~~{
font-size/**/:/**/xxx;
}
body{
text-align: center;
}
で、センタリングを行い
#plate{
text-align: left;
}
で、#plate要素(全体)の左揃えを行う
{ float: left;
width: 21em;
margin-left: 0;
margin-right: 1em;
margin-top: 0; }
{ float: right;
width: 21em;
margin-left: 1em;
margin-right: 1em;
margin-top: 0; }
p{ font-size: 83%;
width: 20em;
margin: 1.67em .3em;
text-indent: 0;
line-height: 1.17em;
font-family: sans-serif;}
@import "default_2007_01.css"
・
・
body{
width: 45em;
margin-top: 0;
background-color: #ffffff;
color: #000000;
text-align: center;
}
#plate{
text-align: left;
}
・
・
基本的な宣言
・
・
body{
/*width: 45em;*//*default_2007_01.cssで宣言済み*/
/*margin-top: 0;*//*default_2007_01.cssで宣言済み*/
margin-left: auto;
margin-right: auto;
padding: 0;/*opr body要素の余白を消す*/
font-size: small;
}
/* ieWin6.x and ieWin7の追加*/
/* replace ieWin5.x~6 with ieWin7. hide from ~ieWin6 */
html > body{
font-size: small;
/* replace ieWin7 with ieMac5.x. for ieMac5.x ¥*//*/
font-size: small;
/*End for ieMac5.x*/
}
/* replace ieWin7 & ieMac5.x with MOSe. hide from ieWin7 & ieMac5.x */
html[xmlns]>/**/body{
font-size: medium;
}
#layer1 { width: 43em; margin-left: auto; margin-right: auto; line-height: 140%; } /*ieWin6.x and ieWin7のdiary200ymmdd.html用に追加*/ #plate #mainContents #layer1{ font-size: 110%; width: 96%; } /* hide from ~ieWin6*/ html > body #plate #mainContents #layer1{ font-size: 112%; width: 94%; /*for ieMac5.x ¥*//*/ font-size: 100%; width: 100%; /*end for ieMac5.x*/ } /* hide from ~ieWin7*/ html[xmlns]>/**/body #plate #mainContents #layer1{ font-size: 99%; width: 43em; }
body{
margin: 0;
padding: 0;
background-color: #ffffff;
color: #000000;
font-size: small;
ここに、ieWin6.xに適用する値を書く
}
/* hide from ~ieWin6*/
html > body{
font-size: small;
ここに、ieWin7に適用する値を書く
/* for ieMac5.x ¥*//*/
font-size: medium;
ここに、ieMac5.xに適用する値を書く
/*end for ieMac5.x */
}
/* hide from ~ieWin7*/
html[xmlns]>/**/body{
font-size: medium;
ここに、MOSeに適用する値を書く
}
#plate{
font-size: 100% !important;
font-size: 91%;
}
#plate{
font-size: 91%;
line-height: 3em;
}
/* hide from ~ieWin6*/
html > body #plate{
font-size: 85%;
}
/* hide from ieWin7*/
html[xmlns]>/**/body #plate{
line-height: 100%;
font-size: 100%;
}
#head_menu li{
font-size: 75%;
line-height: 3em;
}
/* hide from ~ieWin6*/
html > body #plate #head_menu li{
line-height: 220%;
font-size: 60%;
}
/* hide from ieWin7*/
html[xmlns]>/**/body #plate #head_menu li{
line-height: 100%;
font-size: 100%;
}
と、表示することにします。
ns4 == Netscape/4.x (Macintosh and Windows)
ie4 == Internet Explorer/4 (Macintosh and Windows)
ieMac4.5 == Internet Exprorer/4.5 (Macintosh)
ieMac5.x == Internet Explorer/5.x(latest/5.2) (Macintosh) Tasman
ieWin5== Internet Explorer/5 (Windows)
~ie5.5 == before Internet Explorer/5.5 (Windows)
ieWin5.5== Internet Explorer/5.5 (Windows)
ie5.5~ == after Internet Explorer/5.5 (Windows)
ieWin6 == Internet Explorer 6.x(latest/6.0.2600) (Windows) Trident
ieWinAll== Internet Explorer(Windows)
MOSe == mozilla/ Opera/Safari enhancement
moz5.0 == mozilla/5.0(Firefox , Mozilla and Netscape7.1) Gecko
opr == Opera/6.x/7.x/8.x(latest/8.51)(Macintosh and Windows)
saf == Safari(Macintosh) KHTML
@media tty{
i{content:"¥";/*" "*/}};@import'****.css';{;}/*";}
}/**/
@media tty{
i{content:"¥";/*" "*/}}@m;@import'****.css';{;}/*";}
}/**/
@media tty{
i{content:"¥";/*" "*/}}@import'****.css';/*";}
}/**/
/*¥*//*/
@import"****.css";
/**/
****{
ie4~5.5までに適用するの値
voice-family: "¥"}¥""; voice-family: inherit;
ie6以後に上書き適用するの値
}
****{と理解してしまいます。
ie4~5.5までに適用するの値
voice-family: "¥"}
****{
ie4~5.5までに適用するの値
voice-family: "¥"}¥"";
voice-family: inherit;
ie6以後に上書き適用するの値
}
<!--[if IE]><link rel="stylesheet" href="*****.css" type="text/css" media="screen" /><![endif]-->とheadで書くと、Windows Internet Explorer だけが読み込みます。
/* for ieMac5.x*/
/*¥*//*/
@import "default_100ieMac.css";
@import "default_101ieMac.css";
/**/
/* Hides from ieMac5.x ¥*/と書くと、太字のようにコメント文があるように読んでしまいます。
@import "default_100.css";
/* End hide from ieMac5.x */
適用要素: 全
継承: せず
パーセント指定: 包含ブロック幅に対する割合
値設定方法:
margin : 全;
margin : 上下 左右;
margin : 上 左右 下;
margin : 上 右 下 左;
値:
emを標準とする。
左右をautoでセンタリング。ieMac5.Xはtable要素をセンタリングしない=bag。
opr(opera)6はパディング(余白)を持っている
body{padding: 0;}でない(仕様)ため、
body{padding : 0; }をdefaultで設定すること
バグ:
ieMac5.Xはtable要素をセンタリングしない。
#fishingday_img{このよう書くと
float : left ;
width: 18em;
/* Hides from ieMac5.x ¥*/
margin-left: 1em !important;
margin-left: 0;
/* End hide from ieMac5.x */
}
まとめてホイ(margin)
値設定方法はmarginの他にも
**=padding,border-width,border-color,border-styleのプロパティでも同じように
** : 全;
** : 上下 左右;
** : 上 左右 下;
** : 上 右 下 左;
と指定できます。