WEBデザインの学習 | ナイアルラトホテップ

このブログは池袋にあるフェリカテクニカルアカデミーで学んだ学習過程を記録するためのものです。HTML+CSS及びJavaScript、jQueryなど。

レスポンシブサイトの練習（全て固定値で列ごとにカラム落ち）

HTML+CSS

ポイントは2段表示になったとき3段目を横並びにする。
f:id:whitexblack:20150612135658j:plainf:id:whitexblack:20150612135705j:plainf:id:whitexblack:20150612135709j:plain

HTML

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>楽しいおかず</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<div class="content">
<header>
<h1><img src="img/logo01.png" alt="美味しいおかず"></h1>
<ul>
<li><img src="img/nav01_01.png" alt=""></li>
<li><img src="img/nav02_01.png" alt=""></li>
<li><img src="img/nav03_01.png" alt=""></li>
<li><img src="img/nav04_01.png" alt=""></li>
</ul>
</header>
<nav>
<ul>
<li><img src="img/ph01_l.jpg" alt=""></li>
<li><img src="img/ph02_mt.jpg" alt=""></li>
<li><img src="img/ph03_s.jpg" alt=""></li>
<li><img src="img/ph04_s.jpg" alt=""></li>
<li><img src="img/ph05_my.jpg" alt=""></li>
<li><img src="img/ph06_s.jpg" alt=""></li>
<li><img src="img/ph07_s.jpg" alt=""></li>
</ul>
</nav>
</div><!--/.content-->

<div class="content">
<ul>
<li><img src="img/ph08_my.jpg" alt=""></li>
<li><img src="img/ph09_s.jpg" alt=""></li>
<li><img src="img/ph10_s.jpg" alt=""></li>
<li><img src="img/ph11_l.jpg" alt=""></li>
<li><img src="img/ph12_s.jpg" alt=""></li>
<li class="right"><img src="img/ph13_mt.jpg" alt=""></li>
<li><img src="img/ph14_s.jpg" alt=""></li>
<li><img src="img/ph15_l.jpg" alt=""></li>
<li><img src="img/ph16_s.jpg" alt=""></li>
<li><img src="img/ph17_s.jpg" alt=""></li>
<li><img src="img/ph18_my.jpg" alt=""></li>
</ul>
</div><!--/.content-->

<div class="content3">
<ul>
<li><img src="img/ph19_l.jpg" alt=""></li>
<li><img src="img/ph20_s.jpg" alt=""></li>
<li class="right"><img src="img/ph21_mt.jpg" alt=""></li>
<li><img src="img/ph22_s.jpg" alt=""></li>
<li><img src="img/ph23_s.jpg" alt=""></li>
<li><img src="img/ph24_s.jpg" alt=""></li>
<li><img src="img/ph25_my.jpg" alt=""></li>
<li><img src="img/ph26_s.jpg" alt=""></li>
<li><img src="img/ph27_s.jpg" alt=""></li>
<li><img src="img/ph28_s.jpg" alt=""></li>
<li><img src="img/ph29_s.jpg" alt=""></li>
<li><img src="img/ph30_l.jpg" alt=""></li>
</ul>
</div><!--/.content3-->

</div><!--/#container-->
</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:
"Hiragino Kaku Gothic ProN",
Meiryo, 
sans-serif;
}
ul, ol {
list-style: none; }
a {
text-decoration: none; }
img {
border: 0;
vertical-align: bottom;
}
footer,header,nav{
  display: block;}

/*layout*/
body{
background: #fff;}
#container{
width:320px;
margin: 0 auto;
overflow: hidden;}
.content,.content3{
float: left;
width: 320px;}
.content h1{
padding: 10px;}
.content li,.content3 li{
float:left;
padding: 10px;}
.content li.right,.content3 li.right{
float: right;}
@media screen and (min-width:640px){ 
#container{width:640px;} 
.content3{
width: 640px;}
}
@media screen and (min-width:960px){ 
#container{width:960px;} 
.content3{
width: 320px;}}