Lopan.jp

Webサイトの作り方のまとめ!ブラウザチェック。

Browser Check

サンプルサイト制作を通して「Webサイト制作」についてまとめてます。
前回の記事で、トップページのコーディングがひと通り完了したので、下層ページのコーディングに移る前に、一旦ブラウザチェックしてみようと思います:)。

以下は目次です。クリックすると各項目へ移動します。

対象ブラウザ。

Lopan cafeでは、推奨ブラウザというのは特に決めてません…。なので一通りチェックしていきたいと思います。
ここまでは、主にFirefoxというブラウザで表示確認しながら作ってきてので、Firefoxはもう大丈夫。それ以外のブラウザでもちゃんと表示されるか(動作するか)をチェックする事になります。
他にどんなブラウザで確認すればいいんでしょうか…?

ブラウザの種類

世界のブラウザシェア率が、毎月いろんな調査会社から公開されてるので、まずはそれを見てみましょう;)。

上記記事を参照すると、主要デスクトップブラウザは以下の5つ:)。※括弧内は2013年5月現在のブラウザシェア(NetApplications調べ) なかでもInternet Explorer(以下IE)がダントツです!

ブラウザのバージョン

参照したサイトをよく見ると、「短周期一括型バージョン別ブラウザシェア」というグラフでは、IEのみバージョン別に分けて表記されてますね。IEだけ、なんででしょう?

IEの互換性

IE6/7は、Web標準への対応がいまいち。
IE6/7でWeb標準に準拠したサイトを見ると、表示が崩れてたり、意図した通りに動作しないなどの不具合があります:(。
ブラウザが、特定のWeb標準にどれだけ準拠しているかを調べる事ができる「Acid2」、「Acid3」というテストツールでも、IEは各バージョンごとに結果がバラバラ(詳しくは下記を参照のこと)

けど多いシェア

IE6は、2001年に公開されてからIE7が2006年に公開されるまで、5年以上も最新バージョンとして提供されてた事になります。その間に得た圧倒的なユーザー数と、圧倒的に使い慣れてしまった人たちと、圧倒的に依存してしまった社内システムがあって、その所為でなかなかアップデートできずにいるユーザーが、いまだ日本では1.7%The Internet Explorer 6 Countdownより、2013年6月現在)います。人数にすると、163万人くらい。※国内ネットユーザー数を9,610万人として計算。

そんなこんなで、現状、IEだけはバージョンごとにシェア状況を追う必要があるわけなんですね。

ブラウザの進化

現在は、どのブラウザも自動更新機能(自動アップデート機能)が搭載されていて、新しいバージョンがリリースされるたびに、インストールを促したり、自動的にアップデートが始まったりするようになっています。
主要5ブラウザでは、以下のバージョンから対応してます。

  • Windows版のInternet Explorer 6以降(Windows UpdateあるいはMicrosoft Updateによる自動更新)
  • Mozilla Firefox 1.5.x以降(1.5から自動更新機能を採用)
  • Safari(ソフトウェアアップデート機能による自動更新)
  • Opera 10以降(Ver.8から9.xまでは新バージョン通知機能による起動時バージョンチェックのみだったが、10以降は自動アップデート機能・サイレントアップデート機能が追加された)
  • Google Chrome(ソフトウェアアップデート機能による自動更新)

出典:推奨ブラウザ – Wikipedia

自動更新(自動アップデート)については以下、各ブラウザの公式サイトを参照のこと。

チェックすべきブラウザ

前回の記事の最後に「モダンブラウザで見る分には、トップページ完成!」と書きました。
モダンブラウザとは、Web標準にちゃんと準拠してるブラウザのこと。その反対でWeb標準に準拠してないブラウザの事は、レガシーブラウザって呼んだりします。

なので、実はFirefoxでしか表示確認していないのにモダンブラウザで見る分にはなんて言うのは、高を括ったことになりますね…X(。
けど、Lopan cafeでは特に新しい技術などは使ってないので、ちゃんとWeb標準に準拠したコーディングができていれば、モダンブラウザならちゃんと表示してくれるはずです。

問題はレガシーブラウザです。
現状、前述の主要5ブラウザはすべてモダンブラウザという事になりますが、バージョンによってはレガシーブラウザになります。
「Web標準に準拠していないブラウザ」というのを、「Acid3テストに合格していないブラウザ」として分けると、以下のバージョンのブラウザがレガシーブラウザということになります。
※括弧内は市場シェア(数値は、2013年6月現在の各リンク先の表を参考にしてます。調査時期も各リンク先参照のこと)。

自動アップデート機能があるのになんでっX(、と思いますが、ユーザーにもいろいろ事情があるんです。
たとえシェアが0.1%未満と言えど、どこかで誰かが使ってるって事なのでチェックすべきなのかもしれませんが、そんな事言ってたらきりがないので…X(!シェア1%未満のバージョンを使ってるユーザーには勘弁してもらう事にします!
そんな訳で、チェックすべきブラウザは一旦、IE6〜8って事にしておきます;)。

目次に戻る

ブラウザチェック。

まずは、IE以外のブラウザで、表示確認してみます。
トップページを表示した結果はそれぞれ下図の通り(2013.6.10現在)

  • Firefox 21.0
  • Chrome 27.0.1453.110
  • Safari 6.0.4 (8536.29.13)
  • Opera 12.15

どのブラウザでも同じ表示結果になりましたね!案の定!
あとはIEのチェックです。

ブラウザチェックツール

IEで表示確認するには、複数のWindows環境が必要だと思いがちですが、以下のツールを使えば、手っ取り早く全バージョンのIEをチェックできちゃいます。

BrowserStack
Microsoftが用意してくれた、Web上でいろんなブラウザの動作確認ができるサービス。IEに限らずいろんなブラウザでチェックできます。
BrowserStack
IETester
IE5.5〜10での動作確認が同時にできるフリーのWebブラウザ(for Windows)
こちらの記事で、IETesterのインストールについて書いてますので、よろしければ参照ください。
IETester

以下はチェックツールではないですが、これがあればMacしか持ってなくても安心です。

VirtualBox
1台のコンピューター上に複数のOSを実行させる事ができるオープンソースソフトウェア。
Parallels
Mac上でWindowsプログラムを実行できるソフトウェア。
VMware Fusion
同じくMac上でWindowsプログラムを実行する事ができるソフトウェア。
こちらの記事で、VMware Fusionのインストールについて書いてますので、よろしければ参照ください。

BrowserStackを使ったブラウザチェック

まずは「BrowserStack」へアクセスして、サインアップします。氏名とメールアドレスとパスワードを入力してサインアップすれば、すぐに使えます:)。
※フリープランはブラウザ表示時間が30分に制限されてます。

制限時間は30分

表示チェックしたいページのURLを入力して、OSとブラウザを選んで「Start testing」ボタンをクリックすると、いろいろセッティングの後に、選んだブラウザでページが表示されます。

選べるOS、選べるブラウザ
Web上で仮想環境をエミュレート

表示されたブラウザ内のURL欄にURLを入力すれば、ちゃんと遷移します。

動作確認もバッチリ

左のメニューから新たにOSとブラウザを選んで「Update」ボタンをクリックすると、指定したブラウザでの表示に切り替わります。うん、手軽!

感嘆!

では、上記の流れでIE全バージョンの表示をチェックしちゃいましょう!
各バージョンの表示結果は下図の通り。※IE6は後述…X)。

  • Windows 8/IE 10.0 Desktop
  • Windows 7/IE 9.0
  • Windows 7/IE 8.0
  • Windows XP/IE 7.0

