1月23日の学習

授業
◆可変グリッドテスト

20120124132859

#wrapper{
     margin: 0 auto;
     min: 500px; /*最小幅*/
     max: 100%; /*最大幅*/
     position: relative;
}

この設定によって、可変した際の最小幅を設定することができる。

◆jQuery横スライド

20120124133239

<!DOCTYPE HTML>
<html lang="ja" xml:lang="ja">
<head>
<meta charset="UTF-8">
<title>slide</title>
<link href="css/base.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="slide">
<ul id="slide_btn">
<li id="slide_btn_next"><a href="#">進む</a></li>
<li id="slide_btn_back"><a href="#">戻る</a></li>
</ul>
<div id="slide_img">
<ul>
<!-- ▼スライドここから -->
<li><img src="images/slide/slide_01.jpg" width="760" height="400" alt="スライド1" /></li>
<li><img src="images/slide/slide_02.jpg" width="760" height="400" alt="スライド2" /></li>
<li><img src="images/slide/slide_03.jpg" width="760" height="400" alt="スライド3" /></li>
<li><img src="images/slide/slide_04.jpg" width="760" height="400" alt="スライド2" /></li>
<li><img src="images/slide/slide_05.jpg" width="760" height="400" alt="スライド3" /></li>
<!-- ▲スライドここまで -->
</ul>
</div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/slide.js"></script>
</body>
</html>

@charset "UTF-8";

* {
	margin:0;
	padding:0;
}
body {
	font-family:
		"ヒラギノ角ゴ Pro W3", 
		"Hiragino Kaku Gothic Pro", 
		"メイリオ", 
		Meiryo, 
		Osaka, 
		"ＭＳ Ｐゴシック", 
		"MS PGothic", 
		sans-serif;
	font-size:12px;
	color:#52483B;
	letter-spacing:0.1em;
}
a img {
	border:none;
}

#slide {
	position:relative;
	clear:both;
	width:810px;
	height:430px;
	margin:30px auto;
	background:url(../images/bg_slide.png) no-repeat;
}
#slide_img {
	width:760px;
	height:400px;
	overflow:hidden;
	padding:15px 0 0 25px;
}
#slide_img ul {
	position:relative;
	overflow:hidden;
	list-style-type:none;
	width:760px;
	height:400px;
}
#slide_img ul li,
#slide_img ul li img {
	width:760px;
	height:400px;
}
#slide_btn {
	list-style-type:none;
}
#slide_btn_next {
	position:absolute;
	top:200px; right:1px;
}
#slide_btn_back {
	position:absolute;
	top:200px; left:1px;
}
#slide_btn_next a,
#slide_btn_back a {
	display:block;
	width:21px;
	height:0;
	padding-top:21px;
	overflow:hidden;
	background:url(../images/btn_slide.png) no-repeat;
}
#slide_btn_next a {
	background-position:-21px 0;
}
#slide_btn_next a:hover {
	background-position:-21px -21px;
}
#slide_btn_back a:hover {
	background-position:0 -21px;
}