IE9がリリースされましたね [学習情報]
今回は元SEっぽく技術系の話です。
4/26にIE9がリリースになりました。
InternetExplorerと言えば、
世界で（日本でも）一番使われているブラウザで、
特にWindowsに最初からインストールされているので、
一般の方になればなるほど使用率の大きいブラウザです。
当然普通の人を相手にする通販も、要チェックのブラウザです。
ですが。
技術系の人には不評なブラウザでもあるのです。
なぜか？
いろいろ意見がありますが、次の２点＋速度に集約されます。
１．独自拡張が多い割りに、Web標準に準拠していない
２．バグ（不具合）が多い、バージョンが変わると見え方ががらっと変わる
はい。難しい内容になりましたね。
１．についてはバージョンが上がるごとに
標準に近くなってきています。
≪注目≫してほしいのは、２なんです。
バージョンが変わると、同じHTML/CSSでも
表示される内容が変わる（見え方が変わる）のです。
つまり、IE6、IE7、IE8、IE9と見え方が異なるのです。
IE8では良い表示でもIE6や7ではガッタガタになっていることは
よくあります。
しかもいろいろと理由があって、IEはユーザが
なかなかバージョンアップしてくれないのです。
アクセス解析でOS別の解析をすると、IE6、7のユーザは
まだ結構います。
つまり、自分が見ている表示と、
お客さんが見ている表示は違う可能性があるんですね。
お客さんはガタガタのページを見ているかもしれない。
これは機械損失の危機で怖いですね。
これを防ぐ方法は・・・別のテーマになってしまうので
明日お話します。
今日はIE9対策のお話です。
IE9で大きな点と言えば、
≪WindowsXPでは使えない≫
ということです。
ということは、XPをお使いのあなたはIE9で
どう表示されているか分からないということになります。
（僕もXPユーザです）。
また、自分はVista/7だからバージョンアップしたけど
XPユーザにどう見えているか分からない。
今回のバージョンアップでこんな不安がよぎります。
これに対しては、対策があります。
表示方法をIE8に合わせて表示するようにHTMLに一言書きます。
HEADタグの中に呪文のように次の一行を加えてください。
「<meta http-equiv="X-UA-Compatible" content="IE=8" />」
これでIE9でもIE8の表示方法でブラウザが表示しますので
IE8でも9でも１回のチェックで済むというわけです。
XPのユーザの人でもIE9の心配をしなくても良いのです。
是非、深い意味は追わずに、おまじないのようにお使いください。
なお、この一文後々結構重宝することになります。
というのも、現在開発版が公開されているIE10では
Vistaもサポートから外れるからです。
多分３年後はXP、Vista、7、次期OSで
またカオスになりそうな気がします。
4/26にIE9がリリースになりました。
InternetExplorerと言えば、
世界で（日本でも）一番使われているブラウザで、
特にWindowsに最初からインストールされているので、
一般の方になればなるほど使用率の大きいブラウザです。
当然普通の人を相手にする通販も、要チェックのブラウザです。
ですが。
技術系の人には不評なブラウザでもあるのです。
なぜか？
いろいろ意見がありますが、次の２点＋速度に集約されます。
１．独自拡張が多い割りに、Web標準に準拠していない
２．バグ（不具合）が多い、バージョンが変わると見え方ががらっと変わる
はい。難しい内容になりましたね。
１．についてはバージョンが上がるごとに
標準に近くなってきています。
≪注目≫してほしいのは、２なんです。
バージョンが変わると、同じHTML/CSSでも
表示される内容が変わる（見え方が変わる）のです。
つまり、IE6、IE7、IE8、IE9と見え方が異なるのです。
IE8では良い表示でもIE6や7ではガッタガタになっていることは
よくあります。
しかもいろいろと理由があって、IEはユーザが
なかなかバージョンアップしてくれないのです。
アクセス解析でOS別の解析をすると、IE6、7のユーザは
まだ結構います。
つまり、自分が見ている表示と、
お客さんが見ている表示は違う可能性があるんですね。
お客さんはガタガタのページを見ているかもしれない。
これは機械損失の危機で怖いですね。
これを防ぐ方法は・・・別のテーマになってしまうので
明日お話します。
今日はIE9対策のお話です。
IE9で大きな点と言えば、
≪WindowsXPでは使えない≫
ということです。
ということは、XPをお使いのあなたはIE9で
どう表示されているか分からないということになります。
（僕もXPユーザです）。
また、自分はVista/7だからバージョンアップしたけど
XPユーザにどう見えているか分からない。
今回のバージョンアップでこんな不安がよぎります。
これに対しては、対策があります。
表示方法をIE8に合わせて表示するようにHTMLに一言書きます。
HEADタグの中に呪文のように次の一行を加えてください。
「<meta http-equiv="X-UA-Compatible" content="IE=8" />」
これでIE9でもIE8の表示方法でブラウザが表示しますので
IE8でも9でも１回のチェックで済むというわけです。
XPのユーザの人でもIE9の心配をしなくても良いのです。
是非、深い意味は追わずに、おまじないのようにお使いください。
なお、この一文後々結構重宝することになります。
というのも、現在開発版が公開されているIE10では
Vistaもサポートから外れるからです。
多分３年後はXP、Vista、7、次期OSで
またカオスになりそうな気がします。
クリアフィックスのバグ [学習情報]
以前にfloatのテキスト回り込みの解除をするのに
クリアフィックスという技を紹介しましたが
（教えてくれたのは先生です）、
after擬似クラスを使ったクリアフィックスには重要なバグが
潜んでいたことが分かりました。
それはIE7より前のIEのバグなんですが、
after擬似クラスが実装されていないので
afterは使えないというものです。
これについては、従来どおり、brや空divでclearするという手もありますが、
他にも回避方法がありました。
その要素にzoomプロパティを設定するという方法です。
.floatbox{
zoom:100%; /*old IE対策*/
}
.floatbox:after{
clear:both;
content:" ";
display:block;
font-size:0;
height:0;
overflow:hidden;
}
zoomプロパティはCSSハックの要領で
IEだけ適用するように記述するとさらに良いですね。
ここでは割愛するので、気になる人は調べてください。
で、古いブラウザに対応する必要があるのかというと、
自動ダウンロードして移行を促すFirefoxと、
黙って勝手にアップデートするChromeは必要ないのですが
IEは、結構古いブラウザでアクセスしてくる人が
アクセス解析をしていても目立ちます。
特にIE6。
好みの問題でアップデートしていない人や
古いOS（僕も持ってます）で使用していてアップデートできない人、
企業内でアップデートを禁止されているところなんかも結構あって
（社内のWebシステムが新しいブラウザに対応していないんですね）、
意外と侮れません。
クリアフィックスという技を紹介しましたが
（教えてくれたのは先生です）、
after擬似クラスを使ったクリアフィックスには重要なバグが
潜んでいたことが分かりました。
それはIE7より前のIEのバグなんですが、
after擬似クラスが実装されていないので
afterは使えないというものです。
これについては、従来どおり、brや空divでclearするという手もありますが、
他にも回避方法がありました。
その要素にzoomプロパティを設定するという方法です。
.floatbox{
zoom:100%; /*old IE対策*/
}
.floatbox:after{
clear:both;
content:" ";
display:block;
font-size:0;
height:0;
overflow:hidden;
}
zoomプロパティはCSSハックの要領で
IEだけ適用するように記述するとさらに良いですね。
ここでは割愛するので、気になる人は調べてください。
で、古いブラウザに対応する必要があるのかというと、
自動ダウンロードして移行を促すFirefoxと、
黙って勝手にアップデートするChromeは必要ないのですが
IEは、結構古いブラウザでアクセスしてくる人が
アクセス解析をしていても目立ちます。
特にIE6。
好みの問題でアップデートしていない人や
古いOS（僕も持ってます）で使用していてアップデートできない人、
企業内でアップデートを禁止されているところなんかも結構あって
（社内のWebシステムが新しいブラウザに対応していないんですね）、
意外と侮れません。
Photoshopで作るWebデザイン [学習情報]
先日の一流デザイナーさんとの出会いで
Photoshopで質の良いトップページデザインを数こなしなさいとのアドバイスがあったのと
僕はイラストレーターは持っているのですが
Ver8なので古すぎるので
持っているPhotoshopElementsでWebデザインができないかなと思い、
Webをずーっと検索していたのですが、
良さそうなのは、英語サイトばっかりで
日本語の良い情報はなかなか見つからず。
やっぱり、プログラミングと一緒で、英語をつまみ読みで良いから
読めたほうが良いのねという結論になりましたが、
AdobeがCS3でチュートリアルを公開していたのでした。
Photoshopで始めるWebデザイン
でも見てるとやっぱりElementsでは限界あるみたい。
もちろんツールに頼らないやり方もあるのですが、
やっぱりCS5っていいなぁと思います。
今の学校ではイラストレーターでデザインするスタイルなので、
他のソフトも探さないとなぁと思っています。
ちなみにInkScapeは、パーツ作成には良いのだけれど、
アートボードが自由に決められないのでWebデザインにはやや不適。
（１画面分の大きさなら、そういったアートボードはあります）
アンテナショップ ストロベリーフィールズ
ストア ストロベリーフィールズ
爪水虫 妊婦
夏フェス テント 寝袋
Photoshopで質の良いトップページデザインを数こなしなさいとのアドバイスがあったのと
僕はイラストレーターは持っているのですが
Ver8なので古すぎるので
持っているPhotoshopElementsでWebデザインができないかなと思い、
Webをずーっと検索していたのですが、
良さそうなのは、英語サイトばっかりで
日本語の良い情報はなかなか見つからず。
やっぱり、プログラミングと一緒で、英語をつまみ読みで良いから
読めたほうが良いのねという結論になりましたが、
AdobeがCS3でチュートリアルを公開していたのでした。
Photoshopで始めるWebデザイン
でも見てるとやっぱりElementsでは限界あるみたい。
もちろんツールに頼らないやり方もあるのですが、
やっぱりCS5っていいなぁと思います。
今の学校ではイラストレーターでデザインするスタイルなので、
他のソフトも探さないとなぁと思っています。
ちなみにInkScapeは、パーツ作成には良いのだけれど、
アートボードが自由に決められないのでWebデザインにはやや不適。
（１画面分の大きさなら、そういったアートボードはあります）
アンテナショップ ストロベリーフィールズ
ストア ストロベリーフィールズ
爪水虫 妊婦
夏フェス テント 寝袋