目次に戻る

VMware+IETesterでブラウザチェック

VMwareを使ってMac上でWindowsを実行して、その中のIETesterでブラウザチェックしてみます。
各バージョンの表示結果は下図の通り。BrowserStackでの表示結果とほとんど同じになりました。

  • IETester/IE10 Desktop
  • IETester/IE9
  • IETester/IE8
  • IETester/IE7

Internet Explorerでバージョン別チェック

IE8以上なら「F12 開発者ツール」を使って、各バージョンの表示をチェックする事ができます(下図はIE10)

F12 開発者ツールの在処

「ブラウザー モード」と「ドキュメント モード」を切り替えるだけで、違うバージョンの表示が確認できます。
各バージョンの表示結果は下図の通り。BrowserStackでの表示結果と大体同じ結果になりました。

  • ブラウザモード:IE10(B) ドキュメントモード:標準(M)
  • ブラウザモード:IE9(B) ドキュメントモード:IE9標準(M)
  • ブラウザモード:IE8(B) ドキュメントモード:IE8標準(M)
  • ブラウザモード:IE7(B) ドキュメントモード:IE7標準(M)

けど、IE10とIE9のサイドバーの影の付き方が、BrowserStackやIETesterで見た時とちょっと違うような…。開発者ツールの方が他のブラウザの見た目に近いですね。
ここはとりあえず開発者ツールの方が正しいって事にしましょうX)!

「ブラウザー モード」と「ドキュメント モード」については下記記事が詳しいです。

IE8/IE9の「ブラウザーモード」と「ドキュメントモード」のまとめ: 小粋空間(2011.2.7)

チェック結果

IE10

IE10はモダンなので、他のブラウザでの表示とほとんど同じです:D。スライドショーも、スクロールバーも、ページトップへするする行くやつもちゃんと動いてます。

IE9

IE9もほとんどIE10と同じ。ただしIE9以下はtransitionプロパティに対応していないため、ボタンのフェード効果や、スライドショーの左右の矢印のところなど、前回CSS3で実装した動きがなくなっちゃってます:(。
特にこのままでも問題はないんですが、どうしてもフェードさせたいの!という場合にはtransitionに対応していないブラウザのみjsで対応する事になります。が、この対応についてはちょっと後回しにします。

IE8/7

IE8とIE7は共に、スライドショーとかは問題なく動きますが、表示や位置がところどころ崩れてます…。
まずはこのふたつのバージョンから、詳しく見ていく事にします!

目次に戻る

表示の崩れを整える。

IE7/8での表示の崩れを直すため、cssファイルに修正を加えていく事になります。
style.css」に修正を書き加えていっても良いんですが、ここでは専用のCSSファイル「ie.css」を別途、IE8以下だけに読み込んで対応します;)。

と言っても難しい事はなくて、実は、「index.html」の下記の部分が、IE9未満に「html5shiv.js」を読み込むための記述になってるんです。

  <!--[if lt IE 9]>
  <script src="js/libs/html5shiv.js"></script>
  <![endif]-->

上記のような記法は「条件付きコメント(コンディショナルコメント)」と言って、IE5〜9ではこの書き方を使って、バージョンごとにHTMLを書き分ける事ができます。※詳しくはこちらを参照のこと。
これを利用して、下記のように、「ie.css」の読み込みを追加します。

  <!--[if lt IE 9]>
  <script src="js/libs/html5shiv.js"></script>
  <link rel="stylesheet" href="css/ie.css">
  <![endif]-->

そして、cssフォルダに「ie.css」というcssファイルを用意します。
このファイルに記述したスタイルはIE8以下だけに適用されるので、気兼ねなくスタイルを追加していけるというワケです:)。

e.cssを用意してサーバーにアップ

IE8での表示を整える

