夢夢色TOWN

WEBサイトサンプル集

与えられた条件に沿ってサイトを作る際、その条件内で起こるメリットデメリットを 表現できるようなサンプルを載せていけたらいいなと思います。

■ サンプル1a サンプル2 文、ブラ法ウザの互換性、W3Cの規格をクリアしつつ、外見上のインパクトをどこまで表現できるかを考えました。

　　

 

・チェックしたブラウザはWINのIE5.5以上、Mozilla Firefox1.0とNN4.78以上、Opera 7.23（無料版） です。 ・JavaScript、Flash等は使用していません。

・CSSを外しても意味は伝わるように作りました。

・”Another HTML-lint”の文法チェック100点 、0レベルクリア。 規格に忠実に作るとname要素が使えないため、インクルードを使用してます。 その確認用に ローカルサーバーを立ててチェックしながら作成しました。

 

 

これ以上の条件に拘ってプラスしていく場合、インターネットが動き出した、最初の頃のシンプルなデザインをお勧めします。

そのサンプルとして２パターン用意しました。

 

画像なし 　　画像あり

 

■ サンプル1a（アクセシビリティ強化版） サンプル2（アクセシビリティ強化版）

上記のサンプル1aとサンプル2のアクセシビリティを強化したものです。 ”WebInspector”の富士通ウェブアクセシビリティ指針 第2.0版 チェック優先度１～３クリア。

 

 

■ サンプル1 上記のサンプル1aの0レベルチェックは無視しました。 チェック項目が少なくなって作成時間に少し余裕が出ます。

 

 

・チェックしたブラウザはWINのIE5.5以上、Mozilla Firefox1.0とNN4.78以上、Opera 7.23（無料版） です。

・Flash等は使用していません。 ・JavaScriptを外しても使用するのに問題ないように作りました。

・CSSを外しても意味は伝わるように作りました。

 

・”Another HTML-lint”の文法チェック100点。

 

■ サンプルMAP 約250KB

 

 

マシンのスペックや環境によっては動きや描画がスムーズではないかもしれません。 文法、W3Cの規格等は考えていません。 WINのIE5.5以上、Mozilla Firefox1.0とNN4.78以上、Opera 7.23（無料版） はチェックしました。 1点だけ違うところがあります。右下の魚にカーソルを当てると魚が動きます。それはNNでは動きませんあるいは動きが違います。 FLASHを使わないのに動的であり、楽しそうな、というのをテーマにしました。

 

 

0