Ｗｉｎｄｏｗｓ７のエキスプローラ（ファイル表示）設定で

右端に「プレビューウインドウを表示」があります。

ファイルを開くと内容を右に表示する機能ですが、

これがファイルをプロテクトするみたいです。

これをオンにしたまま、Dreamweaverで

編集すると、保存時にXXXXTMPファイルへの

アクセスが拒否されましたと表示され保存できず、

おまけに修正ファイルが削除されます。

なんと恐ろしい。

解決策は、

バージョンは「エンタープライズ」ですが

「プロフェッショナル」とほぼ同等です。

使用感は以外にＸＰソフトが動作して快適です。

詳しくは・・・

ＸＰモードは、インストール直後では入っていません。

バーチャル（仮想）ＰＣソフト　サイトからダウンロード＝＞インストール
１）バーチャルＰＣソフト　インストール・・・・・ソフトでなくＯＳの更新プ
ログラムとしてインストールされる。

２）ＸＰモード（容量大きい：おそらくＸＰのＯＳ本体を含む）
・・・・・ソフトでなくＯＳの更新プログラムとしてインストールされる。

３）メニューに「Virtual PC」が追加される。
　起動すると、面白いことにＩＥ６が入っている。ＯＳはＸＰでSP3。

バーチャルＰＣウインドウからＤＶＤドライブは認識されているので、
すぐにＸＰ関連のインストール可能。

動作マシンは、Core i7(コアアイセブン)、メモリ４Ｇ。

高速マシンの部類です。起動時間は40秒。

同マシンのＸＰで動作させた「バーチャルＰＣ」と比較すると

ＯＳの更新プログラムとしてインストールされている為か

動作は軽快でＷｉｎｄｏｗｓ７、本体のソフトと差が無いくらいです。

Virtual PCは下記からダウンロード可能です。

http://www.microsoft.com/windows/virtual-pc/

【２】ソフトの互換性

はたしてＷｉｎｄｏｗｓ７は、ＸＰで動作したソフトがどれ位動くのか？

結果は意外でした。と言うより、かなり動くのでは？！

以下が動作確認したソフトです。 

１）office２００３・・・問題なし。
２）ＣＳ２（フォト、イラレ）・・・問題なし。
３）ＣＳ４・・・問題なし。
４）アンチウイルス（ノートン、ビスタ版）・・・問題なし。
５）フリーソフト
FFFTP、キャプチャ、メール、スケジュールソフト
※一部エラーメッセージ。でも再起動で正常動作。
※ちなみに、付箋は７に有るので未導入。

感想：「ＸＰ互換モード」って必要？なくらいです。

Aero（エアロ）の機能、シャッフルやスライド、

「Aero Peek」もいいですね。 

タスクバーもガラスのように透明ですね。

ソフトの起動が見た目も綺麗で（エアロの為）快適です。

次に、ファイルの検索、コピー、コントロールパネル等の

作業です。

ビスタでは操作が分りにくく、マイコンピュータ出すのも

慣れないと一苦労ですね。正直、分りにくいですね。

ところが、７は始めてにも関わらず。ＸＰとよく似ています。

操作に問題は殆どありませんでした。

※スタートアップやクック起動が異なりますが。

最初は、試しにマルチブートでインストールしたのですが、

結局、Ｗｉｎｄｏｗｓ７がメインになってしましました。

まだ使い始めたばかりですが、非常にＧＯＯＤです。

高齢者・障害者の方に対する配慮設計と

思われがちですが、・・・

コマーシャルの【ＸＸＸ】で検索をクリック！

もはや、多くの一般ユーザがＨＰに訪れます。

ＨＰの使いやすさが求められています。

【例えば】
・Altキーとアルファベットで希望入力項目へジャンプ
・入力ラベル指定で入力項目周りの文字でも
　ラジオボタンやチェックボックスを選択可
・背景色と前景色のコントラスト比は、7：1必要
　その確認方法は？
・必須項目の記述は左側or右側？

ほんの一部ですが、一般ユーザ閲覧に有効な

規定が数多くあります。 

この最新のガイドライン（アクセシビリティＪＩＳ　Ｘ8341-3　2004）に最新ＷＣＡＧ２．０（2008/12）を追加
従えばＷｅｂコンテンツをアクセスする全ユーザーに使いやすいコンテンツが作成可能となります。

是非取り入れてください。

当スクールでは、分かりやすくまとめた
レジュメプリント（１４ページ）を作成例ＨＴＭＬと共に
受講生全員にプレゼント中！

詳しくは・・・・

５．３　操作及び入力
デバイスに依存しない操作