IE8とIE10を見比べてみて、おかしいなと思うのは下記の箇所。

スライドショーのチョボのところ

チョボが崩れてる

上図の通り、3つめのチョボが横に並ばずに改行されちゃってるし、スライドしてもチョボの色が変わらないです。
ここのスタイルは「style.css」の下記の部分で指定しています。
その中で3つめのチョボに関わる部分は、セレクタにli:last-childと指定しているところですね。
あと、チョボの色は、最後の行のopacityで実現してます。

default

/* gallery list button */
#gallery ul.nav {
  width: 62px;
  margin: 0 auto;
  padding: 0;
}
#gallery ul.nav li {
  float: left;
  margin-right: 16px;
  background-position: -260px 0;
}
#gallery ul.nav li:last-child {
  margin-right: 0;
}
#gallery ul.nav li a {
  display: block;
  width: 10px;
  height: 10px;
  background-position: -260px -20px;
}
#gallery ul.nav li.cur a,
#gallery ul.nav li a:hover { opacity: 0; }

<ul>にmargin-right: -16pxと指定して、最後の<li>のマージンを吸収するってのはどう?

IE8以下では:last-childという指定の仕方に対応してないため、margin-right: 0が適用されずに、3行めで指定している幅に収まり切らずに改行しちゃうんですね。
右図みたく対応できるかなと思ったんですが、<ul>には、中央配置のためにmargin: 0 autoが指定してあるので出来ませんでした…X(。
なのでここは、3つめのチョボにclass="last-child"を追記して対応することにします。
:last-childについてはこちらを参照のこと。

それから、opacityというプロパティも、IE8以下は対応してないので、ここの指定が無視されちゃってます。
ここは、IEだけで使える「filterプロパティ」のalpha()という効果で代替します。
opacityについてはこちら、filterプロパティについてはこちらを参照のこと。

まずはindex.htmlの下記箇所を修正します。

<div id="gallery">
  <div class="slideFrame">
    <ul>
      <li><a href="#"><img src="img/gallery_visual1.jpg" alt="" width="520" height="280"></a></li>
      <li><a href="#"><img src="img/gallery_visual2.jpg" alt="" width="520" height="280"></a></li>
      <li><a href="#"><img src="img/gallery_visual3.jpg" alt="" width="520" height="280"></a></li>
    </ul>
  </div>
  <ul class="nav">
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li class="last-child"><a href="#"></a></li>
  </ul>
  <p class="prev"><a href="#"></a></p>
  <p class="next"><a href="#"></a></p>
<!-- /#gallery --></div>

そして「ie.css」には下記のように記述して、それぞれサーバーにアップ。

/* :::::: gallery ::::::  */
#gallery ul.nav li.last-child {
  margin-right: 0;
}
#gallery ul.nav li.cur a,
#gallery ul.nav li a:hover {
  filter: alpha(opacity=0);
}

さっそく直ったかどうかチェック!
無事チョボが3列並んで、色も変わるようになりました。

直った!

こんな具合で、表示が崩れてるところを見つけたら、そこのスタイルを指定してる箇所を探して、適宜直していきます。
基本的にはIE8以下では対応していない書き方を、対応している書き方に書き換えるという作業になりますねー。
それでは、残りの箇所もじゃんじゃか直していきましょう!

目次に戻る

サイドバーとパンの値段のところ

値段の背景とサイドバーの影がない

サイドバーの背景には影が落ちてなきゃいけないし、値段の背景には半透明の白ベタが敷かれてなきゃいけないところです。
影と半透明の白ベタを表示しているのは、それぞれ下記箇所。

default

/* :::::: side :::::: */
#side {
  float: left;
  width: 220px;
  padding: 20px 0;
  box-shadow: 0 0 3px rgba(0,0,0,0.2);
  background: white url(../img/bg_side_top.gif) repeat-x;
}

/* :::::: menu list :::::: */
.menuList dl dd ul li {
  float: left;
  width: auto !important;
  margin: 0 1px 0 0;
  padding: 4px 8px;
  color: #6d4d38;
  background: rgba(255,255,255,0.8);
  font-weight: bold;
  line-height: 1;
}

IE8以下はbox-shadowというプロパティと、rgba()という色の指定方法に対応していません。
ここはどちらもfilterプロパティを使って、下記のように対応する事ができます。
rgba()についてはこちらを参照のこと。

/* :::::: side ::::::  */
#side {
  filter: progid:DXImageTransform.Microsoft.Shadow(Color="#cccccc", Direction=135, Strength=3);
}

/* :::::: menu list :::::: */
.menuList dl dd ul li {
  filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorstr="#ccffffff", EndColorstr="#ccffffff");
}

影か付いたけどなんかちょっと変。背景は白くなったけど隙間がある

影がなんか変な感じです。
filterのShadow()でつくる影は、box-shadowの影と違って、一方向にスライドさせたみたいな影になります。
左右に影を落としたいときは、複数指定すれば大丈夫。ここでは右下方向Direction=135と、左下方向Direction=225を指定してみます。※区切りの「,」は、あってもなくても良いです。

/* :::::: side ::::::  */
#side {
  filter: progid:DXImageTransform.Microsoft.Shadow(Color="#cccccc", Direction=135, Strength=3),
    progid:DXImageTransform.Microsoft.Shadow(Color="#cccccc", Direction=225, Strength=3);
}

それから値段のところは、背景は白くなったけど右側に1px隙間が空いてます。「style.css」をよく見たらここでも:last-childが使われてました…。
ここは値段だけじゃなくて、「6個入」とかも表記するつもりで、複数並んだ時は右側に1px隙間を空けて区切るつもりだったんですね。こんな感じ
ここはチョボの時にできなかった、<ul>margin-right: -1pxを指定する方法で対応できそうです。

