はじめてのブログデザイン

ホームページ制作の経験を活かしてブログテンプレートのデザインに挑戦!

スポンサーサイト

--/--/-- -- [Edit]

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

CSSハックとサヨナラもしくはハイタッチ

2007/07/31 Tue [Edit]

前回のエントリではCSSハックの一覧表を掲載しました。しかし CSS ハックを使うと一抹の不安が残る方も多いのではないでしょうか?

今回はそんな方達に CSS ハックとサヨナラしてもらう為の方法をご紹介します。

また、一抹の不安など何も無し!ハックとは親友だ!なんてトム・ソーヤみたいな方も、更にハックと仲良くなれるチャンスです。これからはハックとハイタッチの毎日です。

・・・と、かなり大風呂敷をひろげてしまいましたが、私もこれから実践しようと思っている方法のご紹介です。

それでは CSS ハックが IE の為に存在している。なんて考えている方におすすめの方法の紹介です。

その方法とは HTML の head 内に特殊なコメントタグ(条件付きコメント)を使用し、IE にのみスタイルを適用させる方法です。外部スタイルシートを読込ませることも可能ですし、JavaScript を特定のブラウザにのみ適用させたい場合にも使えます。

この方法を使う事により、通常のブラウザ用の CSS と、IE にのみ適用させる CSS を分離して管理を行えます。

注意点としては、CSS の優先順位に気をつけましょう。条件付きコメントを用いて外部 CSS を読み込む時は、通常の CSS の読み込みよりも後ろに記述します。

CSS で同じ優先順位の指定がされた場合、後からの指定が適用されるためです。

以下、それぞれのバージョンの IE に適用する為のソースです。い部分が特殊なコメント部分ですので、その他の部分は適宜でどうぞ。

●すべてのIEに対して適用させる場合

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie-all.css" media="all" />
<![endif]-->

IE5.0 だけに適用させる場合

<!--[if IE 5.0]>
<link rel="stylesheet" type="text/css" href="ie-50.css" media="all" />
<![endif]-->

IE5.5 だけに適用させる場合

<!--[if IE 5.5]>
<link rel="stylesheet" type="text/css" href="ie-55.css" media="all" />
<![endif]-->

IE6 にだけ適用させる場合

<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie-6.css" media="all" />
<![endif]-->

IE7 にだけ適用させる場合

<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie-7.css" media="all" />
<![endif]-->

いかがでしょうか?それぞれのバージョンの IE に適した CSS を用意すれば、ハックとサヨナラすることも可能ですし、管理も楽になると思います。

また、IE ハックだけを記述した CSS を用意し、すべての IE に対して適用させれば、ハックとハイタッチな関係も築けそうです。

見た目はすっかりおっさんになってしまった私ですが、気持ちはトム・ソーヤのままなので、ハックとはハイタッチな関係で行こうと思います。

追記
もしも特定のバージョン以上の IE にだけ適用させたい場合は下のソースのように gte を追加します。

<!--[if gte IE 6]>
<link rel="stylesheet" type="text/css" href="ie-6.css" media="all" />
<![endif]-->

上のソースの場合、IE6 以上の IE にのみ適用させられます。つまり IE6 も含まれます。

また、特定のバージョンに満たない IE にだけ適用させたい場合は下のソースのように it を追加します。

<!--[if it IE 7]>
<link rel="stylesheet" type="text/css" href="ie-6.css" media="all" />
<![endif]-->

上のソースの場合、IE7 未満の IE にのみ適用させられます。つまり IE7 は含まれません。

Prev
ワンランク上のおっさんはお洒落なメール@アドレスアイコンをサラリと10秒で作れるぅーー!
Top
はじめてのブログデザイン
Next
CSSハック一覧表

Comments

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

Re: はじめまして

> 今更の質問なのですが、今一度確認がしたいのでご返答の方を頂けると非常に助かります。 外部で書き出した、個々のブラウザー対応するCSSは、ハック等を使わず通常のスタイルで書き出せば良いのだと解釈しているのですが、良いのでしょうか?

質問者さま

はじめまして。管理人の hajime です。
この度は、ご質問ありがとうございます。質問者さまの解釈で、間違いございません。

head 内に特殊なコメントタグ(条件付きコメント)を使用し、IE にのみスタイルを適用させます。
その条件付きコメントの書き方で、IE のバージョンを振り分けます。

IE 以外のブラウザ用の外部 CSS は通常通り link 要素で読み込み、IE にのみ適用させたい外部 CSS は条件付きコメントに囲まれた link 要素を使い読み込みます。

注意点を挙げさせて頂くとするならば、通常の外部 CSS を読み込む link 要素よりも、IE にのみ適用させたい外部 CSS を読み込む link 要素を後ろに記述することでしょうか。
順序が逆になってしまうと、優先順位が同じ指定ですと、後から指定した方が適用されるからです。

勿論、IE にのみ適用させたい外部 CSS 内でハックを使うことも出来ます。

それでは、また何かありましたら、お気軽にご質問ください^^

私ごとで恐縮ですが、ご覧頂いた記事中の文章が分かりやすくなるよう、修正してみようと思います!

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

Re: タイトルなし

質問者さまへ

いえいえ、お役に立てたなら本望です^^
返信が遅くなってしまうこともしばしばですが、どうぞお気軽にご質問ください。

 
 
 
 
 
 
 
  非公開コメント
 

Track Backs

TB URL 

Top
はじめてのブログデザイン

はじめに・・・

hajime

Author:hajime
はじめまして!齢32を迎えたおっさんです。
当ブログではホームページ制作の経験を活かして、日々ブログテンプレートのデザインを勉強しています。ご意見ご質問アドバイスなどありましたら、お気軽にコメントください!

ブログテンプレートのご使用についてをご覧頂けると注意点などをご確認いただけます。

ブログテンプレート一覧表では、今迄当ブログで制作してきたテンプレートをご覧頂けます。

はじめてのブログデザイン記事一覧で、気になる記事を探してみませんか?

はじめてのブログはFC2ブログで良いと思うに一票。

Mail Address

Google AdSense

RSSフィード

便利なブックマーク

リンク

ロックオン


ドメインが増えてきたので引っ越し検討中のレンタルサーバー。

カテゴリー

タグクラウド

検索フォーム

最近の記事

最近のコメント

最近のトラックバック

お気に入り

EIZOダイレクト
私の中で出ている1つの答え。それは液晶モニターに関しては今も昔もこれからも EIZO(ナナオ)。

ドメイン検索
a
.com .net .info .mobi

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