・tabindex属性でTabキー移動順序を設定

・accesskey属性でリンク移動、ボタン押下、入力フォームのフォーカス移動を行う

・入力項目にラベルが付いていると、ラベルをクリックするだけで選択できるようになりますので、
クリックするのが非常に楽になります（for属性を使う方法が望ましい）

５．３ｂ
　入力欄のわかりやすさ

３）入力する文字種類に自由度を持たせる
　　半角、全角どちらでも受け付ける。
　　サーバ側で全角＝＞半角変換行う（ＣＧＩで可能）

４）入力補助情報は事前に表示
　　例えば「（カタカナ入力）」などは、「フリガナ」入力項目のすぐ左隣に表示。
　　（見やすいし、音声ブラウザ利用者も分かりやすい）

５）必須項目と任意項目の違いを明確に示す
　　※記号や色でなく文字で示す。

６）入力に関する指示、説明、注意事項はコントロール前に記述
　　※説明等が入力前に分かれば入力しやすい。

７）入力しやすく、入力結果を確認しやすくする
　　　テキストボックス、ラベルの文字サイズは標準サイズ。
　　　入力領域は十分幅を持たせる。

５．３ｉ
　誤操作の復帰
　ユーザが誤った操作をしても、元に戻すことが可能であること。

１）ブラウザの「前に戻る」で必ず戻れる
　　Ｗｅｂアプリ（ｐｈｐ等）でセッション切れのメッセージを回避すること。

２）入力済みデータの保持
　　ブラウザの「前に戻る」で戻った場合、前回入力済みデータを残すこと。
　　再入力には、ユーザに負担を与える。

３）入力後、利用者がデータ確認可能
　　誤入力防止の為。ＣＧＩ等で確認画面表示させる。

４）申し込み内容が印刷可能
　ユーザを安心させる。「印字ボタン」が有ればベスト。

５）入力内容自動チェック
　　文字種類チェックは、その都度行なう。
　　これを行なうには、各項目入力時点の処理が必要。
　　※Javascriptは複雑化する。
◆（ＷＣＡＧ２．０）修正方法が明らかであれば、ユーザに知らせる。

６）入力エラー表示は、分かりやすく示す
　　問題がある項目を明確に（できれば複数の場合は同時に）表示
　　修正方法も表示（ユーザの負担を減らす）

７）フォーム送信後、ユーザに適切なフィードバック　
　　例えば、「申し込みを承りました。」
　　「後ほど担当者よりご連絡申し上げます。」など表示する。

８）入力項目の工夫
　　・自由入力より選択項目入力にして、誤りと入力し易さ提供
　　　例）ラジオボタン、チェックボックス、リストメニュー等
　　・選択項目数予め表示　例）　３個から選択
　　・プルダウンメニューは、数値だけでなく単位も表示

９）プルダウンメニューや動くメニューは少なめに
　　クリック時に変化するので、誤入力の可能性が増える。

◆（ＷＣＡＧ２．０）法的義務・金銭的取引・データ変更　（要求レベル中）
　　ユーザーに法的義務や金銭的取引発生、ユーザがデータ保存可能な
　　ページ、試験の回答を送信するケースでは以下の処理が必要

１．送信は元に戻すことが可能
２．ユーザの入力したデータの入力エラーをチェックし、
　　ユーザに修正する機会を提供している。
３．送信を完了する前に、ユーザが情報の点検、確認および
　　修正をするメカニズムが利用可能である。

以上はほんの一部です。
ＪＩＳ化される段階で、ＨＴＭＬ制作に役立つ内容が
網羅されています。

特に公共ＨＰ（公的機関や銀行等では採用されています）

ＩＥ７がＩＥ６を逆転しているそうです。

IE7は英語版が2006年11月に自動配布を開始して

約２年、とうとう逆転しました。

以前は、ＯＳにバンドルされていたので、ＯＳ出荷の

タイミングでしたね。

当スクールのアクセスでは・・・

Webブラウザの満足度1位は「Firefox」だそうです。

その中に、「Firefox」の使用者は２３％だそうです。

以前の調査では、１５％前後だったそうです。

確実に伸びています。

次のＩＥ８が文法に正確に表示を目指すそうですが、

「Firefox」には勝てないでしょう。

Ｗｅｂデザイナーにとっては、勝って欲しいものです。

ところで、「Firefox」は欧州では、２０?３０％と多く、

フィンランドは45.4％だそうです。

これはOpera社（フィンランド）が2007年12月に

マイクロソフトの独占行為を訴えたことが

影響しているようです。

ところで使用満足度は？

行動パターンを調査したそうです。