/* :::::: menu list :::::: */
.menuList dl dd ul {
  margin-right: -1px;
}
.menuList dl dd ul li {
  filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorstr="#ccffffff", EndColorstr="#ccffffff");
}

整いました。

うん、これでいいや。

box-shadowでできる影は要素の外側に落ちるのに対して、Shadow()で作る影は要素の内側に生成されてその分要素が膨れるみたい。その所為でパンの写真がちょっと左へ寄っちゃいましたが、そこは後で調整しておくとします;)。

その他、CSS3の効果をfilterを使ってIE8以下でも実現する方法は下記記事が詳しいです。

IEでCSS3の効果を出せる。クロスブラウザ対応 CSSスニペット|Web Design KOJIKA17(2011.2.1)

目次に戻る

焦げ茶色のボタンのところ

ボタンがかわいくない

角が丸くないし、マウスを乗せた時に薄くなりません。
ここのスタイルは下記のようになってます。

style.css(焦げ茶色のボタン)

/* button */
.btn {
  display: inline-block;
  float: right;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 10px 23px;
  border-radius: 5px;
  background: #6d4d38;
  font-size: 12px !important;
  line-height: 1 !important;
  cursor: pointer;
}
.btn:hover {
  opacity: 0.8;
}

/* totop */
#totop p {
  display: inline-block;
  margin: 0;
  padding: 0.8em 23px 0.7em;
  border-radius: 5px 5px 0 0;
  background: #6d4d38;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}
#totop p:hover {
  opacity: 0.8;
}

薄くなる効果は、チョボのところと同じくfilterプロパティalpha()を使えば対応できますね。

/* :::::: contents ::::::  */
.btn:hover,
#totop p:hover {
  filter: alpha(opacity=80);
}

しかし、角丸の表現はIE8以下では難しいです…X(。丸くなってる部分のみ画像にして対応するか、いっそボタンごと画像にしてしまう方が手っ取り早いかもしれません。
もっとお手軽に角丸にしたい場合はjsで対応する事もできますが、ここの対応については後回しにします。

というわけで、IE8に関してはこれにて一通り完了です!こんな感じで落ち着きました。

IE8対応後の表示結果(BrowserStock)

今のところ「ie.css」は下記の通り。

ie.css(IE8修正後)

/* :::::: contents ::::::  */
.btn:hover,
#totop p:hover {
  filter: alpha(opacity=80);
}

/* :::::: gallery ::::::  */
#gallery ul.nav li.last-child {
  margin-right: 0;
}
#gallery ul.nav li.cur a,
#gallery ul.nav li a:hover {
  filter: alpha(opacity=0);
}

/* :::::: side ::::::  */
#side {
  filter: progid:DXImageTransform.Microsoft.Shadow(Color="#cccccc", Direction=135, Strength=3),
    progid:DXImageTransform.Microsoft.Shadow(Color="#cccccc", Direction=225, Strength=3);
}

/* :::::: menu list :::::: */
.menuList dl {
  margin: 0 17px 20px 23px;
}
.menuList dl dd ul {
  margin-right: -1px;
}
.menuList dl dd ul li {
  filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorstr="#ccffffff", EndColorstr="#ccffffff");
}

IE7での表示を整える

IE7もじゃんじゃか直してしまいましょう。
ここまでの修正で、ついでにIE7も直ってると思うので、改めて表示チェックしてみます(下図)

IE8対応後のIE7での表示結果(BrowserStock)

最初のチェックと比べるとだいぶ直ってますね。

残りのおかしいなと思うところは下記の箇所。

  • スライドショーが右にちょっとはみ出てる
  • お問い合わせボタンのアイコンの位置
  • パンの写真が左側に寄ってるし、値段の下に1pxの隙間
  • Like Boxに枠がついてる

長くなっちゃうので、事後報告にしますね!
修正後の「ie.css」は下記のようになりました。

ie.css(IE7修正後)

/* :::::: contents ::::::  */
.btn:hover,
#totop p:hover {
  filter: alpha(opacity=80);
}

/* :::::: header :::::: */
*+html ul.contact li a {
  padding: 22px 24px;
}
*+html ul.contact li i {
  left: 24px;
}
*+html ul.contact li.phone i {
  top: 16px;
}

/* :::::: gallery ::::::  */
*+html #gallery {
  margin-left: -20px;
}
#gallery ul.nav li.last-child {
  margin-right: 0;
}
#gallery ul.nav li.cur a,
#gallery ul.nav li a:hover {
  filter: alpha(opacity=0);
}

/* :::::: facebook like box :::::: */
*+html #facebook .frame {
  position: relative;
}

/* :::::: side ::::::  */
#side {
  filter: progid:DXImageTransform.Microsoft.Shadow(Color="#cccccc", Direction=135, Strength=3),
    progid:DXImageTransform.Microsoft.Shadow(Color="#cccccc", Direction=225, Strength=3);
}

/* :::::: menu list :::::: */
*+html .menuList dl {
  margin: 0 0 20px;
  padding: 0 17px 0 23px;
}
.menuList dl {
  margin: 0 17px 20px 23px;
}
*+html .menuList dl dd ul {
  bottom: -1px;
}
.menuList dl dd ul {
  margin-right: -1px;
}
.menuList dl dd ul li {
  filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorstr="#ccffffff", EndColorstr="#ccffffff");
}

追加したスタイルは、*+htmlから始まるスタイル。
IE8には影響を与えずIE7だけにスタイルを適用させるために、CSSハックという裏技を使ってます。
セレクタの先頭に*+htmlが付いてるスタイルはIE7だけにしか適用されません。

