CSSハック
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
単語検索
|
最終更新
|
ヘルプ
]
開始行:
* CSSハック [#pd12f8c6]
** よく使うCSSハック [#z9cf4209]
予備知識。
- スターハック("*")は基本的にIEに適用され、それ以外に適用...
- セレクタ(selector)とは、タグ、クラス、IDのことを指す。
- モダンブラウザとは、Firefox、Opera などのこと。
*** IE6以下に適用(IE7とモダンブラウザには適用されない) [#...
* html (selector) {
}
*** IE7のみに適用(IE7以外には適用されない) [#n730f417]
*+html (selector) {
}
または、
*:first-child+html (selector) {
}
*** 全てのIEに適用(IE以外には適用されない) [#c623c6de]
*+html (selector), *html (selector) {
}
または、
*:first-child+html (selector), *html (selector) {
}
*** IE7を含むモダンブラウザに適用(IE6以下には適用されない...
html>body (selector) {
}
*** IEを除くモダンブラウザに適用(IEには適用されない) [#oc...
html>/**/body (selector) {
}
*** よく使うパターン [#p3649bb6]
div.sample クラスに上手くスタイルをあてる。
#code(HTML){{
<style type="text/css">
/* IE以外に適用 */
div.sample {
max-width:100%;
max-height:500px;
overflow:auto;
position:relative;
}
/* IE7に適用 */
*:first-child+html div.sample {
width:650px;
height:180px;
overflow:auto;
position:relative;
}
/* IE6以前に適用 */
* html div.sample {
width:650px;
height:180px;
overflow:auto;
position:relative;
}
</style>
}}
より後に定義されたスタイルが優先されるという仕様を利用す...
上記の場合、まずモダンブラウザ向けの設定をして、
それ以降に、IEのみ設定を上書きさせている。
*** 参考サイト [#p8189d25]
- [[CSS hacks:http://www.webdevout.net/css-hacks]]
- [[IE7 を含むモダンブラウザ向けの CSS ハックまとめ:http:...
** IEのコンディショナル(条件付)コメント [#d56905dd]
IEのみ、レンダリング対象として読み取られる記法がある。
これを使えば、IE以外はコメントとして扱われて読み取られず...
*** 基本的な記法 [#xa8076d1]
<!--[if (expression)]>
<![endif]-->
上記コメントにはさまれた部分の記述は、IEのみ読み取られる。
expression は、その記述を読み取る条件。
次のように書く。
[comparison] [feature] [version]
- comparison : 適用範囲。lt,gt,lte,gte, のいずれかを指定。
-- lt : 指定バージョンより下(指定バージョンは含まない)。
-- gt : 指定バージョンより上(指定バージョンは含まない)。
-- lte : 指定バージョン以下(指定バージョンを含む)。
-- gte : 指定バージョン以上(指定バージョンを含む)。
- feature : ブラウザの種類。今のところ"IE"しか対応してい...
- version : ブラウザのバージョン。&br;
コンディショナルコメントに対応しているのは 5, 5.5, 6, 7 (...
*** IE7以上に適用 [#o6f9fb1e]
<!--[if gte IE 7]>
<![endif]-->
*** IE6以上に適用 [#fc83b083]
<!--[if gte IE 6]>
<![endif]-->
*** IE6以下に適用 [#nc2e7e91]
<!--[if lte IE 6]>
<![endif]-->
*** IE5.5以下に適用 [#a2620884]
<!--[if lt IE 6]>
<![endif]-->
*** 全てのIEに適用 [#tbbbf8c4]
<!--[if IE]>
<![endif]-->
*** 参考サイト [#pe7b43d0]
- [[正式版完全対応! Internet Explorer 7 CSS攻略法:http://...
- [[About Conditional Comments:http://msdn.microsoft.com/...
- [[Cascading Style Sheet Compatibility in Internet Explo...
-----
[[MLEXP. Wiki]]
#googleads(1,1)
終了行:
* CSSハック [#pd12f8c6]
** よく使うCSSハック [#z9cf4209]
予備知識。
- スターハック("*")は基本的にIEに適用され、それ以外に適用...
- セレクタ(selector)とは、タグ、クラス、IDのことを指す。
- モダンブラウザとは、Firefox、Opera などのこと。
*** IE6以下に適用(IE7とモダンブラウザには適用されない) [#...
* html (selector) {
}
*** IE7のみに適用(IE7以外には適用されない) [#n730f417]
*+html (selector) {
}
または、
*:first-child+html (selector) {
}
*** 全てのIEに適用(IE以外には適用されない) [#c623c6de]
*+html (selector), *html (selector) {
}
または、
*:first-child+html (selector), *html (selector) {
}
*** IE7を含むモダンブラウザに適用(IE6以下には適用されない...
html>body (selector) {
}
*** IEを除くモダンブラウザに適用(IEには適用されない) [#oc...
html>/**/body (selector) {
}
*** よく使うパターン [#p3649bb6]
div.sample クラスに上手くスタイルをあてる。
#code(HTML){{
<style type="text/css">
/* IE以外に適用 */
div.sample {
max-width:100%;
max-height:500px;
overflow:auto;
position:relative;
}
/* IE7に適用 */
*:first-child+html div.sample {
width:650px;
height:180px;
overflow:auto;
position:relative;
}
/* IE6以前に適用 */
* html div.sample {
width:650px;
height:180px;
overflow:auto;
position:relative;
}
</style>
}}
より後に定義されたスタイルが優先されるという仕様を利用す...
上記の場合、まずモダンブラウザ向けの設定をして、
それ以降に、IEのみ設定を上書きさせている。
*** 参考サイト [#p8189d25]
- [[CSS hacks:http://www.webdevout.net/css-hacks]]
- [[IE7 を含むモダンブラウザ向けの CSS ハックまとめ:http:...
** IEのコンディショナル(条件付)コメント [#d56905dd]
IEのみ、レンダリング対象として読み取られる記法がある。
これを使えば、IE以外はコメントとして扱われて読み取られず...
*** 基本的な記法 [#xa8076d1]
<!--[if (expression)]>
<![endif]-->
上記コメントにはさまれた部分の記述は、IEのみ読み取られる。
expression は、その記述を読み取る条件。
次のように書く。
[comparison] [feature] [version]
- comparison : 適用範囲。lt,gt,lte,gte, のいずれかを指定。
-- lt : 指定バージョンより下(指定バージョンは含まない)。
-- gt : 指定バージョンより上(指定バージョンは含まない)。
-- lte : 指定バージョン以下(指定バージョンを含む)。
-- gte : 指定バージョン以上(指定バージョンを含む)。
- feature : ブラウザの種類。今のところ"IE"しか対応してい...
- version : ブラウザのバージョン。&br;
コンディショナルコメントに対応しているのは 5, 5.5, 6, 7 (...
*** IE7以上に適用 [#o6f9fb1e]
<!--[if gte IE 7]>
<![endif]-->
*** IE6以上に適用 [#fc83b083]
<!--[if gte IE 6]>
<![endif]-->
*** IE6以下に適用 [#nc2e7e91]
<!--[if lte IE 6]>
<![endif]-->
*** IE5.5以下に適用 [#a2620884]
<!--[if lt IE 6]>
<![endif]-->
*** 全てのIEに適用 [#tbbbf8c4]
<!--[if IE]>
<![endif]-->
*** 参考サイト [#pe7b43d0]
- [[正式版完全対応! Internet Explorer 7 CSS攻略法:http://...
- [[About Conditional Comments:http://msdn.microsoft.com/...
- [[Cascading Style Sheet Compatibility in Internet Explo...
-----
[[MLEXP. Wiki]]
#googleads(1,1)
ページ名: