9/10授業(メモ)

  • html
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>メディアクエリ</title>
<link rel="stylesheet" href="css/style-l.css">
<link rel="stylesheet" href="css/style-m.css" media="only screen and (min-width:600px) and (max-width:979px)">
<link rel="stylesheet" href="css/style-s.css" media="only screen and (max-width:599px)">

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Maven+Pro:900,400">
</head>

<body>

<div id="container">

<div id="header">

<div id="logo">
<h1><img src="images/logo.jpg" alt="PICKUP STREAM"></h1>
 </div>
 
<div id="icon">
<ul>
<li><a href="#"><img src="images/twitter.png" alt="twitter"></a></li>
<li><a href="#"><img src="images/facebook.png" alt="facebook"></a></li>
<li><a href="#"><img src="images/google+.png" alt="google+"></a></li>
<li><a href="#"><img src="images/rss.png" alt="rssfeed"></a></li>
</ul>
</div>

<div id="headerimage">
<img src="images/header.jpg" alt="イメージ画像">
</div>

<div id="nav">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>

</div>

<div id="content">

<div class="date"><span>1</span>AUG</div>

<h2>海岸のデコレーション</h2>

<div class="category">CATEGORY:<a href="#"> 海と海岸と空</a></div>

<p>海岸には砂や貝殻しかないように思ってしまいますが、よく見ると草花も生えていることがわかります。ただし、海水や潮風、強い日差しなどの影響で、大きく育つものは見当たりません。その多くは小さく、地を這って伸びています。</p>

<div class="img"><img src="images/sand.jpg" alt="海岸線の写真"></div>
<p>こうした植物は「海浜植物」と呼ばれ、砂をかぶって埋もれても、茎が伸びてまた葉を出す仕組みになっています。</p>

<p>ところどころに顔を出す緑色の小さな葉っぱは、海岸をかわいくデコレーションしてくれます。海への道中で踏んづけてしまう前に、足元にあるものを観察してみるのもおもしろいですよ。</p>

</div>
<div id="sidebar">
<div class="menu">
<h3>CATEGORIES</h3>
<ul>
<li><a href="#">山と森林</a></li>
<li><a href="#">海と海岸と空</a></li>
<li><a href="#">都市と建築</a></li>
<li><a href="#">地下</a></li>
</ul>
</div>

<div class="menu">
<h3>RECENT POSTS</h3>
<ul>
<li><a href="#">海岸のデコレーション</a></li>
<li><a href="#">風車と海風の関係</a></li>
<li><a href="#">ツルを伸ばしてどこまでも</a></li>
<li><a href="#">色とりどりの絨毯</a></li>
<li><a href="#">休日に買い物にいくなら</a></li>
<li><a href="#">高層ビルと風の関係</a></li>
</ul>
</div>

</div>

<div id="footer">
<p>STAR of the sea</p>
<small>Copyright &#169; STAR of the sea</small>
</div>
</div>

</body>
</html>

#container{
	width: 100%;
}

#header{
	margin: 0 0 15px;
}

#content{
	width: 100%;
	float: none;
}

#sidebar{
	width: 100%;
	float: none;
}

img{
	max-width: 100%;
	height: auto;
}

#container{
	position: relative;
}

#icon{
	position: absolute;
	right: 8px;
	bottom: 6px;
}

#footer{
	padding-bottom: 60px;
}

#icon,#logo{
	float: none;
}

#nav li a{
	width: auto;
	padding: 5px 8px;
}

.date{
	float: none;
	font-size: 12px;
	line-height: 2.5;
	display: inline;
	padding: 3px 10px;
	border-radius: 5px;
}

.date span{
	font-size: 12px;
	display: inline;
}

#content h2{
	font-size: 24px;
}

#container{
	width: 100%;
}

#content{
	width: 62.5%;
}

#sidebar{
	width: 31.25%
}

img {
	max-width: 100%;
	height: auto;
}

body{
	margin: 24px 10px;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif
}

#container{
	width: 960px;
	margin: auto;
}

#header{
	margin: 0 0 50px; 
}

#content{
	width: 600px;
	float: left;
	margin: 0 0 50px;
}

#sidebar{
	width: 300px;
	float: right;
	margin: 0 0 50px;
}

#footer{
	clear: both;
}

#logo{
	float: left;
}

#logo h1 {
	margin: 0;
	line-height: 1;
}

#icon {
	float: right;
	text-align: right;
}

#icon ul {
	margin: 0;
	padding: 3px 0 0;
}

#icon li{
	display: inline;
	list-style-type: none;
}

#icon img{
	border: none;
}

#headerimage img {
	vertical-align: bottom;
}

#nav{
	font-family: 
	Arial,
	Helvetica, 
	sans-serif;
	font-size: 14px;
	overflow: hidden;
	border-top: solid 1px #FFF;
	background-color: #000;
}

#nav ul{
	margin: 0;
	padding: 0;
}

#nav li{
	list-style-type: none;
	float: left;
}

#nav li a{
	display: block;
	width: 120px;
	padding: 6px 0;
	border-right: solid 1px #FFF;
	color: #FFF;
	text-align: center;
	text-decoration: none;
}

#nav li a:hover{
	background-color: #0097d8;
}

.date{
	float: right;
	background-color: #0097d8;
	padding: 8px 22px;
	border-radius: 55px/48px;
	text-align: center;
	font-family: 
	Arial, 
	Helvetica, 
	sans-serif;
	font-weight: bold;
	color: #FFF;
}

.date span{
	display: block;
	font-size: 32px;
	line-height: 1.0;
}

#content h2 {
	font-size: 28px;
	border-bottom: solid 1px #aaa;
	margin: 0 0 6px;
	padding: 0 0 3px;
}

.category{
	font-size: 14px;
	color: #666;
}

#content p{
	line-height: 1.6;
}

.menu{
	margin-bottom: 50px;
}

.menu h3{
	font-family: 
	Arial, 
	Helvetica, 
	sans-serif;
	font-size: 26px;
	color: #66c1e8;
	margin: 0 0 5px;
}

.menu ul{
	margin: 0;
	padding: 0;
	border-top: solid #aaa;
}

.menu li{
	margin-bottom: 0;
	list-style-type: none;
	border-bottom: solid 1px #aaa;
}

.menu li a{
	display: block;
	font-size: 14px;
	text-decoration: none;
	color: #666;
	padding: 10px 0 10px 20px;
	background-image: url(listmark.png);
	background-repeat: no-repeat;
	background-position: 0 50%;
}

.menu li a:hover{
	background-color: #b4f0ff;
}

#footer{
	font-family: 
	Arial, 
	Helvetica, 
	sans-serif;
	color: #FFF;
	background-color: #000;
	padding: 10px 10px 20px;
	text-align: center;
}

#footer p{
	margin: 0;
}

#footer small{
	font-size: 12px;
	font-weight: bold;
	display: block;
}