こんな感じで落ち着きました。

IE7対応後の表示結果(BrowserStock)

CSSハックについては下記記事が詳しいです。

Browserhacks

目次に戻る

IE6での表示を整える

IE8/7の修正を経て、IE6の表示結果は下図の通り。
BrowserStock、IETester、IE10の開発者ツールでの表示結果になります(開発者ツールは「ブラウザモード:IE10互換表示(B) ドキュメントモード:IE5Quirks(M)」)

  • Windows XP/IE 6.0
  • IETester/IE6
  • ブラウザモード:IE10互換表示(B) ドキュメントモード:IE5Quirks(M)

すごい崩れてますね。
すごい崩れてる以外で、特に気になるところは下記。

  • IE7で対応した部分が反映されてない。
  • 一番上になにやらグレーの帯が表示されてる。
  • スライドショーのところが水色っぽいベタで隠れてる。
  • ボタンにマウスを乗せても反応しない。

大きい崩れを整える

まずはこの崩れをどうにかしましょう。すごい崩れてるように見えますが、原因は以下の3点。

  • IE6以下はfloatしてる要素にはwidthも一緒に指定すること。
  • IE6以下はdisplay: inline-blockに対応してない。
  • *+htmlを使ったCSSハックはIE7だけに適用されるものなので、IE6用には別途記述が必要。

上記を踏まえて、下記のようにスタイルを追加しました。

ie.css(大きい崩れをどうにかする)

/* :::::: common :::::: */
* html #contents i {
  display: block;
  float: left;
}

/* :::::: contents ::::::  */
.btn:hover,
#totop p:hover {
  filter: alpha(opacity=80);
}

/* :::::: header :::::: */
* html nav {
  width: 701px;
}
* html nav ul li {
  width: 140px;
}
*+html ul.contact li a {
  padding: 22px 24px;
}
*+html ul.contact li i {
  left: 24px;
}
*+html ul.contact li.phone i {
  top: 16px;
}

/* :::::: gallery ::::::  */
* html #gallery {
  margin-left: -20px;
}
*+html #gallery {
  margin-left: -20px;
}
#gallery ul.nav li.last-child {
  margin-right: 0;
}
#gallery ul.nav li.cur a,
#gallery ul.nav li a:hover {
  filter: alpha(opacity=0);
}

/* :::::: article list :::::: */
* html .articleList dl dd strong,
* html .articleList dl dd span {
  zoom: 1;
  overflow: hidden;
  width: 218px;
}

/* :::::: facebook like box :::::: */
*+html #facebook .frame {
  position: relative;
}

/* :::::: side ::::::  */
#side {
  filter: progid:DXImageTransform.Microsoft.Shadow(Color="#cccccc", Direction=135, Strength=3),
    progid:DXImageTransform.Microsoft.Shadow(Color="#cccccc", Direction=225, Strength=3);
}

/* :::::: menu list :::::: */
* html .menuList dl {
  margin: 0 0 20px;
  padding: 0 17px 0 23px;
}
*+html .menuList dl {
  margin: 0 0 20px;
  padding: 0 17px 0 23px;
}
.menuList dl {
  margin: 0 17px 20px 23px;
}
.menuList dl dd ul {
  margin-right: -1px;
}
.menuList dl dd ul li {
  filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorstr="#ccffffff", EndColorstr="#ccffffff");
}

セレクタの先頭の* htmlはIE6以下だけに適用させるためのCSSハックです。
ここまでで、下図のようになりました。だいぶ整いましたね。

大きな崩れは収まった

目次に戻る

一番上のグレーの帯

これは「index.html」の<body>の下にある下記部分。
条件付きコメントで、IE7未満には「お使いのブラウザは古いです!新しいのにするかChrome frameをインストールしてください」というメッセージを表示するようになっています(ユーザーへの優しい心配りです:)

<body id="index">
<!--[if lt IE 7]><p class=chromeframe>Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p><![endif]-->
<div id="fb-root"></div>

ここのスタイルは「style.css」の下記箇所。

.chromeframe { margin: 0.2em 0; background: #ccc; color: black; padding: 0.2em 0; }

「style.css」には不要なので、「ie.css」に移して、ついでにちょこっと変えてみました。

.chromeframe {
  margin: 0;
  padding: 0.4em 0;
  background: #eee;
  text-align: center;
}

目次に戻る

スライドショーのところ

filterとclipの使い方

スライドショーのところがベタで隠れてるのは、PNG-24で透過してる画像を使ってる部分。IE6以下はこの画像形式に対応してないので上手く表示されないんです。
filterプロパティのAlphaImageLoader()を使う事で、IE6でも透明なPNG画像を表示させる事ができます。
この場合、CSSスプライトみたく画像の表示位置をずらすには、clipプロパティのrect()を使う事になります。
※clipプロパティについてはこちらを参照のこと。

こんな感じになりました。
「ie.css」に追加したスタイルは下記の通り。

ie.css(PNGを表示させる)

/* :::::: gallery ::::::  */
* html #gallery ul.nav li,
* html #gallery ul.nav li a,
* html #gallery p,
* html #gallery p a {
  position: absolute;
  background: none;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../img/gallery_item.png");
}

* html #gallery ul.nav li {
  top: 300px;
  width: 10px;
  height: 10px;
  clip: rect(0 270px 10px 260px);
}
* html #gallery ul.nav li.first-child { left: 50px; }
* html #gallery ul.nav li.nth-child2 { left: 76px; }
* html #gallery ul.nav li.last-child { left: 102px; }

* html #gallery ul.nav li a {
  top: -20px;
  clip: rect(20px 270px 30px 260px);
}

