CSSテスト - Gattyan

ANTICA VINERIA GIULIANO

http://kikin.han-be.com/lessonWork/1114/top.html←課題制作サイトへ

TOPのソース

<!DOCTYPE HTML>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ANTICA</title>
  <style type="text/css">
 * {
  margin: 0;
  padding: 0;
  font-family:
  "Hiragino Kaku Gothic Pro",
  "ヒラギノ角ゴ Pro W3",
  Meiryo,
  "メイリオ",
  Osaka,
  "MS P Gothic",
  "ＭＳ Ｐ ゴシック",
  sans-serif;
 }
body {
 background-color:#a23;
}
#container {
 width:800px;
 height: auto;
 margin: 50px auto;
 background-color:#fff;
 border:solid 3px #ff0;
}
h1 {
 width: 800px;
 height: 100px;
}
#picture {
 width:800px;
 height:400px;
}
#picture p img.center {
 margin:0 8px;
}
#nav ul {
 width:800px;
 height:40px;
 list-style-type: none;
}
#nav li {
 float: left;
 display:inline;
}
#nav li a {
 display:block;
 text-decoration:none;
}
#nav li#nav1 {
 width:98px;
 height:40px;
 background-image:url(images/btn01.gif);
 background-repeat:no-repeat;
 background-position:left top;
}
#nav li#nav2 {
 width:149px;
 height:40px;
 background-image:url(images/btn02.gif);
 background-repeat:no-repeat;
 background-position:left top;
}
#nav li#nav3 {
 width:173px;
 height:40px;
 background-image:url(images/btn03.gif);
 background-repeat:no-repeat;
 background-position:left top;
}
#nav li#nav4 {
 width:145px;
 height:40px;
 background-image:url(images/btn04.gif);
 background-repeat:no-repeat;
 background-position:left top;
}
#nav li#nav5 {
 width:115px;
 height:40px;
 background-image:url(images/btn05.gif);
 background-repeat:no-repeat;
 background-position:left top;
}
#nav li#nav6 {
 width:120px;
 height:40px;
 background-image:url(images/btn06.gif);
 background-repeat:no-repeat;
 background-position:left top;
}
#nav li#nav1 a:hover {
 width:98px;
 height:40px;
 background-image:url(images/btn01o.gif);
}
#nav li#nav2 a:hover {
 width:149px;
 height:40px;
 background-image:url(images/btn02o.gif);
 }
#nav li#nav3 a:hover {
 width:173px;
 height:40px;
 background-image:url(images/btn03o.gif);
}
#nav li#nav4 a:hover {
 width:145px;
 height:40px;
 background-image:url(images/btn04o.gif);
}
#nav li#nav5 a:hover {
 width:115px;
 height:40px;
 background-image:url(images/btn05o.gif);
}
#nav li#nav6 a:hover {
 width:120px;
 height:40px;
 background-image:url(images/btn06o.gif);
}
em {
 visibility: hidden;
}
#footer {
 width:800px;
 height:60px;
 background-image:url(images/footer.gif);
 background-repeat:no-repeat;
}
#footer p {
 font-size:0.85em;
 padding:20px 0 0 0;
 text-align: center;
}
address {
 font-size: 0.8em;
 text-align:center;
}
</style>
</head>
<body>
<div id="container">
  <h1><img src="images/title.gif" width="800"  height="100" alt=""></h1>
<div id="picture">
 <p><img src="images/photo01.jpg"width="263" height="400" alt="photo1" /><img src="images/photo02.jpg"width="257" height="400" alt="photo2" class="center"/><img src="images/photo03.jpg"width="264" height="400" alt="photo3" /></p>
</div>
<div id="nav">
  <ul>
    <li id="nav1"><a href="top.html"><em>menu</em></a></li>
    <li id="nav2"><a href="#"><em>todaysSpecial</em></a></li>
    <li id="nav3"><a href="#"><em>wine</em></a></li>
    <li id="nav4"><a href="map.html"><em>map</em></a></li>
    <li id="nav5"><a href="#"><em>infomation</em></a></li>
    <li id="nav6"><a href="#"><em>contact</em></a></li>
  </ul>
</div>
<div id="footer">
  <p>アンティーカ・ヴィネリア・ジュリアーノ　〒108-0071　東京都港区白金台5-17-10 Shiroganedai THE 2000 B1F</p>
  <address>Since 2008, Copyright(C) ANTICA VINERIA GIULIANO All Rights Reserved.</address>
</div>
</div>
</body>
</html>

MAPのソース

