CSSハックとは…その対応法

ブログ初心者の無料アクセスアップ法

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

CSSハックとは…その対応法

CSSハックとは

ブラウザによって表示が異なる問題を解決するテクニックです。

ホームページのみならず、ブログでも
テンプレートやCSS(カスケーディングスタイルシート)のカスタマイズをする場合

SafariやOpera、GoogleChrome、Firefoxなど
IE(インターネットエクスプローラー)以外にも様々なブラウザで観覧している方がいます。


各ブラウザと、IEでは多少CSSの解釈が違うことから
IEだけでテンプレートをカスタマイズすると、
他のブラウザでは、デザインが崩れて表示されることがあり
また、IEのVer.によっても表示がことなります。

この、各ブラウザによる表示が異なる問題を
ブラウザごとにスタイルシートで設定するテクニックをCSSハックと言います。


では、この問題解決の記述を下記に表記しておきますので、
テンプレートをカスタマイズする方は参考にしていただければと思います。


ただ、とは言っても実は1番厄介なのはIE(インターネットエクスプローラー)の
バージョンの違いによってそれぞれ表示が異なる点です。

ご存知のように、一番利用者が多いのはWindowsのIEです。

IEは、バージョンアップするごとに
徐々にその他のブラウザと同じに表示されるようになってきましたが、

IE6以下、IE7、IE8

それぞれ、CSSの解釈が多少異なりますので、
もしあなたが、IE7でテンプレートをカスタマイズした場合
実はIE6では、プラグインが段落ちしていたなんて事は珍しくありません。

また、IEで正しく表示されていても
GoogleChromeやFirefoxなどの他のブラウザで、表示が崩れていたら
検索エンジンから適正な評価を受けられないなんてこともありますので、
できれば、どのブラウザでサイトを観覧しても
同様に表示されるように、しっかりと対策しておきたいところです。


■CSSハック一覧


IE6以下に適用
* html #hack { margin:0px; }

セレクタの前に【* html 】を付ける。


IE7のみ
*:first-child+html #hack { margin:0px; }

セレクタの前に【*:first-child+html】を付ける。


IE7以外のモダンブラウザに適用(Firefox、Safari、Opera、Chrome、IE8)
html>/**/body #hack { margin:0px; }

セレクタの前に【html>/**/body】を付ける。


IEの各バージョンごとの表示チェックは、IE Testerが便利です。


IE Tester
IEを各Ver.別に同時に表示可能なブラウザです。


■その他各ブラウザ
※IE以外の表示確認の為に、どれか1つくらいはインストールしておくと良いと思います。

Google Chrome

Safari

Opera

Firefox


因みに、私の場合はSafariで確認しながらHPを作成して、
最後にIE Testerで各IEの表示を確認してます。


ランキングサイト

ネット銀行

便利なネットバンクはアフィリエイター必須

口座残高範囲で使用できるクレジットカード機能を備えたデビットカードは、計画的な利用がしやすく便利

最新記事

キーワード検索

プロフィール

タラコ

Name:タラコ

はじめまして^^
ブログ歴・アフィリエイト歴
約3年のタラコが、
初心者でも出来る、
テンプレートの簡単カスタマイズ方法や
SEO対策、パーツやツールなど、
アクセスアップやアフィリエイトに役立つ情報を総合的に紹介しています。


ご意見・ご質問・お問い合わせはこちら
メールフォーム

最新コメント

相互リンク

『CSSハックとは…その対応法』について、説明しています。
ブログ初心者の無料アクセスアップ法

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。