実行結果
▼ページをスクロールしても、ページのフッタ部分に常にフェードアウト効果がかかった状態になります。
芸能人の方や、著名人の方のサインが壁にところなしと！
びっくりするぐらい美味しいレバ刺！鮮度抜群！味付きでたれには付けて食べないタイプ。ぜんぜんレバーの臭みがなくて、ちょっとレバーって嫌いって人でもつるつるいけちゃいそう！いままで食べた中で一番おいしいレバ刺でした♪何皿もいけそうなくらい！！
珍しいハツ刺。生でハツ食べるなんて初めてでした！味は、レバ刺よりもあっさりめで、まったくクセがなくて、口に入れるととろける感じがグー！うまい。としか言いようがありません♪
玉子焼きの中に明太子がたっぷり♪上に乗ったマヨネーズとの愛称抜群でどことなーく懐かしいお袋の味！玉子焼きは半熟でとろっとろっ♪ほっぺたがおちそうでした！
キャベツたっぷり。ぷりぷりで大きなモツがたっぷり入ったモツ鍋。スープは醤油ベースのみ。1種類ってのがこだわりを感じるわぁ♪鳥小屋のモツ鍋食べるとほんと他店のモツ鍋がものたりなくなるわｗ
キャベツがしんなりしてきてかき混ぜると・・・キャベツの中に隠れていた大量のモツがお目見え！
かき混ぜて3分待つと出来上がり！！彩りもきれい。さぁ食べるぞー！！
ちゃんぽん麺か雑炊が選べます！今回はちゃんぽん麺をチョイス！ぱっと見、カルボナーラみたいだけどｗ麺が太くてコシがあって、醤油ベースのスープとすごく合う！
モツやら野菜やらしいたけやらいろいろなダシが出た後のスープにちゃんぽん麺を投入！スープと麺が絡み合ってめちゃくちゃ美味しかったです！
食べ終わった後のモツ鍋。ここにスープを足して、これから〆にまいります！このスープ、きっと何を入れても合うんだろうなってくらい美味しい♪
設置サンプルのソース
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>Fade Out Bottom | 設置サンプル</title>
<link rel="stylesheet" href="/content/lib/global.css" type="text/css" media="all" />
<style type="text/css">
#wrap { width:600px; z-index:1; margin:10px auto; }
#bottom_fade { width: 600px; height: 200px; z-index: 99; position: fixed; bottom: 0px; background: url(/content/img/css/bottom-fade.png) bottom center no-repeat; }
</style>
<!--[if lte IE 6]>
<style type="text/css" media="screen">
#bottom_fade {
background: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/content/img/css/bottom-fade.png',sizingMethod='scale');
left: 0px;
height: 200px;
position: absolute;
bottom: -18px;
width: expression(document.body.clientWidth);
}
html, body {
height: 100%; overflow: auto;
}
</style>
<![endif]-->
<style type="text/css">
dl { margin:0 0 100px 0; padding:0; background-color:#000; }
dt { margin:0; padding:0; width:250px; height:190px; float:left; color:#333; }
dt img { display:block; width:240px; height:180px; margin:5px; }
dd { margin:0 0 0 250px; padding:0; color:#fff; height:190px; }
dd p { padding:10px 10px 0 10px; }
</style>
<link rel="stylesheet" type="text/css" href="/common/css/example.css"></head>
<body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP & JavaScript Room</a> :: 設置サンプル</h1>
<h3 class='h'>実行結果</h3>
<div id="wrap">
<h1><a href='http://css-tricks.com/examples/FadeOutBottom/'>Fade Out Bottom</a> | 設置サンプル</h1>
<p>▼ページをスクロールしても、ページのフッタ部分に常にフェードアウト効果がかかった状態になります。</p>
<dl>
<dt><a href="http://www.flickr.com/photos/22559849@N06/3032375214/" title="サインがいっぱい@鳥小屋 by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3138/3032375214_5aedffaca0_m.jpg" width="240" height="180" alt="サインがいっぱい@鳥小屋" /></a></dt><dd><p>芸能人の方や、著名人の方のサインが壁にところなしと！</p></dd>
<dt><a href="http://www.flickr.com/photos/22559849@N06/3031535599/" title="レバ刺@鳥小屋 by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3064/3031535599_2f8b454232_m.jpg" width="240" height="180" alt="レバ刺@鳥小屋" /></a></dt><dd><p>びっくりするぐらい美味しいレバ刺！鮮度抜群！味付きでたれには付けて食べないタイプ。ぜんぜんレバーの臭みがなくて、ちょっとレバーって嫌いって人でもつるつるいけちゃいそう！いままで食べた中で一番おいしいレバ刺でした♪何皿もいけそうなくらい！！</p></dd>
<dt><a href="http://www.flickr.com/photos/22559849@N06/3031535435/" title="ハツ刺@鳥小屋 by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3055/3031535435_6af4618ea1_m.jpg" width="240" height="180" alt="ハツ刺@鳥小屋" /></a></dt><dd><p>珍しいハツ刺。生でハツ食べるなんて初めてでした！味は、レバ刺よりもあっさりめで、まったくクセがなくて、口に入れるととろける感じがグー！うまい。としか言いようがありません♪</p></dd>
<dt><a href="http://www.flickr.com/photos/22559849@N06/3031535573/" title="明太子玉子焼き@鳥小屋 by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3217/3031535573_6e541be249_m.jpg" width="240" height="180" alt="明太子玉子焼き@鳥小屋" /></a></dt><dd><p>玉子焼きの中に明太子がたっぷり♪上に乗ったマヨネーズとの愛称抜群でどことなーく懐かしいお袋の味！玉子焼きは半熟でとろっとろっ♪ほっぺたがおちそうでした！</p></dd>
<dt><a href="http://www.flickr.com/photos/22559849@N06/3032375140/" title="モツ鍋@鳥小屋 by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3223/3032375140_5eba53f7e9_m.jpg" width="240" height="180" alt="モツ鍋@鳥小屋" /></a></dt><dd><p>キャベツたっぷり。ぷりぷりで大きなモツがたっぷり入ったモツ鍋。スープは醤油ベースのみ。1種類ってのがこだわりを感じるわぁ♪鳥小屋のモツ鍋食べるとほんと他店のモツ鍋がものたりなくなるわｗ</p></dd>
<dt><a href="http://www.flickr.com/photos/22559849@N06/3032375082/" title="モツ鍋@鳥小屋 by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3239/3032375082_fd66d11941_m.jpg" width="240" height="180" alt="モツ鍋@鳥小屋" /></a></dt><dd><p>キャベツがしんなりしてきてかき混ぜると・・・キャベツの中に隠れていた大量のモツがお目見え！</p></dd>
<dt><a href="http://www.flickr.com/photos/22559849@N06/3032375106/" title="モツ鍋@鳥小屋 by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3151/3032375106_226d2a6d52_m.jpg" width="240" height="180" alt="モツ鍋@鳥小屋" /></a></dt><dd><p>かき混ぜて3分待つと出来上がり！！彩りもきれい。さぁ食べるぞー！！</p></dd>
<dt><a href="http://www.flickr.com/photos/22559849@N06/3032374922/" title="モツ鍋の〆@鳥小屋 by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3171/3032374922_8fcb4ea43d_m.jpg" width="240" height="180" alt="モツ鍋の〆@鳥小屋" /></a></dt><dd><p>ちゃんぽん麺か雑炊が選べます！今回はちゃんぽん麺をチョイス！ぱっと見、カルボナーラみたいだけどｗ麺が太くてコシがあって、醤油ベースのスープとすごく合う！</p></dd>
<dt><a href="http://www.flickr.com/photos/22559849@N06/3032374882/" title="モツ鍋の〆@鳥小屋 by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3177/3032374882_7b7553fff5_m.jpg" width="240" height="180" alt="モツ鍋の〆@鳥小屋" /></a></dt><dd><p>モツやら野菜やらしいたけやらいろいろなダシが出た後のスープにちゃんぽん麺を投入！スープと麺が絡み合ってめちゃくちゃ美味しかったです！</p></dd>
<dt><a href="http://www.flickr.com/photos/22559849@N06/3032374798/" title="モツ鍋@鳥小屋 by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3243/3032374798_cec6385d35_m.jpg" width="240" height="180" alt="モツ鍋@鳥小屋" /></a></dt><dd><p>食べ終わった後のモツ鍋。ここにスープを足して、これから〆にまいります！このスープ、きっと何を入れても合うんだろうなってくらい美味しい♪</p></dd>
</dl>
<div id="bottom_fade"></div>
</div>
</body>
</html>