Webデザインの勉強と製作 | あかとんぼ

フェリカテクニカルアカデミーの学習をベースに、Webについての勉強と製作の過程をまとめています。

[Photoshop][CSS]グリッドレイアウトのデザイン(Photoshopでスライスの利用)

f:id:akatonbo_web:20150612194601g:plain

確実なスライス方法

ガイドを引く
  • ガイドに沿ってスライスは余計なスライスが生成されるため使用しない。
  • スライスツールで、グリッドにスナップを有効化し、それぞれをスライス、命名する。
Web用に保存
  • 画面上でスライスを選択すると、それぞれに保存画質を設定できる。
  • 出力設定の編集で出力ファイル名、フォルダ名など設定できる。
  • 保存
  • すべてのユーザー定義スライス()を指定して保存。
ポイント1:ポジションレイアウト
  • bottom:0 left:0でかんたんに底部から場所指定できる
  • 親要素にposition: relative、該当要素にposition: absoluteを指定すること
グリッドデザインにおけるfloatの有効利用
  • float:leftが隙間に入っていく性質を利用
  • メインコンテンツを短いCSSで実現
  • margin、box幅を厳密に計算

HTMLソース

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<!--header -->
<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>
<!--wrapper -->
<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>
<!-- footer -->
<div id="footer"><p><img src="img/loft._footer.gif" alt=""></p></div>
</body>
</html>

CSSソース

@charset "UTF-8";

/* reset */
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 */
#container{
  width: 960px;
  height: 540px;
  margin: 20px auto;
  background-color: #eb8b36;
  overflow:hidden;
}
/* header */
#header{  
  width: 120px;
  height:540px;l
  margin-right: 6px;
  float:left;
  position: relative;
}
#nav{
  position:absolute;
  bottom:0;
  left:0;
}
/* wrapper */
#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*/
#footer{
  width: 100%;
  clear: both;
  background: black;
}
#footer p{
  text-align:right;
}