* html #gallery p.prev {
  clip: rect(0 110px 320px 0);
}
* html #gallery p.next {
  right: -50px;
  clip: rect(0 220px 320px 110px);
}

* html #gallery p.prev a {
  right: 25px;
  clip: rect(0 256px 26px 230px);
}
* html #gallery p.prev a.hover { right: 33px; }
* html #gallery p.next a {
  top: -30px;
  right: -80px;
  clip: rect(30px 256px 56px 230px);
}
* html #gallery p.next a.hover { right: -88px; }

目次に戻る

ボタンにマウスを乗せても反応しない

IE6以下は、<a>要素以外への:hoverには対応してないのです。
ここはjsで対応しちゃいます。「script.js」に下記のように記述して、マウスを乗せた時にその要素にhoverというクラスが付くようにします。それを、こちらを参考に「IE6以下」だけで実行するようにします。

  if (typeof window.addEventListener == "undefined" && typeof document.documentElement.style.maxHeight == "undefined") {
    $('nav ul li, ul.contact li, #gallery p, .btn, #totop p').hover(function() {
      if ($(this).parent().is('#gallery')) $(this).find('a').addClass('hover');
      else $(this).addClass('hover');
    }, function() {
      if ($(this).parent().is('#gallery')) $(this).find('a').removeClass('hover');
      else $(this).removeClass('hover');
    });
  }

そして、「ie.css」には下記を追加。

/* :::::: contents :::::: */
.btn:hover,
#totop p:hover,
#totop p.hover {
  filter: alpha(opacity=80);
}

/* :::::: header :::::: */
* html nav ul li.hover,
* html ul.contact li.hover {
  background-color: #ffd959;
}

/* :::::: gallery :::::: */
* html #gallery p.prev a.hover {
  margin: 140px 0 0 32px;
}
* html #gallery p.next a.hover {
  margin: 140px 0 0 52px;
}

目次に戻る

その他もろもろ微調整して、こんな感じで落ち着きました!
※Like Boxの表示がおかしいですが、なんだかとても手強かったので、未対応です…XD。

IE対応後の表示結果(BrowserStock)

IE6まで対応した「ie.css」は下記になります。

ie.css(IE6修正後)

.chromeframe {
  margin: 0;
  padding: 0.4em 0;
  background: #eee;
  text-align: center;
}

/* :::::: common :::::: */
* html #contents i {
  display: block;
  float: left;
}

/* :::::: contents :::::: */
.btn:hover,
#totop p:hover,
.btn.hover,
#totop p.hover {
  filter: alpha(opacity=80);
}

/* :::::: header :::::: */
* html nav {
  width: 701px;
}
* html nav ul li {
  width: 140px;
}
* html nav ul li a {
  padding-top: 79px;
}
* html nav ul li i {
  top: 39px;
}

* html ul.contact li {
  border-bottom: 1px #eee solid;
}
* html ul.contact li a {
  padding: 22px 0;
  border-bottom: 0;
  text-align: center;
}
* html ul.contact li i {
  top: 16px;
  left: 24px;
}

* html nav ul li.hover,
* html ul.contact li.hover {
	background-color: #ffd959;
}

*+html ul.contact li a {
  padding: 22px 24px;
}
*+html ul.contact li i {
  left: 24px;
}
*+html ul.contact li.phone i {
  top: 16px;
}

/* :::::: gallery :::::: */
* html #gallery {
  margin-left: -20px;
}
*+html #gallery {
  margin-left: -20px;
}
* html #gallery ul.nav li a {
  font-size: 0;
}
#gallery ul.nav li.last-child {
  margin-right: 0;
}
#gallery ul.nav li.cur a,
#gallery ul.nav li a:hover {
  filter: alpha(opacity=0);
}

* html #gallery p.prev a.hover {
	margin: 140px 0 0 32px;
}
* html #gallery p.next a.hover {
	margin: 140px 0 0 52px;
}

* html #gallery ul.nav li,
* html #gallery ul.nav li a,
* html #gallery p,
* html #gallery p a {
  position: absolute;
  background: none;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../img/gallery_item.png");
}

* html #gallery ul.nav li {
  top: 300px;
	width: 10px;
	height: 10px;
  clip: rect(0 270px 10px 260px);
}
* html #gallery ul.nav li.first-child { left: 50px; }
* html #gallery ul.nav li.nth-child2 { left: 76px; }
* html #gallery ul.nav li.last-child { left: 102px; }

* html #gallery ul.nav li a {
  top: -20px;
  clip: rect(20px 270px 30px 260px);
}

* html #gallery p.prev {
  clip: rect(0 110px 320px 0);
}
* html #gallery p.next {
  right: -50px;
  clip: rect(0 220px 320px 110px);
}

* html #gallery p.prev a {
  right: 25px;
  clip: rect(0 256px 26px 230px);
}
* html #gallery p.prev a.hover { right: 33px; }
* html #gallery p.next a {
  top: -30px;
  right: -80px;
  clip: rect(30px 256px 56px 230px);
}
* html #gallery p.next a.hover { right: -88px; }

/* :::::: main :::::: */
* html section#info,
* html section#twitter {
  zoom: 1;
}

/* :::::: article list :::::: */
* html .articleList dl dd strong,
* html .articleList dl dd span {
  overflow: hidden;
  float: right;
  width: 218px;
}

/* :::::: facebook like box :::::: */
*+html #facebook .frame {
  position: relative;
}

/* :::::: side :::::: */
#side {
  filter: progid:DXImageTransform.Microsoft.Shadow(Color="#cccccc", Direction=135, Strength=3),
    progid:DXImageTransform.Microsoft.Shadow(Color="#cccccc", Direction=225, Strength=3);
}
}