多くのユーザーは、最初から内容を詳しく読み始める
のではなく、アルファベットのＦの文字を描くように、
ページ全体を眺め、そのページが自分の期待する
ものを満たすかどうかを大まかに確認する傾向に
あるようです。

これがすべてであるとは言えないが、ウェブデザインを
考えるうえでユーザーの視線の流れに合わせて
ポイントとなる見出しやグラフィックをレイアウト
するとより効果的になる。
＜引用　IT-PLUS＞

例えば・・・・・

ＷｅｂのコンテンツをＰＲしたい場合、

トップページを除く、各ページのヘッダー部分の画像は、

目立たない様にして、画面中央の左部分に「F」の字を

意識して、最もPRしたい内容を表示すれば

良いことになります。

また、やはり、ごちゃごちゃとしたページは駄目です。

シンプル（見やすい）にすれば、同じ内容でも、

見てくれる％が向上するそうです。

是非、お試しください。

ただし、多少のバグが存在しています。

◆ＸＰでＩＥ６がインストールしているＰＣは、IE7, IE8が選択できません。
現在のＩＥ６をＩＥ７にするか、
Ｖｉｒｔｕａｌ　ＰＣ　２００７をインストールして、
ＩＥ７を入れて、そこにＩＥＴｅｓｔｅｒを入れる必要があります。

●面白いのは、以下の様に５．５?８まで一気に表示、
　切り替えながら見比べるところです。

Ｗｅｂデザイナーにとって作成したＨＰの表示チェックを

各ブラウザにて行うことは必須です。

ＩＥ７も使用者が全ブラウザの３０％程に増加中、

ますますチェックが必要です。

しかし、同じＷｉｎｄｏｗｓでありながら、ＩＥ６とＩＥ７は、

同じパソコンに同居できません。

そこで、バーチャルＰＣの出番です。

方法は・・・

http://www.microsoft.com/downloads/details.aspx?displaylang=ja&FamilyID=04D26402-3199-48A3-AFA2-2DC0B40A73B6

物理メモリも最低１２８Ｍ割り当てられるので、

ホストＰＣがメモリ５１２Ｍ環境では厳しいですね。

ＩＥ７をインストールすれば、問題なくチェックできます。

また、ホストＰＣからバーチャルＰＣへのデータ交換は、

バーチャルＰＣ内部に、「共有フォルダ」設定があります。

※バーチャルＰＣ内部のメニュー＝＞操作＝＞

「バーチャルマシン追加機能インストール」で共有可能。

ホストＰＣから、「共有フォルダ」にデータを入れれば

バーチャルＰＣで、同じファイルが読めます。

また、終了時にＩＥ７表示のままで「状態を保存」にすれば、

ＩＥ７表示のままでスタンバイモード的終了になり、

バーチャルＰＣ起動がかなり早くなります。

すぐに、ＩＥ７が表示されていますので、

ブラウザチェックもすぐ可能、結構、便利です。

皆様もお使いになっては

いかがでしょうか？

何かと問題児のＩＥ君！

Ｆｉｒｅｆｏｘやオペラで正常表示するのに、

ＩＥでは、表示がおかしい！

最近発見したトラブルです！

Ｗｅｂ講座では、受講生にお知らせしています。

詳細は以下に続く

【現象】フロートのネストＤＩＶで、最後のＤＩＶの下に
文字や画像がずれ込む

