So-net無料ブログ作成

複数のバージョンのIEを確認する方法

昨日はIE9のことについて書きました。

今日はIE8より以前のバージョンの確認方法について書きます。

昨日も書きましたがIEはバージョンが変わると
表示方法ががらっと変わってしまうんですね。
サポートしている内容がだいぶ異なるからなんです。

ところが、IEは(他のブラウザもですが)、
バージョン違いは共存できなくて、1台のパソコンからは
ひとつのバージョンしか確認できないんですね。

それを解決する方法ですが、
ひとつには仮想PCソフトを使うという手があります。
しかしこれは仮想PC分のOSを持っている必要があり
現実的ではありません。
(ちなみに僕は開発者プログラムに入っていたことがあるので
XPまでのOSは持っているので、この方法が使えます)。

もうひとつは、確認する専用のプログラムを使うという方法があります。
これは、簡単なんです。
こちらをオススメします。

いろいろとソフトはあるのですが、
僕が使っているのは
・IETester
http://www.my-debugbar.com/wiki/IETester/HomePage

・Expression Web SuperPreview
http://www.microsoft.com/downloads/details.aspx?FamilyID=e6cc9b3e-7eab-4525-8322-14d7e267eb2c&displayLang=ja


です。
使い勝手はIETesterの方が良いです。
ですが、SuperPreviewはMicrosoft純正なのと、
2画面表示で、バージョン間の差異をはっきりと示してくれるので、
僕は最初と最後にSuperPreviewを使い、
修正しながらの確認はIETesterで行うということをしています。

floatとかを使っていたりするとIE8やFirefoxではOKでも、
IE7とか6ではガッタガタなんてことはざらにあるので要注意です。


ちなみにSuperPreviewは試用版ということになっていて
60日間の使用制限があるのですが、
IEの確認を使う分には、60日を越えてもまったく問題ありません。

IE9がリリースされましたね [学習情報]

今回は元SEっぽく技術系の話です。

4/26にIE9がリリースになりました。

InternetExplorerと言えば、
世界で(日本でも)一番使われているブラウザで、
特にWindowsに最初からインストールされているので、
一般の方になればなるほど使用率の大きいブラウザです。

当然普通の人を相手にする通販も、要チェックのブラウザです。

ですが。
技術系の人には不評なブラウザでもあるのです。
なぜか?
いろいろ意見がありますが、次の2点+速度に集約されます。
1.独自拡張が多い割りに、Web標準に準拠していない
2.バグ(不具合)が多い、バージョンが変わると見え方ががらっと変わる

はい。難しい内容になりましたね。
1.についてはバージョンが上がるごとに
標準に近くなってきています。
≪注目≫してほしいのは、2なんです。
バージョンが変わると、同じ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でも1回のチェックで済むというわけです。
XPのユーザの人でもIE9の心配をしなくても良いのです。

是非、深い意味は追わずに、おまじないのようにお使いください。

なお、この一文後々結構重宝することになります。
というのも、現在開発版が公開されているIE10では
Vistaもサポートから外れるからです。

多分3年後はXP、Vista、7、次期OSで
またカオスになりそうな気がします。

課題作成(デザイン)11日目(訓練53日目) [通学日記]

今日でデザイン課題実習はおしまいです。

1時間目でデザインチェックが入り、
相変わらず、文字が大きいといわれました。
他は白ベースのページだったので、隙間を埋めるようにと言われました。
あとはロゴが少し大きいので小さめにすることという位です。

その後修正です。
ちなみにロゴはこちら(木目調のテクスチャを作成する)の方法で
木目調にしました。
早々にある程度終わらせ、
以前作っていた学校のサイトに手を加えることにしました。
メニューが今は角丸の四角だけだったのを
アイコン化しました。

午後はその作業と平行して面談。
実習先の希望と今後の予定の話。
5/16から実習という予定は変更になり、
5月中はHTMLコーディングをしながら面談をして、
それぞれに実習が始まるみたいです。

今日の面談で目指す方向が分かってきました。
やっぱりWebデザイナーを経てWebディレクターを目指すことにしました。
なんて言いながらショップで実習してたりして。
年齢的にTryできるのはラストチャンスかなと思いました。
Webで面白いことがしたいです。
仕事だから面白くないことも多いと思いますが、
でも面白いポジションだと思います。

SEだと管理職とかマネージャーって目指すにはちょっと違うかなと思っていたのですが
ちょっと立場が違うだけで、わくわくするものなんですね。
まぁ、現実見ればそうも言っていられないのでしょうけど、
夢は持っていたいですね!!


