1つ星 (←記事が気に入ったら投票をお願いします☆)
読み込み中...

WEBサイトサンプル集

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

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

sample1a.jpg  sample.jpg

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

・JavaScript、Flash等は使用していません。

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

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

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

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

画像なし sample2a.jpg  画像あり sample2b.jpg

サンプル1a(アクセシビリティ強化版) サンプル2(アクセシビリティ強化版)

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

sampleac1.jpgsampleac2.jpg

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

sample1.jpg

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

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

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

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

サンプルMAP 約250KB

map.jpg

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

0