プログレッシブエンハンスメント

プログレッシブエンハンスメント

コンテンツに焦点を置き、正しいXHTML でサイトを作成して

CSS3 などをサポートしているブラウザにはリッチなデザインや機能を提供し、

サポートしていないブラウザにはそれなりのデザインや機能を提供する。という考え方。

デザイン重視のサイトの場合この考え方は適応できないが、

デザインに重点を置かなければ、CSS を数行追加するだけで、
Firefox やSafari などを利用しているユーザの利便性を高めることができる。

CSS3 はFirefox やSafari などのブラウザで利用できる環境が整ってきているが、IE においては、現状実装されていない。
そこで最近のサイト製作のトレンドのひとつにプログレッシブエンハンスメントという考え方がある。

プログレッシブエンハンスメントという考え方
http://website-usability.info/2010/06/entry_100606.html

極端なプログレッシブエンハンスメントの例：

WEB 標準のエキスパートとして有名なDanCederholm のデザイン会社「SimpleBits」
http://simplebits.com/

CSS3練習サンプル

<style type="text/css">
.textShd01{
position:relative;
display:block;
width:150px;
padding:10px;
color:#fff;
font-weight:bold;
text-align:center;
text-decoration:none;
border:2px solid #ccc;
}
</style>
<a href="#" class="textShd01">詳細情報はこちら</a>

ループ処理（ラベル）

//continue:ループ処理をスキップして、「for（～）」に戻る。
for(var i=0; i < 5; i ++){//*1
if(i == 2){
//変数「i」が「2」なら「*2」以下を処理せず「*1」に戻る。
document.write("skip!<br>");
continue;
}
document.write(i + "<br>");//*2
}

//ラベル:少し複雑。「ラベル」は、「break」や「continue」と組み合わせて作る。
//まずは、ラベルを使わなかった場合。
for(var i = 0; i < 5; i ++){
for(var j = 0; j < 5; j ++){//*2
if(j == 2){
//変数「j」が「2」なら「*2」のループを抜ける。
document.write(i + "finish!<br>");
break;
}
document.write(i + "-" + j + ",");
}
}
*/

//次に、ラベルを使った場合。
//「for」分に「ラベル」を付けると、その「for」文を、「break」や「continue」の対象とできる。
//「*1」の「for」文に
//「outer」という「ラベル」を付ける
outer:
for(var i = 0; i < 5; i ++){//*1
for(var j = 0; j < 5; j ++){//*2
if(j == 2){
//変数「j」が「2」なら
//「outer」という「ラベル」が付いた「*1」のループを抜ける
document.write(i + "-" + j + "finish!<br>");
break outer;
}
document.write(i + "-" + j + ",");
}
}

ループ処理

for(var i = 1; i <= 1000; i ++){
document.writeln(i + "回目：テスト");
}

for(/* 変数の初期化 */; /* 継続条件 */; /* 変数の増減 */);{
//ループ処理(何度も実行する処理);
}

もう1つの条件分岐式「switch」

「switch」は、変数の数値を見て、

「1ならAの処理」「2ならBの処理」……と、

条件と処理を列記していくための方法。

var tensuu = 3;
switch (tensuu){
case 1:
//変数「tensuu」の数値が「1」の場合
alert("成績１番おめでとう！");
break;//処理終了

case 2:
//変数「tensuu」の数値が「2」の場合
alert("成績2番銀メダル！");
break;//処理終了

case 3:
//変数「tensuu」の数値が「3」の場合
alert("成績3番銅メダル！");
break;//処理終了

default:
//変数「tensuu」の数値が「その他」の場合
alert("もっとがんばりましょう");
break;//処理終了
}