来週は、ポートフォリオ(作品集)の作成です。
実質2日なので、うまくまとめたいところです。


ではまた来週!!

クリアフィックスのバグ [学習情報]

以前に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システムが新しいブラウザに対応していないんですね)、
意外と侮れません。

課題作成(デザイン)10日目(訓練52日目) [通学日記]

今日も花屋さんのサイト作り。
今日で無事仕上がりました。

リボンはこちらのやり方でお世話になりました。
Tutorial_リボンの描き方
打ち込んだパラメータはまだ謎ですが、
後々理解できるようにがんばります。

昨日休んだので、無事出来上がるかどうか心配でしたが
あっさりと出来上がりました。
これなら昨日休まなければA案、B案2つできたな~と軽く後悔。
結局A案のみでチェックに臨みます。
B案はヘッダーの原石みたいなのはできましたが、
これは・・お蔵入りだろうなぁ。

あとは、今日実習先の一覧が発表になりました。
僕はショップ系に進むかシステム系へ進むか悩んでいます。
本当は純粋にWebデザインをやらせてくれるところが良いのだけれど、
それは無く、Webデザインをやっているところは
DTPかシステムを兼ねていて、
かつ自分のよさを活かせるのはWindowsなので、
行ける所が限られます(行きたい候補の中にはMac使いの会社もあります)。

就職活動みたいに面談をして、それから決めるということはなく
(前の転職のときは4社中3社から内定を頂いたので
 面談の内容から選ぶことができました。)、
はじめに希望順を決めて、それに沿って面談をしていくみたい。
詳しくは明日説明があるのですが、
どうなることでしょう。

まずはショップにするのかシステム系にするのか
そこを決めなければいけません。
難しい。両方やってみたい。

ショップは夢。
システム系は、業務フローが分かりそう。
今後3ヶ月で何を学ぶか。その後どうなりたいかをじっくりと考えなければ。
悩みます。

GWはこれでつぶれそうです。

なやむ~。

また明日!

課題作成(デザイン)9日目(訓練51日目) [通学日記]

この日はそのままダウン。
体調不良で初めて全日休みました。
知恵熱ですなぁ。

課題作成(デザイン)8日目(訓練50日目) [通学日記]

この日は、新課題開始の日でした。

新しい課題は花屋さん。
想定店舗は
・フラワーアレンジメントをやっている
・プリザーブドフラワーをやっている
で、注文としては
・ノングリッドタイプの自由な感じで作成して欲しい。
・柔らかく暖かいイメージで作成して欲しい。
というものです。
このほかにキーカラーも指定があります。

が、『ノングリッドタイプ』で全てが崩れ去ります。
え~!どうやってやるの???
週末中、インターネットを見られる時間はずーっと調べていました。
が、良い案は出ず。
ほとんど無策のまま、ラフ案作りに挑んだのでした。

妙案がひとつだけ思いつきました。
縦横にリボンを配して、ノングリッドな感じにしました。
まだ頭が固いなぁ。

結局、僕一人、ラフ案作成に用意された時間をオーバーし、
チェックを受けました。
指摘事項としては、オレンジがちょっと多いなぁというくらいでした。
ちょっと拍子抜けでした。

その後、デザインに入りました。


この日は居残りまでやりましたが、
帰ってからダウン。
そのまま寝てしまいました。




アンテナショップ ストロベリーフィールズ
ストア ストロベリーフィールズ
爪水虫 妊婦
夏フェス テント 寝袋



ベンツのパーツデザイン

今日は珍しく休日の更新(って初めてかもしれない)。

デザインといってもグラフィックデザインではなく
工業デザインや設計のお話。

今日用事で、町を歩いていてベンツのコンパクトカーを見かけました。

見て「!」となりました。

ワイパーの仕様が違ったのです。
普通のワイパーは→→に動きますが、
ベンツのワイパーは→←に動くのです。
言っていること分かりますか?
分かりにくいですね。
参考資料:http://www.mercedes-benz.co.jp/brand/safety/drive.html

この動きにすることでフロントウィンドウの真ん中が2重に払拭できるし、
全面的に払拭できるので視認性も良くなります。

でも。
・左右別の動きをするので、パーツ数が多くなり、コストアップにつながる。
・ワイパーが同じ領域にかぶさるような動きをするため
 少しずれるとぶつかる可能性がでて故障につながりやすい
といったデメリットがあります。
守りに入った責任者なら、このデザインは却下すると思います。

