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

1つ星2つ星3つ星4つ星5つ星 (4 投票, 平均値: 5.00 )
Loading...


コメントふぉーむ。





次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Marquee Powered By Know How Media.