11/19 MY PHOTO ALBUM レイアウト
MY PHOTO ALBUM
課題サイト
大分構造を理解できるようになってきたと思うが、先生のものと比べると無駄なタグがあったりするので、もう少し整理しなければ・・・・・
HTML/home
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title>MY PHOTO ALBUM</title> <link href="css/base.css" rel="stylesheet" type="text/css" madia="screen,print"> </head> <body> <!---▼container---> <div id="container"> <h1><img src="images/top/title.jpg" alt="" width="800" height="85" alt="MY PHOTO ALBUM" /></h1> <!---▼nav---> <div id="nav"> <ul> <li id="btn01"><a href="#"><em>HOME</em></a></li> <li id="btn02"><a href="#"><em>PROFILE</em></a></li> <li id="btn03"><a href="content.html"><em>CONTENTS</em></a></li> <li id="btn04"><a href="#"><em>BLOG</em></a></li> <li id="btn05"><a href="#"><em>CONTACT</em></a></li> <li id="btn06"><a href="#"><em>LINK</em></a></li> </ul> </div> <!---▲nav---> <!--▼-wrapper---> <div id="wrapper"> <!---▼content---> <div id="content"> <p class="coment">ホントに何気ない日常なんだけど、ファインダーを通すと違った世界が現れる。<br /> 気の向くまま徒然に撮ったプライベートフォトアルバムへようこそ。</p> <div id ="photos"> <p><img src="images/top/photo01s.jpg" alt="" width="204" height="137" alt="photo1"/><img src="images/top/photo02s.jpg" alt="" width="204" height="137" alt="photo2"/ class="photo2"></p> <p><img src="images/top/photo03s.jpg" alt="" width="204" height="137" alt="photo3"/><img src="images/top/photo04s.jpg" alt="" width="204" height="137" alt="photo4" class="photo4" /></p> </div> </div> <!---▲content---> <!---▼photo---> <div id="photo"> <p><img src="images/top/bg_wrapimg.jpg" alt="" width="309" height="378" alt="camera"></p> </div> <!---▲photo---> </div> <!--▲wrapper---> <!--▼footer---> <div id="footer"> <address>COPYRIGHT(C) 2008 MY PHOTO ALBUM ALL RIGHTS RESERVED.</address> </div> <!---▲footer---> </div> <!---▲container---> </body> </html>
CSS/home
CSS/home
@charset "utf-8";
/* CSS Document */
/*reset*/
* {
margin:0;
padding: 0;
font-family:
"ヒラギノ角ゴ Pro W3",
"Hiragino Kaku Gothic Pro",
"メイリオ", Meiryo, Osaka,
"ＭＳ Ｐゴシック",
"MS PGothic",
sans-serif;
}
img {
border: 0;
}
em {
visibility: hidden;
}
ul {
llist-style: none;
}
a {
text-decoration: none;
}
/*base*/
body {
color: #1B1B1B;
font-size: 1em;
line-height: 1.5;
background-color: #fff;
}
#container {
width: 800px;
height: auto;
margin: 20px auto;
text-align: center;
}
h1 {
width: 800px;
height: 85px;
}
#nav {
width: 800px;
height: 45px;
background-image: url(../images/top/btn_bg.jpg);
background-repeat: repeat-x;
background-position: left;
}
#nav li {
display: inline;
float: left;
}
#nav li a{
float: left;
overflow: hidden;
}
#nav #btn01 a {
width: 130px;
height: 45px;
background-image: url(../images/top/btn01.jpg);
margin: 0 0 0 9px;
}
#nav #btn01 a:hover {
background-image: url(../images/top/btn01o.jpg);
}
#nav #btn02 a {
width: 130px;
height: 45px;
background-image: url(../images/top/btn02.jpg);
}
#nav #btn02 a:hover {
background-image: url(../images/top/btn02o.jpg);
}
#nav #btn03 a {
width: 131px;
height: 45px;
background-image: url(../images/top/btn03.jpg);
}
#nav #btn03 a:hover {
background-image: url(../images/top/btn03o.jpg);
}
#nav #btn04 a {
width: 129px;
height: 45px;
background-image: url(../images/top/btn04.jpg);
}
#nav #btn04 a:hover {
background-image: url(../images/top/btn04o.jpg);
}
#nav #btn05 a {
width: 131px;
height: 45px;
background-image: url(../images/top/btn05.jpg);
}
#nav #btn05 a:hover {
background-image: url(../images/top/btn05o.jpg);
}
#nav #btn06 a {
width: 131px;
height: 45px;
background-image: url(../images/top/btn06.jpg);
}
#nav #btn06 a:hover {
background-image: url(../images/top/btn06o.jpg);
}
#wrapper {
background-image: url(../images/contents/bk_maincontents.jpg);
background-repeat: no-repeat;
}
#content {
width: 450px;
height: auto;
float: left;
margin: 0 0 0 10px;
}
#content p.coment {
text-align: left;
font-size: 0.7em;
margin: 30px 0 0 20px;
}
#photos {
margin: 20px 0 0 0 ;
}
#photos .photo2 {
margin: 0 0 0 8px;
}
#photos .photo4 {
margin: 0 0 0 8px;
}
#photo {
padding: 10px 0 0 0;
}
#footer {
width: 800px;
height: 30px;
background-color: #0028AE;
clear: both;
}
address {
color: #FFF;
font-style: normal;
font-size: 0.8em;
padding: 5px 0 0 0;
}
yuga.js導入版
- jQueryを使って作られたJavaScript
- 「yuga.js」内の「find('img')」３箇所を「find('images')」に変更する。
- img要素に「class="btn"」と設定することでロールオーバー機能を付ける。
- ロールオーバー用画像は必ず「xxx_on」とする。
<span class="deco" style="color:#CC0000;">HTML/home</span> <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title>MY PHOTO ALBUM</title> <link href="css/base2.css" rel="stylesheet" type="text/css" media="screen,print"> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/yuga.js" charset="UTF-8"></script> </head> <body> <!---▼container---> <div id="container"> <h1><img src="images/top/title.jpg" width="800" height="85" alt="MY PHOTO ALBUM" /></h1> <!---▼nav---> <div id="nav"> <ul> <li><img src="images/top/btn01.jpg" width="130" height="45" alt="HOME" class="btn"/></li> <li><a href="#"><img src="images/top/btn02.jpg" width="130" height="45" alt="PROFILE" class="btn"/></a></li> <li><a href="content.html"><img src="images/top/btn03.jpg" width="131" height="45" alt="CONTENTS" class="btn"/></a></li> <li><a href="#"><img src="images/top/btn04.jpg" width="129" height="45" alt="BLOG" class="btn"/></a></li> <li><a href="#"><img src="images/top/btn05.jpg" width="130" height="45" alt="CONTACT" class="btn"/></a></li> <li><a href="#"><img src="images/top/btn06.jpg" width="131" height="45" alt="LINK" class="btn"/></a></li> </ul> </div> <!---▲nav---> <!--▼-wrapper---> <div id="wrapper"> <!---▼content---> <div id="content"> <p class="coment">ホントに何気ない日常なんだけど、ファインダーを通すと違った世界が現れる。<br /> 気の向くまま徒然に撮ったプライベートフォトアルバムへようこそ。</p> <div id ="photos"> <p><img src="images/top/photo01s.jpg" width="204" height="137" alt="photo1"/><img src="images/top/photo02s.jpg" width="204" height="137" alt="photo2"/ class="photo2"></p> <p><img src="images/top/photo03s.jpg" width="204" height="137" alt="photo3"/><img src="images/top/photo04s.jpg" width="204" height="137" alt="photo4" class="photo4" /></p> </div> </div> <!---▲content---> <!---▼photo---> <div id="photo"> <p><img src="images/top/bg_wrapimg.jpg" alt="" width="309" height="378" alt="camera"></p> </div> <!---▲photo---> </div> <!--▲wrapper---> <!--▼footer---> <div id="footer"> <address>COPYRIGHT(C) 2008 MY PHOTO ALBUM ALL RIGHTS RESERVED.</address> </div> <!---▲footer---> </div> <!---▲container---> </body> </html>