<!DOCTYPE HTML>
<html lang="ja">
<head>
 <meta charset="UTF-8">
 <title>ANTICA</title>
 <style type="text/css">
 * {
  margin: 0;
  padding: 0;
  font-family:
  "Hiragino Kaku Gothic Pro",
  "ヒラギノ角ゴ Pro W3",
  Meiryo,
  "メイリオ",
  Osaka,
  "MS P Gothic",
  "ＭＳ Ｐ ゴシック",
  sans-serif;
 }
body {
 background-color:#a23;
}
#container {
 width:800px;
 height: auto;
 margin: 50px auto;
 background-color:#fff;
 border:solid 3px #ff0;
}
h1 {
 width: 800px;
 height: 100px;
}
#content {
 width:800px;
 height:400px;
}
#content img.left {
 float: left;
}
#content img.access {
 float: left;
 margin:10px; 10px;
}
#content img.map {
 float: left;
 margin:10px 50px;
}
#nav ul {
 width:800px;
 height:40px;
 list-style-type: none;
}
#nav li {
 float: left;
 display:inline;
}
#nav li a {
 display:block;
 text-decoration:none;
}
#nav li#nav1 {
 width:98px;
 height:40px;
 background-image:url(images/btn01.gif);
 background-repeat:no-repeat;
 background-position:left top;
}
#nav li#nav2 {
 width:149px;
 height:40px;
 background-image:url(images/btn02.gif);
 background-repeat:no-repeat;
 background-position:left top;
}
#nav li#nav3 {
 width:173px;
 height:40px;
 background-image:url(images/btn03.gif);
 background-repeat:no-repeat;
 background-position:left top;
}
#nav li#nav4 {
 width:145px;
 height:40px;
 background-image:url(images/btn04.gif);
 background-repeat:no-repeat;
 background-position:left top;
}
#nav li#nav5 {
 width:115px;
 height:40px;
 background-image:url(images/btn05.gif);
 background-repeat:no-repeat;
 background-position:left top;
}
#nav li#nav6 {
 width:120px;
 height:40px;
 background-image:url(images/btn06.gif);
 background-repeat:no-repeat;
 background-position:left top;
}
#nav li#nav1 a:hover {
 width:98px;
 height:40px;
 background-image:url(images/btn01o.gif);
}
#nav li#nav2 a:hover {
 width:149px;
 height:40px;
 background-image:url(images/btn02o.gif);
 }
#nav li#nav3 a:hover {
 width:173px;
 height:40px;
 background-image:url(images/btn03o.gif);
}
#nav li#nav4 a:hover {
 width:145px;
 height:40px;
 background-image:url(images/btn04o.gif);
}
#nav li#nav5 a:hover {
 width:115px;
 height:40px;
 background-image:url(images/btn05o.gif);
}
#nav li#nav6 a:hover {
 width:120px;
 height:40px;
 background-image:url(images/btn06o.gif);
}
em {
 visibility: hidden;
}
#footer {
 width:800px;
 height:60px;
 background-image:url(images/footer.gif);
 background-repeat:no-repeat;
}
#footer p {
 font-size:0.85em;
 padding:20px 0 0 0;
 text-align: center;
}
address {
 font-size: 0.8em;
 text-align:center;
}
</style>
</head>
<body>
<div id="container">
  <h1><img src="images/title.gif" width="800"  height="100" alt=""</h1>
<div id="content">
  <p><img src="images/map/pageImage.jpg"width="200" height="400" alt="photo1" class="left"/><img src="images/map/pageTitle.gif"width="551" height="24" alt="photo2" class="access"/><img src="images/map/map.gif"width="452" height="302" alt="photo3" class="map"/></p>
</div>
<div id="nav">
  <ul>
    <li id="nav1"><a href="top.html"><em>menu</em></a></li>
    <li id="nav2"><a href="#"><em>todaysSpecial</em></a></li>
    <li id="nav3"><a href="#"><em>wine</em></a></li>
    <li id="nav4"><a href="map.html"><em>map</em></a></li>
    <li id="nav5"><a href="#"><em>infomation</em></a></li>
    <li id="nav6"><a href="#"><em>contact</em></a></li>
  </ul>
</div>
<div id="footer">
  <p>アンティーカ・ヴィネリア・ジュリアーノ　〒108-0071　東京都港区白金台5-17-10 Shiroganedai THE 2000 B1F</p>
 <address>Since 2008, Copyright(C) ANTICA VINERIA GIULIANO All Rights Reserved.</address>
</div>
</div>
</body>
</html>

MAPの画面の配置ではまってしまった・・・。全然ダメだな。ふがいない結果になってしまった。もっとたくさん打たねば。
それよりもillustratorの操作の仕方をかなり忘れている。今日作ってたボタンとか全然わからんかった。FLASHもスクリプトを打つ前の段階の画像やらもろもろの準備段階でつまずくことが多い。