Webブログをご覧のみなさま！こんにちは＾＾

ウェブサイトをコーディングするときに欠かせない「CSSレイアウト」。

難しいようで、すこしコツを掴んでしまえば、
サクサクとコーディング出来るようになるのですが、
ここで立ちはだかるのが「IEの壁」！

「モダンブラウザ」と呼ばれるweb標準に準拠した新しいブラウザと、
古いブラウザではCSSの解釈が違います。

Dreamweaverなどでプレビューをして、
キチンとレイアウトをしたつもりでも、
古いブラウザで見てみると崩れている事が良くあります。

殆どの古いブラウザは、
現在ほぼ使われていないのであまり気にする必要が無いのですが、
今だにシェアがある古いInternetExplorer（以下IE）では、
崩れないように確認を取るのが必須です。

特に、IEだけに存在する仕様やバグが沢山あり、
普通にコーディングしているだけだと、
かなりの確率でレイアウトが崩れてしまい・・・
コーダー初心者の高い壁になっています。

IEできちんと見れるように直しても、
他のブラウザで逆に崩れてしまう。
ハックで直す方法もありますが・・・
簡単な、IEだけの直し方があるんです。

前回、「haslayout」を「true」にする事によって、
IEの不具合を直す方法を紹介しました。

この方法はほとんどの不具合に有効なのですが、
逆に「true」にすることによって不具合が起こる場合があります。

今回は、この事例についてお話していきたいと思います。

「haslayout」を「true」にすることによって不具合が起こるものとして、
「ul/ol」「li」があります。
まず、何もしていない状態のリストがこちらです。

「ol」に「ul」を入れ子にしている状態です。
ここで、「ol」と「ul」に「zoom:1;」を設定してみます。
（zoom:1;については前回のブログを参照してください）

このように、リストマーカーが消えてしまいました。
また、「li」に「zoom:1;」を設定すると・・・

「ul/ol」のマーカーが下にずれ、
「ol」のマーカーがすべて１になってしまいました。

このように、リスト関係のタグの「haslayout」を「true」にすると、
看過できない不具合が発生します。
しかも、この不具合は「haslayout」が「true」の時でしか発生しないものです。

便利だからと言って全称セレクタで「zoom：1；」を掛ける事は得策ではない事が言えます。
前回、及び今回のブログはXHTML/CSSの基本的な知識があっても難しい内容です。
前回と同じく、あえて難しい内容を細かい説明なしで書かせていただきました。

ハックって何？

クロスブラウジングって？

そもそも、IE６や７なんて持ってないよ！どうやって確認するの？

バグって具体的には？？？

・・・答えは、KENSCHOOLの「極」にあります！

今回書いた内容も含め、
「極」では現場に必須なテクニックを、
初心者に方にもわかりやすくマンツーマンで指導いたします。

--------------------------------------------------------------------------------

各種ブラウザ対策も万全！Web制作スキルは、
KENスクールで実務を通して学習しよう！

⇒【CSS基礎 + 上級レイアウト講座】
IE6の見栄えを整える際に、CSSのhackというテクニックを覚えるのは
必須になります。
CSS基礎講座では、はじめてでも安心のCSSレイアウトを組める学習を、
そして、CSS上級レイアウト講座では、どんなブラウザにも対応できる、
CSSの記述方法を伝授します。

本日の更新者：
パソコンスクール KENスクール Web/DTPデザインコース
インストラクター 馬場

Webブログをご覧のみなさま、こんにちは！

ウェブサイトをコーディングするときに欠かせない「CSSレイアウト」。
難しいようで、すこしコツを掴んでしまえばサクサクとコーディング出来るようになるのですが、
ここで立ちはだかるのが「IEの壁」！

「モダンブラウザ」と呼ばれるweb標準に準拠した新しいブラウザと、
古いブラウザではCSSの解釈が違います。

Dreamweaverなどでプレビューをして、キチンとレイアウトをしたつもりでも
古いブラウザで見てみると崩れている事が良くあります。

殆どの古いブラウザは、現在ほぼ使われていないので
あまり気にする必要が無いのですが、
今だにシェアがある古いInternetExplorer（以下IE）では
崩れないように確認を取るのが必須です。

特に、IEだけに存在する仕様やバグが沢山あり、
普通にコーディングしているだけだとかなりの確率でレイアウトが崩れてしまい・・・
コーダー初心者の高い壁になっています。

IEできちんと見れるように直しても、他のブラウザで逆に崩れてしまう。
ハックで直す方法もありますが・・・簡単な、IEだけの直し方があるんです。

今回から、何回かに渡りコーディング時のIEの対処法を書いていきます。

その１「hasLayout」

クロスブラウジングでのIE対策をやった事がある方なら
「hasLayout」という名前を聞いたことがあると思います。

「hasLayout」とは、IE独自の読み取り専用のプロパティで、
それぞれのオブジェクトがレイアウト情報を持っているかどうかを示すものです。

値が「false（レイアウト情報を持っていない）」と
「true（レイアウト情報を持っている）」があり、
デフォルトでは「false」に設定されています。