/* :::::: menu list :::::: */
* html .menuList dl {
  margin: 0 0 20px;
  padding: 0 16px 0 23px;
}
*+html .menuList dl {
  margin: 0 0 20px;
  padding: 0 17px 0 23px;
}
.menuList dl {
  margin: 0 17px 20px 23px;
}
*+html .menuList dl dd ul {
  bottom: -1px;
}
.menuList dl dd ul {
  margin-right: -1px;
}
.menuList dl dd ul li {
  filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorstr="#ccffffff", EndColorstr="#ccffffff");
}

目次に戻る

モダンブラウザと同じくらいまで整える。

ここまで、極力CSSだけでできる修正を行ってきましたが、CSSだけではどうしても対応できないけどどうしても対応したいところは、やっぱりjsで対応する事になります。

transitionの動きをjsで実装する

IE9以下では、CSSのtransitionに対応していません。Lopan cafeでは、ボタンにマウスを乗せた時の反応や、スライドショーの矢印に、transitionを使って、ふわっとした動きをつけてます。
これをIE9以下でも同じように動かしたい場合には、別途、jsで実装する事になります。

まずはボタンのフェード。「script.js」に下記のように記述しました。

$(function() {
	/* 略 */
  var $btn = $('.btn, #totop p');
  $btn.hover(function() {
    $(this).stop().animate({ 'opacity': 0.8 });
  }, function() {
    $(this).stop().animate({ 'opacity': 1 });
  });
});

焦げ茶色のボタンは.btn#totop pの2つ。
これらの要素に対して、.hover(over時の処理, out時の処理)を使って、マウスを乗せた時の反応と、マウスが外れた時の反応を記述します。
マウスが乗った時は、opacityの値を「0.8」へ、マウスが外れた時は「1」へ変化する値を、animate()でスムーズに変化させてます。

けどこのままだと、IE9以外のtransitionが使えるブラウザでもこのスクリプトが動いてしまいます。できればtransitionに対応していないブラウザだけで実行するようにしたいです。

ブラウザの対応状況を検出するライブラリ

Modernizr

そこで、Modernizrというjsライブラリを利用します。
modernizr.jsを読み込んだページは、そのページがを表示しているブラウザが対応しているHTML5の機能と、CSS3のプロパティを検出してくれます。

Modernizr: the feature detection library for HTML5/CSS3

CSS Transitionにチェック

Modernizrのダウンロードページでは、検出してほしい項目を絞る事もできます。
今回はtransitionに対応してないブラウザが分かればいいので、「CSS Transitions」という項目のみチェックして、「GENERATE!」ボタンをクリック。すると割と短めのコードが生成されるので、おもむろに「DOWNLOAD Custom Build」ボタンをクリック。
ダウンロードされたファイル内のコードを「script.js」にコピペしちゃいます!
これだけで、表示中のブラウザがtransitionに対応しているかが検出されるようになります!

Modernizrのドキュメントによると、transitionに対応しているブラウザは「csstransitions」というオブジェクトが作られるとのこと。
検出されているであろう「csstransitions」の有無を条件に、下記のように記述すれば、transitionに対応していないブラウザだけ実行されるようになりますね!

$(function() {
	/* 略 */
  if (!Modernizr.csstransitions) {
    var $btn = $('.btn, #totop p');
    $btn.hover(function() {
      $(this).stop().animate({ 'opacity': .8 });
    }, function() {
      $(this).stop().animate({ 'opacity': 1 });
    });
  }
});

これで悩みの種はなくなったので、その他のフェードする箇所すべてanimate()するようにしていきます!

script.js(transition効果)

$(function() {
	/* 略 */
  if (!Modernizr.csstransitions) {
    var $btn = $('.btn, #totop p'),
      $chobo = $('#gallery ul.nav li:not(.cur) a'),
      $arrow = $('#gallery p.prev, #gallery p.next'),
      $nav = $('nav ul li, ul.contact li');
    
    // 焦げ茶色のボタン
    $btn.hover(function() {
      $(this).stop().animate({ 'opacity': 0.8 });
    }, function() {
      $(this).stop().animate({ 'opacity': 1 });
    });
    
    // スライドショーのチョボ
    $chobo.hover(function() {
      $(this).stop().animate({ 'opacity': 0 });
    }, function() {
      $(this).stop().animate({ 'opacity': 1 });
    });
    
    // スライドショーの矢印
    $arrow.hover(function() {
      if ($(this).is('.prev')) $(this).find('a').stop().animate({ 'right': 33 });
      else $(this).find('a').stop().animate({ 'right': -88 });
    }, function() {
      if ($(this).is('.prev')) $(this).find('a').stop().animate({ 'right': 25 });
      else $(this).find('a').stop().animate({ 'right': -80 });
    });
    
    // グローバルナビとお問い合わせのボタン
    $nav.hover(function() {
      $(this).stop().animate({ 'background-color': '#ffd959' }, 'fast');
    }, function() {
      $(this).stop().animate({ 'background-color': '#eee' }, 'slow');
    });
  }
});

しかし、これだけだとグローバルナビとお問い合わせのボタンだけアニメーションしません。
jQueryのanimate()は、変化させるプロパティの値が数値じゃないとアニメーションしないんです。

colorもアニメーション出来るようにするプラグイン

下記プラグインを使えば、値が数値じゃないcolorbackground-colorでもアニメーションさせる事ができるようになります。早速ダウンロードして、コードを「script.js」にコピペ!

Color animation jQuery plugin

※Lopan cafeではjQuery 1.7.2を使ってるので、「For jQuery 1.7.2 and earlier:」のところの「jquery.animate-colors-min.js (1.70kB, minified)」をダウンロードしました。

