The Great Genkainada Iron Works ( Blogger )は、
携帯電話からの投稿が中心となるので、
* Updated by: GGIW
----------------------------------------------- */
p.mobile-photo img{/*vertical_171px_256px*/
width : 12.19047619em;
height: 18.28571428em;
}
を適用しない。
2007-09-09
2007-09-02
2007-03-07
(X)HTMLタグの見直し
先日から体調を崩し、昔買った本を読み直しました。
ドキュメントに対する理解のなさに唖然としています。
ディビジョンとパラグラフの使い方が今でもよく理解できていませんでしたが、
これまで使っていなかった
<q>、
と<blockquote>、
と<pre>、
と<code>、
と<dfn>、
と<kbd>、
と<samp>、
と<var>、
と<tt>、
と<abbr>、
と<acronym>、
と<cite>
おおごとです。
ドキュメントに対する理解のなさに唖然としています。
ディビジョンとパラグラフの使い方が今でもよく理解できていませんでしたが、
これまで使っていなかった
<q>、
と<blockquote>、
と<pre>、
と<code>、
と<dfn>、
と<kbd>、
と<samp>、
と<var>、
と<tt>、
と<abbr>、
と<acronym>、
と<cite>
おおごとです。
2007-02-26
an ultimate weapon for ieMac5.x
先日から、htmlとCSSの修正を行っていましたが。他ではうまくいくのですがieMac5.xでうまくいきません。
うまくいかないというより、大変危険な状態です。
クラッシュしてしまいます。
「プロパティによってはinheritは効きません」と古い本に書いてありました。
早速
を
に変更すると、
何ともなかったように振る舞ってくれます。効きませんじゃありません。
少なくとも「color: inherit;」のときは、大爆発です。
とても危険です。
うまくいかないというより、大変危険な状態です。
クラッシュしてしまいます。
「プロパティによってはinheritは効きません」と古い本に書いてありました。
早速
{
color: inherit;
}
を
{
/*¥*/
color: inherit;
/**/
}
に変更すると、
何ともなかったように振る舞ってくれます。効きませんじゃありません。
少なくとも「color: inherit;」のときは、大爆発です。
とても危険です。
trick for ieWinAll and ~ieMac5.x
特定のブラウザに適用したり、しなかったり。
1.~ieWin6には適用されないが
ieMac5.xには適用される
2.ieMac5.xには適用されない
3.ieWin6.x(Standard)だけには適用しない
4.ieWin7とMOSeに適用する
5.MOSeだけに適用する
、ということです。
うまく利用すると、こんなことができます。
例1
これは、ieWin6.x以下とieMacに適用しない。
つまり、ieWin7とMOSeだけに適用する。
例2
これは、ieWin7以下とieMacに適用しない。
つまり、MOSeだけに適用する。
ちょっとしたパズルです。
1.~ieWin6には適用されないが
ieMac5.xには適用される
html>body ~ {
property:value;
}
2.ieMac5.xには適用されない
~~~{
property/**/:/**/value;
}
3.ieWin6.x(Standard)だけには適用しない
~~~{
property/**/:value;
}
4.ieWin7とMOSeに適用する
html[xmlns] ~~~ {
property:value;
}
5.MOSeだけに適用する
html[xmlns]>/**/body ~~~ {
property:value;
}
、ということです。
うまく利用すると、こんなことができます。
例1
html>body ~~~{
font-size/**/:/**/xxx;
}
これは、ieWin6.x以下とieMacに適用しない。
つまり、ieWin7とMOSeだけに適用する。
例2
html[xmlns]>/**/body ~~~{
font-size/**/:/**/xxx;
}
これは、ieWin7以下とieMacに適用しない。
つまり、MOSeだけに適用する。
ちょっとしたパズルです。
2007-02-25
htmlの修正
htmlの構造を確定する
~ieWin5.5対策を採る
各種コンテンツを記述。
見栄えの全体調整を行う
ヘッドバー。
メニューのスキップや、ラベル、ロゴの表示
メニューをスキップし本文"#main_contents"へジャンプ。
サイトマップの表示(サイトマップは未作成)
ラベルhb_label.jpgの表示
「トップページ」
"http://www.venus.dti.ne.jp/ggiw/"へジャンプ
ロゴhb_logo_02.gifの表示
「上鹿川の日々・つりの生活」
"http://www.venus.dti.ne.jp/ggiw/ggiwfish/"へジャンプ
ヘッドメニュー。
各メインへジャンプ。
リスト<ul id="head_menu">を使用
額縁
"frame"等へ名称変更を行うこと
パンくずリスト
本文の見栄え調整。
空の<div>
本文のはじまり。ジャンプの目標になっている。
本文中のイメージ表示領域を確保するため使用
「注意」「コメント」「サイズ」等のクラスを作成すること
の
の
調整
に内包された"p"
の調整
の調整
「曲名」「作詞」「作曲」「編曲」等のクラスを作成すること
「くり返し」等のクラスを作成すること
default_10.jsで付加される
以上を基本とし、必要に応じ外部スタイルシートを作成、読み込み上書きで調整する。
基本外部スタイルシートは"default_2007_00.css"とする。
最初に、
@import "default_2007_01.css"命令を行う。
バージョン4には適用可能な宣言だけとすること。
基本的なセレクタ(要素・ID・クラス)に基本的な宣言(プロパティ・値)だけをすること。
基本外部スタイルシート"default_2007_00.css"から「@import "default_2007_01.css"」で読み込む。
ieWin、ieMac専用の外部スタイルシートは極力避け、ハックを使用し上書きすること。
ハックの基本は、
に準じ行うこと
1.<html></html>
2.<body></body>
~ieWin5.5対策を採る
body{
text-align: center;
}
で、センタリングを行い
#plate{
text-align: left;
}
で、#plate要素(全体)の左揃えを行う
3.<div id="plate"></div>
各種コンテンツを記述。
見栄えの全体調整を行う
4.<div id="head_bar"></div>
ヘッドバー。
メニューのスキップや、ラベル、ロゴの表示
4ー1.<div id="go_to_main_contents"></div>
メニューをスキップし本文"#main_contents"へジャンプ。
サイトマップの表示(サイトマップは未作成)
4ー2.<div id="hb_ggiw_label"></div>
ラベルhb_label.jpgの表示
「トップページ」
"http://www.venus.dti.ne.jp/ggiw/"へジャンプ
4ー3.<div id="hb_ggiw_logo_02"></div>
ロゴhb_logo_02.gifの表示
「上鹿川の日々・つりの生活」
"http://www.venus.dti.ne.jp/ggiw/ggiwfish/"へジャンプ
5.<div id="head_menu"></div>
ヘッドメニュー。
各メインへジャンプ。
リスト<ul id="head_menu">を使用
6.<div id="mainContents"></div>
額縁
"frame"等へ名称変更を行うこと
7.<div id="crumbs"></div>
パンくずリスト
8.<div id="layer1"></div>
本文の見栄え調整。
9.<div id=""></div>
空の<div>
10.<h3 id="main_contents" class="bar3"></h3>
本文のはじまり。ジャンプの目標になっている。
11.<div id="div class="img_box_left""><div id="div class="img_box_right"">
本文中のイメージ表示領域を確保するため使用
「注意」「コメント」「サイズ」等のクラスを作成すること
11−1"img_box_left"
の
{ float: left;
width: 21em;
margin-left: 0;
margin-right: 1em;
margin-top: 0; }
11−2"img_box_right"
の
{ float: right;
width: 21em;
margin-left: 1em;
margin-right: 1em;
margin-top: 0; }
調整
11−3.<div id="img_box_left">
に内包された"p"
p{ font-size: 83%;
width: 20em;
margin: 1.67em .3em;
text-indent: 0;
line-height: 1.17em;
font-family: sans-serif;}
の調整
11−4.<div class="mycroon"></div>
の調整
「曲名」「作詞」「作曲」「編曲」等のクラスを作成すること
11−5.<div class="my_song_book"></div>
「くり返し」等のクラスを作成すること
99.<div id="footWarning"></div>
default_10.jsで付加される
以上を基本とし、必要に応じ外部スタイルシートを作成、読み込み上書きで調整する。
修正、改良の要点
外部スタイルシート「default_2007_00.css」
基本外部スタイルシートは"default_2007_00.css"とする。
最初に、
@import "default_2007_01.css"命令を行う。
バージョン4には適用可能な宣言だけとすること。
基本的なセレクタ(要素・ID・クラス)に基本的な宣言(プロパティ・値)だけをすること。
@import "default_2007_01.css"
・
・
body{
width: 45em;
margin-top: 0;
background-color: #ffffff;
color: #000000;
text-align: center;
}
#plate{
text-align: left;
}
・
・
基本的な宣言
・
・
外部スタイルシート「default_2007_01.css」
基本外部スタイルシート"default_2007_00.css"から「@import "default_2007_01.css"」で読み込む。
ieWin、ieMac専用の外部スタイルシートは極力避け、ハックを使用し上書きすること。
ハックの基本は、
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;
}
に準じ行うこと
2007-02-24
trick 本文
../diary200y/dialy200ymmdd.html/の本文中の文字サイズを
とりあえず
、としてごまかします。
default_2007_00.cssで使用中止(20100515 変更)
とりあえず
#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; }
、としてごまかします。
default_2007_00.cssで使用中止(20100515 変更)
default trick
トリックのデフォルト
、とするとうまくごまかせます。
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に適用する値を書く
}
、とするとうまくごまかせます。
2007-02-21
htmlの修正を要する
../diary200y/dialy200ymmdd.html/の表示でhtmlの記述が非構造的である。
<div id="mainContents">
<ul id="crumbs">
</ul>
<div id="layer1" class="article_01">
<div>
<h3 id="main_contents" class="bar3">2007年1月3日</h3>
<div id="head_bar">
に
<p><br class="float-clear" / >
修正と再調整を要する。
ieMac5.xで表示が乱れている。
<div id="mainContents">
<ul id="crumbs">
</ul>
<div id="layer1" class="article_01">
<div>
<h3 id="main_contents" class="bar3">2007年1月3日</h3>
<div id="head_bar">
に
<p><br class="float-clear" / >
修正と再調整を要する。
ieMac5.xで表示が乱れている。
2007-02-20
2007-02-18
trick for Internet Explorer version 7
そういえば私のサイトが、新しいInternet Explorerでどう見えているのかチェックをしていませんでした。
Internet Explorer version 7をインストールすることにしますが、なかなかうまくいきません。
マイクロソフトのサイトは、「あんたのPCには新しいInternet Explorerがお似合いさ」
、というのですが
インストーラーからは、「おまえのマシンにはInternet Explorer version 7は、インストールできないぜ」
、と冷たくあしらわれます。
悩んだすえ、「そうだSP2にアップしてなかった」
、とふと気付きます。
それからが大変です、SP2が何処にあるか分かりません。やっと見つけてインストールするまで半日かかってしまいます。
私のサイトは、Internet Explorer version 7でも何とか見えていますが、少しだけ字が大きいようです。
今までは、
で、ごまかしていましたが ieWin7 はごまかせません。
と
で、ieWin7もごまかすことにします。
外部ファイル「default_100.css」を3カ所訂正して今日の作業を終えることにします。
CSS Validatorの検証も
合格です
Internet Explorer version 7をインストールすることにしますが、なかなかうまくいきません。
マイクロソフトのサイトは、「あんたのPCには新しいInternet Explorerがお似合いさ」
、というのですが
インストーラーからは、「おまえのマシンにはInternet Explorer version 7は、インストールできないぜ」
、と冷たくあしらわれます。
悩んだすえ、「そうだSP2にアップしてなかった」
、とふと気付きます。
それからが大変です、SP2が何処にあるか分かりません。やっと見つけてインストールするまで半日かかってしまいます。
私のサイトは、Internet Explorer version 7でも何とか見えていますが、少しだけ字が大きいようです。
今までは、
#plate{
font-size: 100% !important;
font-size: 91%;
}
で、ごまかしていましたが ieWin7 はごまかせません。
#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%;
}
で、ieWin7もごまかすことにします。
外部ファイル「default_100.css」を3カ所訂正して今日の作業を終えることにします。
CSS Validatorの検証も
合格です
2007-02-17
2007-02-13
2007-02-12
trick for Internet Explorer version 5.x
昨日の投稿「trick for version 4.x 」で第4世代ウェブブラウザに対するトリックを投稿しましたので、今日は第5世代のInternet Explorer 5.x(Windows and Macintosh)に対するトリックを考えていきます。
今後、このサイトでは
Band Pass Filterテクニック
大まかには、
Internet Explorer 5.5 (ieWin5.5)が一つの境目のようです。
ieMacは5.2.3が最終バージョン(個人的には好きでした)ですがMac版のIEはWin版とまったく異なるものと捉えた方がよいみたいです。
それでは、
1.ieWin5
2.ieWin5.5
3.~ieWin5.5
4.ieMac5.x
の順に外部スタイルシートを読み込むことにしましょう。ただし、この方法はttyメディア(固定ピッチフォントのテキストが表示される端末。テレタイプ等)を使っていたらうまくいかないかもしれません。もしご利用の方は他の無難なメディアを探すしかありません。でも、テレタイプにi要素(イタリック)てあるのかしら。
1.ieWin5だけが読み込むもの
2.ieWin5.5だけが読み込むもの
3.ieWin5と5.5だけが読み込むもの
4.ieMac5.xだけが読み込むもの
となります。
専用のものだけを読み込んだり、後から読み込んで上書きしたりしながらウェブブラウザに合わせたスタイルシートを適用していくわけです。
これが、
Band Pass Filterと言うテクニックです。
Box Model Hackテクニック
ie4~5.5達は、幅(width)や高さ(height)を指定するとボーダー(border)とパディング(padding)を含んだ範囲に適用してしまいます。当然正しい解釈は内容(content)だけに適用しなければならないのです。そこでvoice-familyプロパティの値に¥(あくまでもバックスラッシュ・エスケープです。CSS2で「¥」は、後ろの文字の特別な意味を消してしまいます)を使用したBox Model Hack は、
と書くと。
CSS2が理解できないie4~5.5達は真ん中にある"}"で宣言が終わったと勘違いしてしまいます。
つまり、
でも、CSS2が理解できるie6以後のie達は真ん中にある"}"で宣言が終わったとは勘違いしません。つまり、
と、新たな値を上書きしてくれるのです。
、というトリックです。スタイルシートを使用してサイトを創造しはじめた黎明期には最先端のものです。しかし、その場しのぎにはもってこいですが、後の管理が大事です。ウェブブラウザに特化した外部スタイルシートで管理する方が楽ちんです。それにトランプの「神経衰弱」ゲームのように、適用するカードを順番にめくっていくのも楽しみの一つです。
なお、詳しくはBox Modele Hackをご覧ください。
今後、このサイトでは
と、表示することにします。
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
Band Pass Filterテクニック
大まかには、
Internet Explorer 5.5 (ieWin5.5)が一つの境目のようです。
ieMacは5.2.3が最終バージョン(個人的には好きでした)ですがMac版のIEはWin版とまったく異なるものと捉えた方がよいみたいです。
それでは、
1.ieWin5
2.ieWin5.5
3.~ieWin5.5
4.ieMac5.x
の順に外部スタイルシートを読み込むことにしましょう。ただし、この方法はttyメディア(固定ピッチフォントのテキストが表示される端末。テレタイプ等)を使っていたらうまくいかないかもしれません。もしご利用の方は他の無難なメディアを探すしかありません。でも、テレタイプにi要素(イタリック)てあるのかしら。
1.ieWin5だけが読み込むもの
@media tty{
i{content:"¥";/*" "*/}};@import'****.css';{;}/*";}
}/**/
2.ieWin5.5だけが読み込むもの
@media tty{
i{content:"¥";/*" "*/}}@m;@import'****.css';{;}/*";}
}/**/
3.ieWin5と5.5だけが読み込むもの
@media tty{
i{content:"¥";/*" "*/}}@import'****.css';/*";}
}/**/
4.ieMac5.xだけが読み込むもの
/*¥*//*/
@import"****.css";
/**/
となります。
専用のものだけを読み込んだり、後から読み込んで上書きしたりしながらウェブブラウザに合わせたスタイルシートを適用していくわけです。
これが、
Band Pass Filterと言うテクニックです。
Box Model Hackテクニック
ie4~5.5達は、幅(width)や高さ(height)を指定するとボーダー(border)とパディング(padding)を含んだ範囲に適用してしまいます。当然正しい解釈は内容(content)だけに適用しなければならないのです。そこでvoice-familyプロパティの値に¥(あくまでもバックスラッシュ・エスケープです。CSS2で「¥」は、後ろの文字の特別な意味を消してしまいます)を使用したBox Model Hack は、
****{
ie4~5.5までに適用するの値
voice-family: "¥"}¥""; voice-family: inherit;
ie6以後に上書き適用するの値
}
と書くと。
CSS2が理解できないie4~5.5達は真ん中にある"}"で宣言が終わったと勘違いしてしまいます。
つまり、
****{と理解してしまいます。
ie4~5.5までに適用するの値
voice-family: "¥"}
でも、CSS2が理解できるie6以後のie達は真ん中にある"}"で宣言が終わったとは勘違いしません。つまり、
****{
ie4~5.5までに適用するの値
voice-family: "¥"}¥"";
voice-family: inherit;
ie6以後に上書き適用するの値
}
と、新たな値を上書きしてくれるのです。
、というトリックです。スタイルシートを使用してサイトを創造しはじめた黎明期には最先端のものです。しかし、その場しのぎにはもってこいですが、後の管理が大事です。ウェブブラウザに特化した外部スタイルシートで管理する方が楽ちんです。それにトランプの「神経衰弱」ゲームのように、適用するカードを順番にめくっていくのも楽しみの一つです。
なお、詳しくはBox Modele Hackをご覧ください。
2007-02-11
trick for version 4.x
1.Netscape 4.x とWindows Internet Explorer 3には外部スタイルシートを読ませない
@importを実行すると Netscape 4.x の初期バージョンは強制終了やフリーズを引き起こす虞があります。Netscape 4.x には外部スタイルシートは読ませてはいけません、最初からはじいてしまいましょう。
<link href="****.css" rel="stylesheet" type="text/css" media="screen,print">
とlink要素のmedia属性が"screen"以外であれば"all"や"screen,print"のように複数であれば、彼らは何がなんだか解らなくなってしまいます。
2.Internet Explorer 4 (Macintosh and Windows)にも外部スタイルシートを読ませない
IE 4 は@importで読み込める外部スタイルシートは
@import url(****.css);のURL形式は読めますが
@import url"****.css";の文字列形式は読めません
そこで、@import url"****.css";の文字列形式で指定すれば、彼も何がなんだか解らなくなってしまいます。
3.Macintosh Internet Explorer 4.5 にも外部スタイルシートを読ませない
ieMac4.5 は@importで読み込める外部スタイルシートは
@import url(****.css);のURL形式は読めますが
@import url("****.css");の二重引用符で囲まれたURL形式は読めません
そこで、@import url("****.css");の二重引用符で囲まれたURL形式で指定すれば、彼にも何がなんだか解らなくなってしまいます。
何故こんなにややこしい事するの
1.2.3を実行するとNetscape 4.x とWindows Internet Explorer 3 & 4.x には外部スタイルシートが適用されなくなります。
めんどくさいのに何故かというと、彼らはCSSでうまく振る舞えません。それなら、いっそ使わない方がいい。
第4世代以前のウェブブラウザには構造化された文章で読んでいただく、当然第5世代以後のウェブブラウザでも一番大切なのは、構造化された文章以外無いのだが。
@importを実行すると Netscape 4.x の初期バージョンは強制終了やフリーズを引き起こす虞があります。Netscape 4.x には外部スタイルシートは読ませてはいけません、最初からはじいてしまいましょう。
<link href="****.css" rel="stylesheet" type="text/css" media="screen,print">
とlink要素のmedia属性が"screen"以外であれば"all"や"screen,print"のように複数であれば、彼らは何がなんだか解らなくなってしまいます。
2.Internet Explorer 4 (Macintosh and Windows)にも外部スタイルシートを読ませない
IE 4 は@importで読み込める外部スタイルシートは
@import url(****.css);のURL形式は読めますが
@import url"****.css";の文字列形式は読めません
そこで、@import url"****.css";の文字列形式で指定すれば、彼も何がなんだか解らなくなってしまいます。
3.Macintosh Internet Explorer 4.5 にも外部スタイルシートを読ませない
ieMac4.5 は@importで読み込める外部スタイルシートは
@import url(****.css);のURL形式は読めますが
@import url("****.css");の二重引用符で囲まれたURL形式は読めません
そこで、@import url("****.css");の二重引用符で囲まれたURL形式で指定すれば、彼にも何がなんだか解らなくなってしまいます。
何故こんなにややこしい事するの
1.2.3を実行するとNetscape 4.x とWindows Internet Explorer 3 & 4.x には外部スタイルシートが適用されなくなります。
めんどくさいのに何故かというと、彼らはCSSでうまく振る舞えません。それなら、いっそ使わない方がいい。
第4世代以前のウェブブラウザには構造化された文章で読んでいただく、当然第5世代以後のウェブブラウザでも一番大切なのは、構造化された文章以外無いのだが。
外部cssファイル
最初に読み込まれる 外部スタイルシートのファイルには文字コードを必ず書きましょう。
でも、
後から読み込まれる外部スタイルシートのファイルには文字コードを書くと
css-validator http://jigsaw.w3.org/css-validator でエラーになります。
@charset "Shift_JIS"; と書けば、その後ろの部分で日本語のコメントやフォントを指定できます。
でも、
後から読み込まれる外部スタイルシートのファイルには文字コードを書くと
css-validator http://jigsaw.w3.org/css-validator でエラーになります。
@charset "Shift_JIS"; と書けば、その後ろの部分で日本語のコメントやフォントを指定できます。
まとめてホイ(border-style)
値設定方法border-styleの他にも
**=margin,padding,border-width,border-colorのプロパティでも同じように
** : 全;
** : 上下 左右;
** : 上 左右 下;
** : 上 右 下 左;
と指定できます。
**=margin,padding,border-width,border-colorのプロパティでも同じように
** : 全;
** : 上下 左右;
** : 上 左右 下;
** : 上 右 下 左;
と指定できます。
まとめてホイ(border-color)
まとめてホイ(border-color)
値設定方法はborder-colorの他にも
**=margin,padding,border-width,border-styleのプロパティでも同じように
** : 全;
** : 上下 左右;
** : 上 左右 下;
** : 上 右 下 左;
と指定できます。
値設定方法はborder-colorの他にも
**=margin,padding,border-width,border-styleのプロパティでも同じように
** : 全;
** : 上下 左右;
** : 上 左右 下;
** : 上 右 下 左;
と指定できます。
まとめてホイ(border-width)
まとめてホイ(border-width)
値設定方法はborder-widthの他にも
**=margin,padding,border-color,border-styleのプロパティでも同じように
** : 全;
** : 上下 左右;
** : 上 左右 下;
** : 上 右 下 左;
と指定できます。
値設定方法はborder-widthの他にも
**=margin,padding,border-color,border-styleのプロパティでも同じように
** : 全;
** : 上下 左右;
** : 上 左右 下;
** : 上 右 下 左;
と指定できます。
まとめてホイ(padding)
まとめてホイ(padding)
値設定方法はpaddingの他にも
**=margin,border-width,border-color,border-styleのプロパティでも同じように
** : 全;
** : 上下 左右;
** : 上 左右 下;
** : 上 右 下 左;
と指定できます。
値設定方法はpaddingの他にも
**=margin,border-width,border-color,border-styleのプロパティでも同じように
** : 全;
** : 上下 左右;
** : 上 左右 下;
** : 上 右 下 左;
と指定できます。
trick for Windows Internet Explorer
Windows Internet Explorer にだけ外部cssファイルを読み込ませる
<!--[if IE]><link rel="stylesheet" href="*****.css" type="text/css" media="screen" /><![endif]-->とheadで書くと、Windows Internet Explorer だけが読み込みます。
trick for Mac Internet Explorer 5.x
ブラウザに特定のcssを適用する
Mac Internet Explorer 5.xはコメント文/**/が不得意のようです
コメント終了の印「*/」の直前に「¥(\)」を書くと次のコメント終了の印「*/」が現れるまで読み飛ばします
まず
と書くと、太字のようにコメント文が3文あるように読んでしまいます。
これでMac Internet Explorer 5.xだけに適用する値「default_100ieMac.css」と「default_101ieMac.css」を読ませ
次に
その他のmozilla, Opera, Windows Internet Explorer はコメント文が2文あるように読みます。これでその他に適用する値「default_100.css」を上書きします。
Mac Internet Explorer 5.xはコメント文/**/が不得意のようです
コメント終了の印「*/」の直前に「¥(\)」を書くと次のコメント終了の印「*/」が現れるまで読み飛ばします
まず
/* for ieMac5.x*/
/*¥*//*/
@import "default_100ieMac.css";
@import "default_101ieMac.css";
/**/
と書くと、太字のようにコメント文が3文あるように読んでしまいます。
これでMac Internet Explorer 5.xだけに適用する値「default_100ieMac.css」と「default_101ieMac.css」を読ませ
次に
/* Hides from ieMac5.x ¥*/と書くと、太字のようにコメント文があるように読んでしまいます。
@import "default_100.css";
/* End hide from ieMac5.x */
その他のmozilla, Opera, Windows Internet Explorer はコメント文が2文あるように読みます。これでその他に適用する値「default_100.css」を上書きします。
margin
初期値: 定義無
適用要素: 全
継承: せず
パーセント指定: 包含ブロック幅に対する割合
値設定方法:
margin : 全;
margin : 上下 左右;
margin : 上 左右 下;
margin : 上 右 下 左;
値:
emを標準とする。
左右をautoでセンタリング。ieMac5.Xはtable要素をセンタリングしない=bag。
opr(opera)6はパディング(余白)を持っている
body{padding: 0;}でない(仕様)ため、
body{padding : 0; }をdefaultで設定すること
バグ:
ieMac5.Xはtable要素をセンタリングしない。
trick for Windows Internet Explorer 6.x
ブラウザに特定のcssを適用する
Windows Internet Explorer
!important宣言をサポートしていません。
だから、まず
!important宣言をしてmozillaや OperaやSafariに最優先で適用させ
次に
Windows Internet Explorerに適用する値を上書きします。
例えば
1.MOSe(mozilla/ Opera/Safari enhancement)には
margin-left: 1em;
2.Windows Internet Explorerには
margin-left: 0;
3.Macintosh Internet Explorerには
ここでは何もありません(から何も適用されません)
が適用されます。
追伸
Windows Internet Explorer7はサポートしたようです。
Windows Internet Explorer
!important宣言をサポートしていません。
だから、まず
!important宣言をしてmozillaや OperaやSafariに最優先で適用させ
次に
Windows Internet Explorerに適用する値を上書きします。
例えば
#fishingday_img{このよう書くと
float : left ;
width: 18em;
/* Hides from ieMac5.x ¥*/
margin-left: 1em !important;
margin-left: 0;
/* End hide from ieMac5.x */
}
1.MOSe(mozilla/ Opera/Safari enhancement)には
margin-left: 1em;
2.Windows Internet Explorerには
margin-left: 0;
3.Macintosh Internet Explorerには
ここでは何もありません(から何も適用されません)
が適用されます。
追伸
Windows Internet Explorer7はサポートしたようです。
登録:
投稿 (Atom)
まとめてホイ(margin)
値設定方法はmarginの他にも
**=padding,border-width,border-color,border-styleのプロパティでも同じように
** : 全;
** : 上下 左右;
** : 上 左右 下;
** : 上 右 下 左;
と指定できます。