副業で稼ぐ仕組みの作り方

cssのハックと確認方法

自分のホームぺージは見る人によってブラウザが異なります。表示が崩れている場合の事も考えて確認方法とcssのハック方法をご紹介いたします。

はじめに

htmlで各IEのバージョン(IE5、IE6、IE7、IE8、IE9)ごとにcssを読み込ませる方法、firefox、safari、opera、Chromeごとのcssのハックの方法と確認方法をご紹介いたします。

もくじ

注意事項

cssのハックに関しては読み込ませる順番もありますのでそのあたりのみ注意していただければ簡単にハックする事が可能です。

各ブラウザをダウンロードしよう

メインのブラウザ以外はショートカットをまとめおこう

それぞれcssをハックしたのちに確認する為に必要ですのでダウンロードしておきましょう。

Internet Explorer(IE)

Internet Explorerのこちら

Firefox

Firefoxのダウンロードはこちら

Safari

Safariのダウンロードはこちら

Google Chrome

Google Chromeのダウンロードはこちら

Opera

operaのダウンロードはこちら

全てのダウンロードには少し時間がかかりますので時間に余裕のある時でかまいませんのでしておきましょう。

IEを各バージョンごとに確認する方法

一番やっかいな子ですね

IETesterで検索すれば一発で出るので内容は割合させて頂きますが、IE5.5、IE6、IE7、IE8、IE9と各バージョンごとに確認可能です。

一番やっかいなIE6も確認出来るのがかなりうれしいです。

IETesterのダウンロードはこちら

IEの各バージョンごとにcssを読み込むhtmlハックはこれ

とりあえずやっかいなIE6だけ別にするのもアリ?

IEの各バージョンごとに読み込む

<!--[if IE ○]>

ここにはIE○にしか表示されません

<![endif]-->

※○には半角で適応させたい数字を入れる

  • <!–[if IE 5]>→IE5のみ
  • <!–[if IE 5.5000]>→IE5.5のみ
  • <!–[if IE 6]>→IE6のみ
  • <!–[if IE 7]>→IE7のみ

条件つきで読み込む

以下のバージョンを読み込む場合

<!--[if lte IE ○]>

ここにはIE○以下にしか表示されません

<![endif]-->

※lteはLess Than Equalって意味で簡単に言えば「~以下」って意味です。

使い方は先ほどの各バージョンの例を参照

以上のバージョンを読み込む

<!--[if gte IE ○]>

ここにはIE○以下にしか表示されません

<![endif]-->

※gteはGreater Than Equalって意味で簡単に言えば「~以下」って意味です。

使い方は同様に先ほどの各バージョンの例を参照
cssで各ブラウザごとにハックしよう

一つのcssのみでハックしてみよう

各ブラウザごとに紹介いたします。解りやすくカラーで表示しております。

Internet Explorerの場合

Internet Explorerの場合は一つにまとめて制作するほうが作りやすかったりします。その場合は一つにまとめて表示する事をお勧めします。

まずはhtmlを作ります。

</pre>
<div id="css_huck">
ここの背景にブラウザごとに色が変わります。</div>
<pre>

まとめたcss

#css_huck {

background: yellow; /* すべてのブラウザに表示 */

background:orange¥9; /* IE8のみはこの表示 */

*background: blue; /* IE6と7はこの表示 */

_background: red; /* IE6以下はこの表示 */

}

こう表示する事でホームページのデザインを制作する時に合わせやすくなります。

各ブラウザごとのハック方法

firefoxの場合

#css_huck,  x:-moz-any-link  {

color: red;

}

safariとChromeの場合

@media screen and (-webkit-min-device-pixel-ratio:0) {

#css_huck{

color: red;

}}

サンプルを作ってみた

ブラウザチェックに役立てて下さい。

もし、使っているブラウザの種類を知りたい場合は以下を見て下さい。

IEを使っている方でIE6以下の方は必ずアップグレードして下さい。

ブラウザチェックのデモ

さいごに

ブラウザごとに一緒に表示する時は気を付けて

各ブラウザへのハックなのですが、これは一緒に記述すると表示されないものもありますので注意して下さい。cssやhtmlに関しては全て上から読み込むので記述方法次第では表示されない場合もありますので注意して下さい。

関連記事

  1. ECCUBE2.4のインストール時にエラーが出た場合

  2. ワードプレスでスマホとPCで違う広告サイズを表示させる

  3. バリューコマースアフィリエイトの登録方法

  4. ホームページが重いと感じたらスピードチェック

  5. ワードプレスのfeedが取得できない原因はプラグインかも

  6. ワードプレスに人気記事を自動的に表示させるWordPress Popu…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

コメントするためには、 ログイン してください。
PAGE TOP