多くのバグはこの値が「false」すなわち初期設定の時に出現し、
「IEだけ崩れる」原因となります。

逆に言えば、値を「true」にするだけで
大半のバグを修正することが可能です。

「true」にする方法は、その要素のプロパティを
以下の通りの値にすることで変更できます。

例えば、これはバグのfixではないのですが、
通常ブロック要素は高さを指定しなくても内包しているものの高さを感知して
自動的に高さをとってくれるのですが、
内包している物がfloatすると高さが取れなくなってしまう仕様があります。
しかし、IEの6や7は同じ状況でも高さが取れてしまいます。
その原因は、「width」を指定していることにより、
レイアウト情報が「true」に切り替わって高さが取れている状態になるからです。

「width」はhasLayoutとは関係なく最初から設定する場合が多いので、
そのほかだと「height」を使用します。

IE6では、「height」を指定していても内包している高さに併せてくれるので
「height:1%;」の様に記述をしておくと表示が崩れずに値が「true」になります。

が、他のブラウザだと不具合が出るのでハックを使用しなければいけないのと、
どの場所にも適用することが難しいので、
「height」「width」や「float」「position」などよりも
通常は汎用性のある「zoom」を使用する事になります。

例として、

*{
    zoom:1;
}

と、入れていただくとすべてのhasLayoutの値が「true」になり、
殆どのバグから開放されることになります。

ですが、なんと「true」の時にしか起こらないバグもあるのです！

この対処法は次回書きたいと思います。

今回はあえて難しい内容を細かい説明なしで書かせていただきました。

ハックって何？

クロスブラウジングって？

そもそも、IE6や7なんて持ってないよ！どうやって確認するの？

バグって具体的には？？？

・・・答えは、KENSCHOOLの「極」にあります！

今回書いた内容も含め、「極」では現場に必須なテクニックを
初心者に方にもわかりやすくマンツーマンで指導いたします。

--------------------------------------------------------------------------------

各種ブラウザ対策も万全！Web制作スキルは、
KENスクールで実務を通して学習しよう！

⇒【CSS基礎 + 上級レイアウト講座】
IE6の見栄えを整える際に、CSSのhackというテクニックを覚えるのは
必須になります。
CSS基礎講座では、はじめてでも安心のCSSレイアウトを組める学習を、
そして、CSS上級レイアウト講座では、どんなブラウザにも対応できる、
CSSの記述方法を伝授します。

本日の更新者：
パソコンスクール KENスクール Web/DTPデザインコース
インストラクター 馬場

みなさんも、もうご存知のとおり、
2011年10月5日　スティーブ・ポール・ジョブズ氏が逝去されました。

今では知らない人がいないというぐらい有名人ですね。

1976年にアップル社を立ち上げ、パーソナルコンピュータの
Macintosh（Mac）シリーズの開発で一躍アップルを有名にしました。

一時はアップル社員たちたの対立で職をはく奪されてしまいましたが、
1996年にアップル社の業績不振で呼び戻され、
iPod・iPhone・iPadの開発で事業を回復させました。

アップル社から離れている時には、
「トイ・ストーリー」で有名なピクサー・アニメーション・スタジオ
（映像制作会社）を設立し、コンピュータグラフィックスを確立していきました。

アップル社にしてもピクサーにしても成功を収めた偉大な人物です。

あと、スティーブ・ポール・ジョブズ氏を有名にしたのが
「演説」のうまさです。

結論
↓
具体例・理由
↓
結論

いわゆる「サンドイッチ法」だそうです。
前置きをダラダラ言わず、結論から始めに伝え、
そこから詳しく説明し、最後にまた結論を言う。

プレゼンがうまいとリスナーの心をつかみ「名言」が生まれる。

多くのリスナーを魅了するためのスティーブ・ポール・ジョブズ氏の
テクニックがあります。

■プレゼンテーションのテーマを明らかにする

冒頭でテーマを端的に示す。

■概要を示す

わかりやすく話についてこれるよう工夫する

■話し手の熱意を示す

「すごい」「信じられない」「びっくり」などの表現力の
強い言葉を使いメリハリをつける

■客観的根拠を示す

統計データなど客観的情報を伝える

■視覚的に訴える

スライドを使用するが、シンプルにわかりやすく

■リハーサルは念入りに

練習やリハーサルをしっかり抜かりなく

なによりも 「シンプルに伝える」に尽きると思います。
簡単そうで実に難しいことですね。

でも少しでもコツをつかみ・盗み仕事に活かしましょう。

スティーブ・ポール・ジョブズ氏の偉大さとたたえ、
ご冥福をお祈り申し上げます。

--------------------------------------------------------------------------------

KENスクールでは、即戦力となるWeb制作スキルにプラスし、
マーケティング・ディレクターの能力を持つ人材を育成しています。

⇒【マーケティングディレクションPro講座】
「ディレクション力」と「Web解析力」は、
利益を生むサイト構築が求められる
今の時代だからこそ重要視されるスキルです。
 

本日の更新者：
パソコンスクール KENスクール Web/DTPデザインコース
インストラクター 藤沢