稼げる副業でお小遣いを稼ぐ方法

稼げる副業でお小遣いを稼ぐだけじゃなく、料理や映画アニメ、趣味などメモにも使っているブログ

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

cssのハックと確認方法

投稿日:2012年8月12日 更新日:

自分のホームぺージは見る人によってブラウザが異なります。表示が崩れている場合の事も考えて確認方法と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に関しては全て上から読み込むので記述方法次第では表示されない場合もありますので注意して下さい。

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

執筆者:


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

会員制サイトが作れるWP-Membersの使い方【ワードプレス】

ワードプレスを使った会員制サイトを作るならWP-Membersと言うプラグインがあれば非常に簡単に制作する事が出来ます。 関連記事: WP-Membersのインストールと設定方法 【WordPress …

ワードプレスにグーグルアドセンスを導入する方法

ワードプレスにアドセンスを導入する際に効率の良い導入方法をご紹介いたします。 関連記事: yahooリスティング広告で広告を作るまでの流れ 足底筋膜炎を2週間で改善させた方法 contact form …

新しいユーザー権限が作れるUser Role Editor

ワードプレスで新しい権限を作れるって知っていましたか? 関連記事: 投稿のビジュアルにcssを反映させる シーサーブログにメニューを作る方法 ワードプレスのメンテナンスモード ワードプレスで簡単にステ …

メルカリの出品から発送までの流れ

メルカリに出品してみて入金されるまでの流れをご紹介させて頂きます 関連記事: ECのショッピングカートシステム比較 大型らくらくメルカリ便の登録から発送までの流れ shopifyの送料設定は素晴らしい …

【画像あり】XAMPPの誰でもわかるインストール方法

これからPHPを勉強しようと考えている人の強い味方XAMPPのインストール方法をご紹介いたします。 関連記事: シーサーブログのトップページを作る方法 【画像あり】XAMPPを使ってPHPの動作確認方 …