透過＆CSSでPOPUP＆練習問題
透過
IE6でもちゃんと透過PNGが使えるjQuery
DD_belatedPNG.js
CSSでPOPUP
CSSだけで、popup
JQueryでバッティングした時など、とても有難い。
練習問題
gif画像は イメージ→RGBを選ぶと、色相・彩度でいじれる用になる。
navにyuga.jsを使用
<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <link rel="stylesheet" href="css/style.css" type="text/css" media="all" /> <script src="js/jquery.js" type="text/livescript"></script> <script src="js/yuga.js" type="text/livescript"></script> <title>練習用課題</title> </head> <body> <div id="container"> <div id="header"> <h1>練習用課題：【満足度100点満点】天然温泉満点の湯</h1> <div id="logo"> <a href="#"><img src="images/logo.gif" width="275" height="80" alt="" /></a> </div> </div> <div id="flash"> <object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="800" height="398"> <param name="movie" value="main_fla.swf" /> <param name="quality" value="high" /> <param name="wmode" value="opaque" /> <param name="swfversion" value="9.0.45.0" /> <!-- このパラメータータグにより、Flash Player 6.0 または 6.5 以降を使用して、Flash Player の最新バージョンをダウンロードするようメッセージが表示されます。ユーザーにメッセージを表示させないようにする場合はパラメータータグを削除します。 --> <param name="expressinstall" value="Scripts/expressInstall.swf" /> <!-- 次のオブジェクトタグは IE 以外のブラウザーで使用するためのものです。IE では IECC を使用して非表示にします。 --> <!--[if !IE]>--> <object type="application/x-shockwave-flash" data="main_fla.swf" width="800" height="398"> <!--<![endif]--> <param name="quality" value="high" /> <param name="wmode" value="opaque" /> <param name="swfversion" value="9.0.45.0" /> <param name="expressinstall" value="Scripts/expressInstall.swf" /> <!-- ブラウザーには、Flash Player 6.0 以前のバージョンを使用して次の代替コンテンツが表示されます。 --> <div> <h4>このページのコンテンツには、Adobe Flash Player の最新バージョンが必要です。</h4> <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Adobe Flash Player を取得" width="112" height="33" /></a></p> </div> <!--[if !IE]>--> </object> <!--<![endif]--> </object> </div> <div id="nav"> <ul> <li><a href="#"><img src="images/nav01.jpg" alt="料金" class="btn" /></a></li> <li><a href="#"><img src="images/nav02.jpg" alt="施設案内" class="btn" /></a></li> <li><a href="#"><img src="images/nav03.jpg" alt="お食事処" class="btn" /></a></li> <li><a href="#"><img src="images/nav04.jpg" alt="アクセス" class="btn" /></a></li> <li><a href="#"><img src="images/nav05.jpg" alt="写真集" class="btn" /></a></li> </ul> </div> <div id="wrapper"> <div id="content"> <IFRAME src="index1.html" name="shinntyaku_iframe" frameborder="0" scrolling="AUTO"> </IFRAME> </div> <div id="sidebar"> <ul> <li><a href="#"><img src="images/kaisuken.gif" width="220" height="180" alt=" 香草予定はこちら回数券販売開始！"/></a></li> <li><a href="#"><img src="images/ban02.jpg" width="220" height="71" alt="手賀沼花火大会"/></a></li> <li><a href="#"><img src="images/ban03.gif" width="220" height="71" alt=" 手賀沼エコマラソン" /></a></li> </ul> </div> <div id="banner"> <a href="#"><img src="images/ban01.jpg" width="525" height="80" alt=" 岩盤浴・香楽洞"/></a> </div> </div> <div id="footer"> <address>Copyright © 2009 yamapan All Rights Reserved.</address> </div> </div> <script type="text/javascript"> swfobject.registerObject("FlashID"); </script> </body> </html>
@charset "utf-8";
/* CSS Document */
margin: 0;
padding: 0;
}
img{
border: none;
}
ul {
list-style-type: none;
}
/* reset */
body{
font-size: 0.875em;
line-height: 1.0px;
font-family: "Hiragino Kaku Gothic Pro",
"ヒラギノ角ゴ Pro W3",
Meiryo,
"メイリオ",
"MS PGothic",
"ＭＳ Ｐゴシック",
sans-serif;
background-image:url(../images/sw_suke2.jpg);
background-repeat:repeat;
}
/*layout */
#container {
width: 820px;
margin: 0px auto;
background-image:url(../images/warapper_bg.gif);
background-repeat:repeat;
}
#header {
position: relative;
margin: 0px auto;
width: 800px;
height: 150px;
background-image:url(../images/header.gif);
}
#flash {
margin: 0px auto;
width: 800px;
height: 400px;
}
#nav {
margin: -2px auto;
background-image: url(../images/nav_bg.gif);
background-repeat: repeat-x;
width: 800px;
height: 74px;
}
#wrapper {
width: 800px;
height: auto;
}
#content {
width: 525px;
height: 250px;
margin: 10px 0 0 15px;
float: left;
background: url(../images/new.gif);
}
#sidebar {
width: 250px;
margin: -5px;
float: right;
text-align: center;
}
/* nav */
#nav li {
float: left;
}
#nav ul{
margin-left: 15px;
}
/* header */
#header h1{
font-size: 9px;
line-height: 1.2;
margin:0 0 10px 0;
padding-left:10px;
}
#logo
{
position: absolute;
top:50px; left:20px;
border: none;
}
/*wrapper content*/
IFRAME {
margin-top:50px;
width: 524px;
height: 190px;
}
#banner{
float:left;
padding:20px 0 20px 0;
margin-left: 15px;
}
/*wrapper sidebar*/
#sidebar li{
margin-top: 15px;
}
/*footer */
#footer {
clear: both;
width:770px;
height:30px;
margin: 0 auto;
background-image: url(../images/fotter.gif);
background-repeat: no-repeat;
}
#footer address{
color:#FFFFFF;
padding-top:15px;
padding-right: 30px;
font-size: 0.875em;
text-align: right;
}
<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>新着</title> <style type="text/css"> dl { margin-top: 5px; } dt { border-left: 5px solid #900; border-bottom: 1px dashed #900; padding-left: 10px; margin: 10px 0 10px 0; } dd { font-size: 0.9em; line-height: 1.5; } </style> </head> <body> <dl> <dt>2011/12/1 勉強用ホームページを作成はじめました</dt> <dd>このページは勉強用に作っているページです。満点の湯」は実在しません</dd> <dt>2011/12/20 年末年始の営業時間</dt> <dd>12月31日 09:00〜21:00</dd> <dd>1月1日 休業</dd> <dd>1月2日〜通常営業</dd> <dt>2011/12/24 クリスマスプレゼント！</dt> <dd> メリークリスマス！！</dd> <dd>先着50名様に入浴剤をプレゼントします。</dd> <dt>2012/1/2 明けましておめでとうございます。</dt> <dd> 本日より通常営業です</dd> <dd>今年もご利用よろしくお願いします。</dd> </dl> </body> </html>