それをあえてGOサインを出した責任者は天晴れですね。
参考資料のページを見ても、ベンツは雨天走行にもこだわりを持っているようですね。
少し調べてみましたが、ワイパーに細かく改良を加えているメーカーは多いですが
大胆に改良を加えているのは主要メーカーではベンツだけみたいです。

すごい発見をしたと思いました。(個人的に)


今はWebデザインを始めていますが、
1年前まではソフトウェアデザインをしていました。
全てのデザインには理由があります。
本来そうあるべきです。
今やっている課題作成は、テクニックもないし経験も無いので
持っているわずかなテクニックで構成することに終始していて
イメージどおりにはできないし、
「何とか形にしました、現状のセンスはこんな感じです」みたいになっていますが、
早く、ターゲットに合わせたデザインが柔軟にできるようになりたいです。

僕の場合、組み合わせのセンスはあるようで、
それはソフトウェアにも発揮されていました。
Webデザインに関しても、早く引き出しを増やして
組み合わせの数を増やしていきたいと思います。


ちなみに僕は自動車関係の会社には3年弱在籍していましたが
(実際には半分は休職していたので、実質1年半在籍です)、
車にはほとんど興味がありません。
(その会社に入った理由は、名古屋に戻ってくることと
 会社に強みがあったこと、システム的にすごい強みがあったことで入りました)。
それでも「!」って思わせるベンツって、すごいと思いました。

課題作成(デザイン)7日目(訓練49日目) [通学日記]

今日まで高級車販売サイトの作成です。

今日は最初の2時間でバナーを作りました。

3時間目にデザインチェックが入りました。
指摘事項としては、
・全体的に文字やパーツが大きすぎる
・パーツ自体は良い
・高級店なので効果的に明朝を使うこと
・ロゴに高級感が無い

大きすぎる点は、ショップをやっているせいです。
訴求しようとするとどうしても大きめ大きめになってしまうのです。

明朝を使うように言われたのは、B案のキャッチコピーでした。
ここはA案で明朝を使っていたので、
あえてメイリオを使ったのですが、
あっさり却下でした。

ロゴは・・・今後の課題ですね。
高級感というより、ロゴそのものができないので
そこからですね。


午後は修正をしました。
午後の最後の時間に再度チェックが入るので
A案B案ともに修正を試みたのですが、
結局間に合わなかったため、
ロゴは手を入れず、文字とパーツのみ手を入れたA案のみチェックしてもらいました。
隙間のことを指摘されましたが、これを修正して
フィニッシュにしましょうとのことでした。
それを受けて、レイアウトの修正とバナーの変更(拡大)をしました。

居残り時間でB案の方もロゴをのぞいて出来上がりました。

月曜日からは、デザインの最終課題の花屋のページの作成です。
今日事前説明がありました。

ノングリッドレイアウトでとの注文があるのが難点です。
絵は書けないので、大きな写真をうまく使って
何とかしないといけないようです。
あくまでもFlashではなく、HTMLで表現できる範囲でとのことなので
できることできないことを調べないといけません。

う~ん、難しい。

がんばります!


では、また来週!

課題作成(デザイン)6日目(訓練48日目) [通学日記]

今日も高級車専門店のサイトデザインでした。

午前中の早い時間で、A案のリサイズは終わりました。
メインビジュアルは横にずらし、
グローバルメニューのボタンは両端を広げることで、
最小限の変更にとどめました。
ついでにグローバルメニューの余白に金属のテクスチャを貼り
モノトーン風にしました。

その後、B案のワイヤーフレームから、デザインまで行いました。
だいぶかかるかなとも思いましたが、
レイアウトやカラーリングが変わるだけなので、
思いのほかはかどり、大方作業が終わりました。

残りはバナー作成と、できたらロゴをもうひとつ良いのが作りたいです。
一応締め切り(デザインチェックの時間)は明日の3時間目なので、
バナーだけは仕上げるつもりです。



最近、苦手分野が浮き彫りになってきました。
アイコンやロゴ作成です。
これが苦手です。
写真を使ったサイトレイアウトはささっとできるのですが、
イラストになるとパタッと手が止まってしまいます。
この克服もしたいのですが、なかなか課題だけで手一杯で
練習にまでは手が回らないです。
どこかで時間をとらないとですが、
デザインの自習もあるので、なかなか難しいですね。
学校の設備が使える間になんとかしたいものです。


明日はデザインチェックと修正です。

では、また明日!

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。

×

この広告は1年以上新しい記事の更新がないブログに表示されております。