2014-12-10

2014-12-10

グリッドレイアウトAdd Star

HTML5

 

 

HTML5でのカラムレイアウト


 

f:id:web-css-design:20111222003737j:image

 


 

f:id:web-css-design:20120721020850j:image

 




html5shiv.js
  • IE8以前のブラウザにも、HTML5の新要素を認識させるためのライブラリ

ie9.js
  • internetexplore6,7,8をie9に近づけるためのライブラリ
  • position:fixed;
  • max-heightやmin-heightなどの最大サイズ設定 
  • aタグ以外での:hover
  • margin: 0 autoで中央寄せ 
  • 透過PNG
  • opacityで透明度

《index.html》

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>おいしいおかず</title>
<linkrel="stylesheet"href="css/style.css">
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lte IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
<style>
  article, aside, dialog, figure, footer, header,
  hgroup, menu, nav, section { display: block; }
</style>
</head>
<body>
<divid="container">
<divclass="content">
<header>
<h1><imgsrc="img/logo01.png"alt="ロゴ"></h1>
<nav>
<ul>
<li><imgsrc="img/nav01_01.png"alt="CONCEPT"></li>
<li><imgsrc="img/nav02_01.png"alt="MENU"></li>
<li><imgsrc="img/nav03_01.png"alt="ACCESS"></li>
<li><imgsrc="img/nav04_01.png"alt="NEWS"></li>
</ul>
</nav>
</header>
<section>
<figure><imgsrc="img/ph26_l.jpg"alt=""></figure>
</section>
</section>
<figure><imgsrc="img/ph36_mt.jpg"alt=""></figure>
<figure><imgsrc="img/ph19_s.jpg"alt=""></figure>
<figure><imgsrc="img/ph37_s.jpg"alt=""></figure>
</section>
<section>
<figure><imgsrc="img/ph23_my.jpg"alt=""></figure>
<figure><imgsrc="img/ph28_s.jpg"alt=""></figure>
<figure><imgsrc="img/ph05_s.jpg"alt=""></figure>
</section>
</div>
<divclass="content">
<section>
<figure><imgsrc="img/ph12_my.jpg"alt=""></figure>
<figure><imgsrc="img/ph02_s.jpg"alt=""></figure>
<figure><imgsrc="img/ph22_s.jpg"alt=""></figure>
</section>
<section>
<figure><imgsrc="img/ph10_l.jpg"alt=""></figure>
</section>
<section>
<figure><imgsrc="img/ph21_s.jpg"alt=""></figure>
<figureclass="right"><imgsrc="img/ph07_mt.jpg"alt=""></figure>
<figure><imgsrc="img/ph03_s.jpg"alt=""></figure>
</section>
<section>
<figure><imgsrc="img/ph09_l.jpg"alt=""></figure>
</section>
<section>
<figure><imgsrc="img/ph13_s.jpg"alt=""></figure>
<figure><imgsrc="img/ph27_s.jpg"alt=""></figure>
<figure><imgsrc="img/ph24_my.jpg"alt=""></figure>
</section>
</div>
<divclass="content">
<section>
<figure><imgsrc="img/ph11_l.jpg"alt=""></figure>
</section>
<section>
<figure><imgsrc="img/ph18_s.jpg"alt=""></figure>
<figureclass="right"><imgsrc="img/ph01_mt.jpg"alt=""></figure>
<figure><imgsrc="img/ph17_s.jpg"alt=""></figure>
</section>
<section>
<figure><imgsrc="img/ph20_s.jpg"alt=""></figure>
<figure><imgsrc="img/ph06_s.jpg"alt=""></figure>
<figure><imgsrc="img/ph15_my.jpg"alt=""></figure>
</section>
<section>
<figure><imgsrc="img/ph25_s.jpg"alt=""></figure>
<figure><imgsrc="img/ph08_s.jpg"alt=""></figure>
<figure><imgsrc="img/ph16_s.jpg"alt=""></figure>
<figure><imgsrc="img/ph04_s.jpg"alt=""></figure>
</section>
<section>
<figure><imgsrc="img/ph14_l.jpg"alt=""></figure>
</section>
</div>
</div>
</body>
</html>

《style.css》

@charset "utf-8";

/* reset */
body, article, section, figure, header, nav, h1, ul, li, img {
  margin: 0;
  padding: 0;
}
ul {
  list-style: none;
}
a {
  text-decoration: none;
}
img {
  border: none;
  vertical-align: bottom;
  margin: 10px;
  float: left;
}

/* layout */
#container {
  width: 960px;
  margin: 0 auto;
}
header, section {
  width: 320px;
  float: left;
}
header li {
  float: left;
  display: inline;
}
.content {
  width: 320px;
  margin: 10px 0;
  float: left;
  display: inline;
  overflow: hidden;
}
.right {
  float: right;
}