これだけでbackground-colorがアニメーションするようになりました!
transitionの動きをjsで実装、これにて完了です。実装した動きはこちらで確認できます(IE9以下でのみ)

目次に戻る

IE8以下でも:last-childとか使いたい

使えないなら使えないなりに対応すればいいですが、もしもIE8以下でも:last-childが使えたら、とても便利です!
Selectivizrは、読み込むだけで、:last-child:nth-childなどの疑似クラスや、CSSセレクタが使えるようになるjsユーティリティ
※jsライブラリとの組み合わせによって使えるようになる数が増減するとのことなので、詳しくは下記サイトを参照のこと。

Selectivizr – CSS3 pseudo-class and attribute selectors for IE 6-8

上記サイトからダウンロードした「selectivizr-min.js」を「jquery-1.7.2.min.js」の後に読み込みます。

<script src="js/libs/jquery-1.7.2.min.js"></script>
<script src="js/libs/ellipsis.js"></script>
<script src="js/libs/jquery.nicescroll.min.js"></script>
<script src="js/libs/selectivizr-min.js"></script>

<script src="js/script.js"></script>

読み込むだけで、last-childというクラスを消しても、崩れなくなりました。カンタン!

<li class="first-child"><a href="#"></a></li>
<li class="nth-child2"><a href="#"></a></li>
<li class="last-child"><a href="#"></a></li>
	⇓
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>

IE8以下でも疑似クラスとCSSセレクタが使えるようになったページはこちらです。

目次に戻る

どうしても角丸にしたい

どうしても角丸にしたい場合は、画像にするか、jsに頼るしかありません。
ここでは、下記記事で紹介されている「jquery.corner.js」というプラグインを利用して対応します:D。

マジで簡単!!画像を使わず角丸を実現するjQuery Corner | バシャログ。(2009.3.11)

こちらのデモページからダウンロードした「jquery.corner.js」を、「jquery-1.7.2.min.js」の後に読み込みます。

<script src="js/libs/jquery-1.7.2.min.js"></script>
<script src="js/libs/ellipsis.js"></script>
<script src="js/libs/jquery.nicescroll.min.js"></script>
<script src="js/libs/selectivizr-min.js"></script>
<script src="js/libs/jquery.corner.js"></script>

<script src="js/script.js"></script>

「script.js」に、角丸にしたい要素を指定します。
.btn#totop pに半径5pxの角丸、#totop pは上半分だけ角丸なので、それぞれ下記のように指定しました。

  $('.btn').corner('round 5px');
  $('#totop p').corner('round 5px top');

border-radiusにもチェック

で、これもまた、できればborder-radiusに対応していないブラウザだけで実行するようにしたいので、先ほどの、Modernizrのダウンロードページから、「border-radius」も追加したものにコピペし直して、条件分岐を追記したら完了!

  if (!Modernizr.borderradius) {
    $('.btn').corner('round 5px');
    $('#totop p').corner('round 5px top');
  }

IE8以下でもボタンを角丸にしたページはこちらです。

目次に戻る

IE6でも透かしたい

jsのプラグインを利用すれば、もっとカンタンにPNG画像を表示させる事ができます。
ここでは、「DD_belatedPNG」というプラグインを利用して対応します。

DD_belatedPNG: Medicine for your IE6/PNG headache!

ここでは圧縮版をダウンロード

上記サイトからダウンロードした「DD_belatedPNG_0.0.8a-min.js」を読み込みます(ここでは、ダウンロード後に「DD_belatedPNG.js」と改名しました)

<!--[if lt IE 7]>
  <script src="js/libs/DD_belatedPNG.js"></script>
<![endif]-->

あとは「script.js」で、DD_belatedPNG.fix();に透過PNGを使っている要素を指定するだけ!

  if (typeof window.addEventListener == "undefined" && typeof document.documentElement.style.maxHeight == "undefined") {
    DD_belatedPNG.fix('#gallery ul.nav li, #gallery ul.nav li a, #gallery p, #gallery p a');
  }

「ie.css」に記述したAlphaImageLoader()などのスタイルを削除してもちゃんとPNGが表示されます。

IE6でも透かしたページはこちら

目次に戻る

あとがき。

ブラウザチェックについてまとめてみたら、ごちゃごちゃ面倒な事ばかりで見にくい記事になっちゃいました。
Lopan cafeでは特に新しい技術は使ってないので、ブラウザチェックと言っても、古いバージョンのIEに対するものがほとんどでしたね(修正はIEだけでした)。今後、IE6/7が使用されなくなっていくと、この記事の後半でやってる事はまるっとやらなくても良くなると思いますXD!
と言っても、IE8/9のシェアはまだまだ多いので、ちょっとは参考にしていただける部分は残ってるかな。

記事の内容はあくまで僕の個人的なやり方なので、至らぬ点も多々あると思いますし、きっと世の中にはもっと賢く、効率的なツールや、テクニックもあるはずです。
「こんな方法があるよ」とか「それはしない方がいいよ」とかありましたら、ぜひ教えてください!

以上、最後まで読んでいただきありがとうございました!ブラウザチェックでした!

その他、ブラウザを気にしたコーディングに関して参考にしたい記事です:)。

  • このエントリーをはてなブックマークに追加

Comment & Pingback

3 Comments! for Webサイトの作り方のまとめ!ブラウザチェック。

  1. Pingback: Web制作者がマジで学べる国内ブログ厳選10個【制作+SEO対策編】 | 株式会社LIG

  2. Pingback: サイトリニューアル手順をまとめ。各工程とその時に参考にしたいサイトご紹介!

  3. Pingback: 役に立つブラウザーチェックツール | web_egg

コメントを残す

*がついている欄は必須項目です。