各ブラウザでのCSSによる差異の吸収作業はmargin、padding、height等が多いとは思うのですが、今回は見た目ではっきりとわかるように閲覧しているブラウザによって表示する画像を変えるようにCSSを書いてみました。
↓こんな感じになりました↓
【CSS】Conditional-CSSを使ってブラウザ別に表示を分岐してみた
ブラウザを複数使っている方がいましたらチェックしてみてください。
以下にConditional-CSSの導入からCSSの記述方法までを記します。
Conditional-CSSのダウンロード
- Conditional-CSSへアクセスします。
- Conditional-CSSの導入にはPHP、C#、Cのいずれかの実行環境が必要になります。私はいつものようにPHPの実行環境を使います。
- 「1. Choose your server platform」からPHP、C、C#の3つのフォーマットから選択出来るので、実行環境に合わせて選択してください。
- 「2.Enter the files you wish to include」には実際にConditional-CSSの機能を利用するCSSファイルの名前を記述します。機能を利用するファイルが複数ある場合はテキストボックスの右側にある＋ボタンを押してファイルを追加します。（利用するCSSのファイル名はあとでも修正可能です）
- 3. Information (optional)は入れても入れなくてもOKです。
- Go!ボタンをクリックすると選択したフォーマットのConditional-CSSをダウンロードできます。
Conditional-CSSの導入
CSSを施すPHPもしくはPHPを使えるようにしたHTML内に、
<style type="text/css">
@import url('c-css.php');
</style>
と書きます。
これでc-ss.php内で定義されているCSS（私のテストページの場合はtest.css）に対してIF文が使えるようになります。
CSSファイルの書き方
条件分岐の書き方はConditional-CSS内のページを見ていると前回のIEでのブラウザ判定機能 - HTMLでIF文が使える？と同じようです。
- lt - Less than 〜未満
- lte - Less than or equal to 〜以下
- eq - Equal to イコール
- gte - Greater than or equal to 〜以上
- gt - Greater then 〜より上
こんな感じです。
私が書いたtest.cssの内容
text.cssの内容を以下に記します。
#messimg
{
/* IE6,7,Opera,Gecko,Webkit以外のブラウザだった場合 */
width:670px;
height:50px;
background-image:url("./images/notlist.gif");
[if IE 6.0] width:400px;
[if IE 6.0] background-image:url("./images/ie6.gif");
[if IE 7.0] width:400px;
[if IE 7.0] background-image:url("./images/ie7.gif");
[if Opera] width:450px;
[if Opera] background-image:url("./images/opera.gif");
[if Gecko] width:600px;
[if Gecko] height:100px;
[if Gecko] background-image:url("./images/gecko.gif");
[if Webkit] width:600px;
[if Webkit] height:100px;
[if Webkit] background-image:url("./images/webkit.gif");
background-repeat:no-repeat;
}
- 最初に、全ての条件にひっかからなかった場合に表示する画像、width、heightを書いてしまいます。
- 次からはそれぞれのブラウザの場合に表示する画像とwidth、heightを記述します
- CSSは上から読まれていくので、どれかのブラウザに合致した場合、そこに書かれているwidth、height、画像によって、最初に書いた、すべてに当てはまらなかった場合の設定を上書きします。
最後に
実際に利用するかどうかはちょっとわかりませんが、同じCSS内に書くのであればCSS HACKよりは見やすいかなと思いました。
条件としてPHPなどが実行できる環境のサーバが必要だという所だけが少しネックにはなりますね。
何かしら参考になりましたらクリックをよろしくお願いします
いつもありがとうございます m(＿ ＿)m
livedoorブログはCSSイマイチ使いにくいですか。
今回のはPHPが使えるレンタルサーバ等でウェブサイトを公開されている方には結構使える情報ですが、通常の無料ブログサイトでは利用できない可能性が高いです。
いつも記事を楽しみにしてます。
エキサイトブログから画像のPNG投稿ができるアメーバーブログに引っ越しました。
多分トモヒロさんだと多色使いのjpg画像をきれいに投稿する方法をご存知かもと思ったのですが、
あれこれやっていたら疲れたというか。笑
ブログもそれぞれサービスが違うものなのですね。
これからもよろしくお願いします。
引越しお疲れ様です！
ブログ全体の雰囲気が更に明るくなりましたね＾＾
画像の投稿（サーバへアップ）作業自体では画像の画質が変わることはないと思います。
お使いのソフトの画像形式はわかりませんがPhotoshopの場合バージョンによってjpgへの圧縮エンジンがかなり違うようです。
お使いのソフトでjpgへの変換の際に圧縮率の変更ができるものであれば圧縮の度合いを下げてみてはいかがでしょうか。
見当違いの回答でしたら申し訳有りません m(＿ ＿)m
何せ画像関連は素人同然ですので＾＾；
ちなみに私は画像の閲覧、簡単な加工、解像度変換などはIrfanView32というフリーソフトをずっと使っています。
http://www8.plala.or.jp/kusutaku/iview/
新規に描くことはできませんが描いた画像の簡単な加工が色々と手軽にできます。
描くのはGIMPというのを少し使った事があります。
ただ操作の癖が強く感じ、私は長続きはしませんでした＾＾；
でもかなり本格的な絵が描けるようですよ。
既に知っておられたらごめんなさい m(＿ ＿)m
（GIMP ユーザーズギャラリー）http://f61.aaa.livedoor.jp/~replace/gimp/gallery/
（GIMP2を使おう）http://www.geocities.jp/gimproject/gimp2.0.html
IrfanView32使ってみます。
昔は、お絵かきって基本何も考えずに
ただ描いていればよかったのですが、
今はパソコンのことが
わからないと出発点にも立てないのだと
つくづく思います。
アメーバーでも苦労しています。笑
縮小画像のこととかバナーの貼り付けとかしばらく試行錯誤してみることにします。
お絵かきはコミックワークスという
漫画用ソフトの試用版を使っています。
多分製品版を使うとだいぶ違うのかもと期待して、思い切って購入しようかと思っています。
ところでGIMP ユーザーズギャラリー楽しいですね。
つい見入りました。
今の若い人は絵が上手ですよね。
＞今はパソコンのことがわからないと出発点にも立てない
そうですね＾＾；
最近はデザイナーさんもパソコンで処理できないと仕事にならないと言っていました。
コミックワークスというソフトにどのような機能があるかちょっとわかりませんが、Photoshopですと単ににじみ（中間色の補完）を出したくない場合アンチエイリアス機能をOFFにしたりしています。
あとは、多色の場合jpgよりファイルサイズは大きくなってしまうかもしれませんがインデックスカラー256色のGIFにすればjpgよりはにじみが減るとは思うんですが、グラデーションぽい滑らかな色の変化を出す場合はGIFではキツイですね。。
たいした力にはなれませんが、いつも楽しみにしていますので頑張ってください＾＾