【対策】閉じタグ(　</div>　）の後に、コメント行を
入れるとＯＫ。逆に退けるとＯＫとなる場合もある。
嘘みたいな話ですが、設定すると解決する。

【現象】フロートのＤＩＶで、マージン幅が２倍に！

【対策】これは、超有名なバグ！
float設定時、「display: inline;」を追加！

【現象】外ＤＩＶ又は包括されている一部DIVが
固定長だと、包括されるＤＩＶの途中に、
外DIVの下に有るＤＩＶが
重複表示される。　ＩＥ７限定
※外ＤＩＶの下はヘッダー部が多いが、
それが内ＤＩＶと重複表示される。

【対策】高さ：「固定長」を「自動」（Ａｕｔｏ）に変更。
フロート設定時は、全てのＤＩＶに設定。

受講生：なんだかＣＳＳのクラス「top」が全く反映させません。

講師：むむ！

.intro{color:#336699}
.honbun{width:700px;margin-right:auto;margin-left:auto}
.photo{float:left;margin-right:10px
.top{clear:both;text-align:right;border-bottom-width:1px;border-bottom-style:dotted;border-bottom-color:#336699}
.top a{text-decoration:none}

Ｄｒｅｍｗｅａｖｅｒのデザイン画面で見ると、正常表示。

講師：Ｄｒｅｍｗｅａｖｅｒのデザイン画面って、

あんまり、あてにならんから・・・

でも、実際に表示するとクラス「top」が全く反映されずダメ。

皆さん原因がお分かりになりますか？

答えは・・・

■まずは、スペルチェック

１）スペルミスのチェック
講師：今回無し、実験しましょ。

◆エラーの見つけ方

現在の表示される結果から推測する。

２）今回ダメなクラス「top」の以降のクラスは有効か？
講師：正常に動作しますね。

　　　　　　↓

と言うことは、原因は、前の行？

３）１行前のクラスをチェック

　　クラス「photo」が正常に動作する。
　　しかし、直後のクラス「top」が無視されているのなら

講師：やはり・・・クラス「photo」の最後の「｝」が
　　　　　　　　　　抜けている。
　　　　　　　　　　これだと、クラス「photo」に
　　　　　　　　　　クラス「top」が飲み込まれてしまいます。

　　　　　　　　　　厄介なのは、クラス「photo」が正常に
　　　　　　　　　　動作する事に、安心しないこと！

.intro{color:#336699}
.honbun{width:700px;margin-right:auto;margin-left:auto}
.photo{float:left;margin-right:10px}
.top{clear:both;text-align:right;border-bottom-width:1px;border-bottom-style:dotted;border-bottom-color:#336699}
.top a{text-decoration:none} 

「｝」が抜けていますね。 

講師：よかったですね。でも、分かりにくいですね。

でも、苦労した方が、記憶に残りますので、

同じ現象が出たらは、今後、ピーンと来るでしょう。

結論：後ろの行が正常なら、原因は前の行に有り。

　　　　「｝」の抜けに注意しましょう！

講師：いやー、ＣＳＳめ。やってくれますね(^_^;)

Acid2（あしっどつー）はウェブブラウザや

オーサリングツールにおけるウェブページの

レンダリング上の問題点を特定するために

ウェブスタンダードプロジェクト(WaSP)が

作成したテストケースです。

正確に準拠していれば、スマイリーが描かれます。

下のリンクをクリックするとテスト画面へ移動します。

右側の「the reference rendering」は、成功例。

テストは、左側の「Take The Acid2 Test 」をクリック

http://www.webstandards.org/files/acid2/test.html

Opera 9.0が最初に合格。
Firefoxも最新版Geckoエンジンでは合格。
ＩＥ８は、条件付で合格（特殊なmetaタグ必要）
現在開発中らしい。

ＩＥ７は出たばかりですが、不合格。
ＩＥ６は、もちろんダメダメ。

あなたのブラウザは、「スマイリー君」ちゃんと見えますか？
※Opera 9.0では正確に見えます。

日本ではあまり普及してない？

　写真素材などのデジタルコンテンツが自由に
利用できると助かります。
それを可能にするのがクリエイティブ・コモンズという
ライセンスなのです。

普通に解説を読んでいても難しい印象なので
日本ではあまり普及してないところがあります。

商用目的で撮ったものでなく、単に写真を撮った方が、
公開した後に使用も「いいよ」と認めるものです。

ただし、使用には大きく４タイプあります。

◆タイプ

マーク	条件
ＢＹ：	帰属（名前・著作権者名を表示すること）
＄に斜め線	非営利（商用利用しないこと）
「Ｃ」の反対向き	同一条件許諾（オリジナルと同じライセンスで公開すること）
＝	派生禁止（改変・加工しないこと）

「ＢＹ：」のみは、商用可能ですし、
しっかり探せば結構使えるものがあります。
約７００万データ（２００８．３．６現在）もあります。
（著作権者名を表示すること）

手順
?選択した写真をクリック
?左上の「All　size」クリック
?下方に使用ライセンスが表示されています。

また、 Morgue Fileは、数は少ないですが
全て商用可能です。
右上の検索窓に「英語のスペル」を入力してエンター。

基本は、みんな使っていいよという善意と、
みんなで共有しようよ、ということですね。

いよいよ、2008 年 2 月 13 日より

自動更新で Internet Explorer 7 日本語が

提供されます。

これにより、従来の作成方法を行う

Ｗｅｂデザイナーには、注意が必要になります。

タグブラウザ、印刷が優れている等ありますが、

ＩＥ６等の互換モードで、ＨＴＭＬ文法に曖昧な記述が

厳密になります。

ＦｉｒｅＦｏｘと同様に「標準モード」対応になると

思われます。

今までの記述で表示がズレル可能性がありますので、

注意が必要です。

現在、シェアが２０％弱ですが、

すぐにシェアが６０％?７０％になるでしょうね。