確実なスライス方法
ガイドを引く
- ガイドに沿ってスライスは余計なスライスが生成されるため使用しない。
- スライスツールで、グリッドにスナップを有効化し、それぞれをスライス、命名する。
Web用に保存
- 画面上でスライスを選択すると、それぞれに保存画質を設定できる。
- 出力設定の編集で出力ファイル名、フォルダ名など設定できる。
- 保存
- すべてのユーザー定義スライス()を指定して保存。
ポイント1:ポジションレイアウト
- bottom:0 left:0でかんたんに底部から場所指定できる
- 親要素にposition: relative、該当要素にposition: absoluteを指定すること
グリッドデザインにおけるfloatの有効利用
- float:leftが隙間に入っていく性質を利用
- メインコンテンツを短いCSSで実現
- margin、box幅を厳密に計算
HTMLソース
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<div id="header">
<div id="logo"><img src="img/loft._logo.gif" alt="logo"></div>
<div id="nav">
<ul>
<li><img src="img/loft._nav01.gif" alt=""></li>
<li><img src="img/loft._nav02.gif" alt=""></li>
<li><img src="img/loft._nav03.gif" alt=""></li>
</ul>
</div>
</div>
<div id="wrapper">
<div id="banner">
<ul>
<li><img src="img/loft._banner01.png" alt=""></li>
<li><img src="img/loft._banner02.png" alt=""></li>
<li><img src="img/loft._banner03.png" alt=""></li>
</ul>
</div>
<div id="content">
<ul>
<li class="main"><img src="img/loft._01.png" alt=""></li>
<li class="rank"><img src="img/loft._02.png" alt=""></li>
<li class="rank"><img src="img/loft._03.png" alt=""></li>
<li class="rank"><img src="img/loft._04.png" alt=""></li>
<li class="rank"><img src="img/loft._05.png" alt=""></li>
<li><img src="img/loft._06.png" alt=""></li>
<li><img src="img/loft._07.png" alt=""></li>
<li><img src="img/loft._08.png" alt=""></li>
<li><img src="img/loft._09.png" alt=""></li>
<li class="rank"><img src="img/loft._10.png" alt=""></li>
<li><img src="img/loft._11.png" alt=""></li>
<li><img src="img/loft._12.png" alt=""></li>
<li><img src="img/loft._13.png" alt=""></li>
<li><img src="img/loft._14.png" alt=""></li>
<li class="rank"><img src="img/loft._15.png" alt=""></li>
</ul>
</div>
</div>
</div>
<div id="footer"><p><img src="img/loft._footer.gif" alt=""></p></div>
</body>
</html>
@charset "UTF-8";
html, body, div, h1, h2, h3, h4, h5, h6,p, blockquote, pre,
address,ul, ol, li, dl, dt, dd,table, th, td, form, fieldset {
margin: 0;
padding: 0;
line-height: 1.0;
font-family:
"Lucida Grande",
"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
ul, ol {
list-style: none;
}
a {
text-decoration: none;
}
img {
border: 0;
}
img, input {
vertical-align: bottom;
}
body{
background-color: #efa246;
}
#container{
width: 960px;
height: 540px;
margin: 20px auto;
background-color: #eb8b36;
overflow:hidden;
}
#header{
width: 120px;
height:540px;l
margin-right: 6px;
float:left;
position: relative;
}
#nav{
position:absolute;
bottom:0;
left:0;
}
#wrapper{
width: 816px;
height: 540px;
float: right;
overflow:hidden;
}
#banner{
margin: 9px 0;
float: left;
}
#banner li{
margin-bottom: 18px;
}
#content{
width: 600px;
float: right;
}
#content li{
float: left;
margin: 9px 12px;
}
#footer{
width: 100%;
clear: both;
background: black;
}
#footer p{
text-align:right;
}