レスポンシブ　テンプレート１

CSS レスポンシブ＿テンプレート

index.html

--------

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>レスポンシブ 2017-1-15</title>
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/styles.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
<header>
<div class="container">
<i class="fa fa-bars header-mobil-menu" aria-hidden="true"></i>

<ul class="header-pc-menu">
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
</ul>

<h1>ROGO</h1>
</div>
</header>

<section class="features">
<h2>Section 1</h2>
<div class="container">

<div class="item">
<img src="img/to_1.png" alt="">
<p class="pull-right">秋,秋,秋,秋,秋,秋,秋,秋,秋,秋,秋,秋,秋,秋,秋,秋,秋,秋,秋,秋,</p>
</div>

<div class="item">
<img src="img/to_1.png" alt="">
<p class="pull-left">秋,秋,秋,秋,秋,秋,秋,秋,秋,秋,秋,秋,秋,秋,秋,秋,秋,秋,秋,秋,</p>
</div>

<div class="item">
<img src="img/to_1.png" alt="">
<p class="pull-right">秋,秋,秋,秋,秋,秋,秋,秋,秋,秋,秋,秋,秋,秋,秋,秋,秋,秋,秋,秋,</p>
</div>

</div>
</section >

<section class="news">
<h2>Section 2 FlexBox</h2>
<div class="container">


<div class="item">
<img src="img/news.jpg" alt="">
<p>夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,</p>
</div>

<div class="item">
<img src="img/news.jpg" alt="">
<p>夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,</p>
</div>

<div class="item">
<img src="img/news.jpg" alt="">
<p>夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,夏,</p>
</div>

</div>
</section >

<section class="how-to-use">
<h2>YouTubu</h2>
<div class="container">
<div class="iframe-wrapper">
<iframe width="560" height="315" src="https://www.youtube.com/embed/bwZ3i5wy6NA" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</section >

<footer>
Footer_areaS
</footer>

</body>
</html>

--------

styles.css

 

@charset "utf-8";

/*--- 全体 570px 以下---*/

body {
font-size:14px;
font-family: Verdana, sans-serif;
margin: 0;
padding: 0;
color: #333;
background: #f8f8f8;
}

p {
line-height: 2;
}

/*-- 要素の中央揃え --*/
.container {
width: 90%;
margin: 0 auto;
}

.header-pc-menu {
display: none;
}

/*-- 見出しテキスト h2 --*/
.header-mobil-menu {
float: right;
font-size: 24px;
cursor: pointer;
}

/*--- section ----*/

section {
padding: 60px 0;
}

section h2 {
text-align: center;
margin: 0 0 60px;
}

/*---　交互に背景色切り替え ----*/

section:nth-child(even) {
background: #fff;
}

/*---　画像フィット ----*/

.features img {
width: 100%;
}


/*-- news 中央揃え　----*/
.news .item {
text-align: center;
}

/*-- news テキスト 左　----*/
.news .item p {
text-align: left;
}

/*---- item 余白 ----*/

.features .item {
margin-bottom: 60px;
}

.features .item:last-child {
margin-bottom: 0;
}

.news .item {
margin-bottom: 60px;
}

.news .item:last-child {
margin-bottom: 0;
}

/*--- ユーチューブ 16:9で伸縮させる iframe ----*/
.how-to-use iframe {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}

/*--- 16:9で伸縮させる ---*/
.iframe-wrapper {
padding-bottom: 56.25%;
height: 0;
position: relative;
}

/*---- footer ----*/

footer {
text-align: center;
color: #000;
padding: 60px;
}

/* medium 570px以上 */
@media (min-width:570px) {

.features img {
width: 50%;
}

.features p {
width: 45%;
}

.pull-right {
float: right;
padding-left: 5%;
}

.pull-left {
float: left;
padding-right: 5%;
}

.features .item {
overflow: hidden;
}

.news .container {
-webkit-display: flex;
-moz-display: flex;
-o-display: flex;
-ms-display: flex;
display: flex; /* 親要素につける */
justify-content: space-between; /*アイテム間に均等に余白が開く */
}

.news .item {
width: 30%;
}

.news .item img {
width: 100%;
}


}


/* lage */

@media (min-width: 820px) {

.container {
width: 820px;
}

.header-pc-menu {
list-style: none;
padding: 0;
margin: 0;
float: right;
display: block;
}

.header-mobil-menu {
display: none;
}

.header-pc-menu > li {
display: inline-block;
width: 60px;
text-align: center;
cursor: pointer;
}

}