2月17日授業内容①(positionについて)
今日は、授業でPositionについて勉強しました。
参照先:
本:P146〜P155
- positionをかけていないと機能しない。
- 重なっているものすべてに下から何番目に該当するかの記述が必要。
- 順番になってよければ良く極端に数値が離れていても問題はない。
*通常だと記述順に表示されるのでz-indexを設定しないと以下のようになる。
z-indexを設定すると以下のようになる。
5番はfixedにしているのでスクロールしてもついてくる。
・入力内容
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>z-index</title>
<style>
html,body,div{font-family:"Hiragino Kaku Gothic proN",
Meiryo,
sans-serif;
padding:0;
margin:0;
line-height:1.0;
}
a{text-decoration:none;}
ul{list-style:none;}
body{font-size:16px;
background:#61B9E8;
height:3000px;}
#container{width:600px;
height:600px;
background:#FFFFFF;
margin:0 auto;
position:relative;
top:0;
left:0;}
div.box{width:100px;
height:100px;}
div.one{background:#DAE040;
position:absolute;
top:0;
left:0;
z-index:10;}
div.two{background:#E7686A;
position:absolute;
top:50px;
left:50px;
z-index:5;}
div.three{background:#54E97A;
position:absolute;
top:100px;
left:100px;
z-index:1;}
div.four{background:#CF80EC;
position:relative;/*#containerにposition:relative;を設定した状態で個別で設定した場合はそのものがある位置から見て上下左右に動く数値を考える必要がある*/
top:500px;
left:500px;}
div.five{background:#6963E4;
position:fixed;/*固定ができるが、基準位置がbodyのleft,topになる。スクロールしてもついてくる。*/
top:100px;
left:300px;}
</style>
</head>
<body>
<div id="container">
<div class="box one">1</div>
<div class="box two">2</div>
<div class="box three">3</div>
<div class="box four">4</div>
<div class="box five">5</div>
</div>
</body>
</html>
*以下は1番上に載せているcafemenuの記述です。
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="cafemenu.css">
<title>patisserie camelia</title>
</head>
<body>
<div id="container">
<div id="header">
<ul>
<li id="info"><a href="#">Infomation</a></li>
<li id="menu"><a href="#">Menu</a></li>
<li id="access"><a href="#">Access</a></li>
<li id="mail"><a href="#">Mail</a></li>
</ul>
<p><img src="img/logo.gif" alt="イメージボックス"></p>/*ここはh1にした方が構成的に良い(*先生の解答例を参照)*/
</div><!--#header-->
<div id="image-box">
<ul>
<li id="camp"><img src="img/campaign.gif" alt="キャンペーン"></li>
<li id="ph1"><img src="img/photo01.jpg" alt="プリン"></li>
<li id="ph2"><img src="img/photo02.jpg" alt="ショートケーキ"></li>
<li id="ph3"><img src="img/photo03.jpg" alt="ワッフル"></li>
<li id="ph4"><img src="img/photo04.jpg" alt="コーヒー"></li>
<li id="ph5"><img src="img/photo05.jpg" alt="ろうそく"></li>
<li id="ph6"><img src="img/photo06.jpg" alt="チーズケーキ"></li>
<li id="ph7"><img src="img/photo07.jpg" alt="イチゴヨーグルト"></li>
<li id="ph8"><img src="img/photo08.jpg" alt="みかんヨーグルト"></li>
<li id="ph9"><img src="img/photo09.jpg" alt="シャンデリア"></li>
<li id="ph10"><img src="img/photo10.jpg" alt="コーヒー"></li>
</ul>
</div><!--#image-box-->
@charset "utf-8";
/* CSS Document */
html,body,div,p,ul,li{font-family:"Hiragino Kaku Gothic proN",
Meiryo,
sans-serif;
padding:0;
margin:0;
line-height:1.0;
}
a{text-decoration:none;}
ul{list-style:none;}
body{font-size:16px;
background:#553a1a;
height:3000px;}
#container{width:900px;
height:400px;
margin:200px auto;
background:white;}
#header{width:280px;
float:left;
padding:10px;}
#header ul{
margin:40px 0 0 20px;
overflow:hidden;
white-space:nowrap;
text-indent:100%;}
#header ul li{height:25px;}
#header ul li a{display:block;}
#header ul li#info{background:url(img/info.gif) no-repeat 0 0;}
#header ul li#info a{background:url(img/info.gif) no-repeat 0 0;}
#header ul li#info a:hover{background:url(img/info_h.gif) no-repeat 0 0;}
#header ul li#menu{background:url(img/menu.gif) no-repeat 0 0;}
#header ul li#menu a{background:url(img/menu.gif) no-repeat 0 0;}
#header ul li#menu a:hover{background:url(img/menu_h.gif) no-repeat 0 0;}
#header ul li#access{background:url(img/access.gif) no-repeat 0 0;}
#header ul li#access a{background:url(img/access.gif) no-repeat 0 0;}
#header ul li#access a:hover{background:url(img/access_h.gif) no-repeat 0 0;}
#header ul li#mail{background:url(img/mail.gif) no-repeat 0 0;}
#header ul li#mail a{background:url(img/mail.gif) no-repeat 0 0;}
#header ul li#mail a:hover{background:url(img/mail_h.gif) no-repeat 0 0;}
#header p{
margin:100px 0 0 20px;}
#image-box{width:480px;
height:400px;
float:right;}
/*#image-box のindividual*/
#image-box{position:relative;}
#image-box ul li{position:absolute;}
#camp{top:-20px;
right:-15px;
}
#ph1{top:80px;
right:0;}
#ph2{bottom:0;
left:80px;}
#ph3{top:0;
left:0;}
#ph4{bottom:80px;
right:0;}
#ph5{top:0;
left:160px;}
#ph6{top:160px;
left:160px;}
#ph7{top:80px;
left:240px;}
#ph8{bottom:80px;
right:160px;}
#ph9{bottom:0;
right:80px;}
#ph10{top:160px;
left:0;}