グリッドレイアウト - 演習

グリッドレイアウト - 演習

  • 以下のレイアウトを作成しなさい


f:id:web-0220:20180712004143p:plain

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>メディアスタイル</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="style.css">
</head>
<body>

<header class="header">
  <div class="container">
    <h1>Media Style</h1>
  </div><!-- /.container -->
</header>

<main class="content">

<ul>

<li class="box">
<a href="#">
  <img src="http://placehold.it/600x400" alt="">
  <div class="caption">
    <h2 class="tag">メディア</h2>
    <time datetime="2018-07-12">2018-07-12</time>
    <p class="title">タイトルが入ります。タイトルが入ります。タイトルが入ります。</p>
  </div><!-- /.caption -->
</a>
</li><!-- /.box -->

<li class="box">
<a href="#">
  <img src="http://placehold.it/600x400" alt="">
  <div class="caption">
    <h2 class="tag">メディア</h2>
    <time datetime="2018-07-12">2018-07-12</time>
    <p class="title">タイトルが入ります。タイトルが入ります。タイトルが入ります。</p>
  </div><!-- /.caption -->
</a>
</li><!-- /.box -->

<li class="box">
<a href="#">
  <img src="http://placehold.it/600x400" alt="">
  <div class="caption">
    <h2 class="tag">メディア</h2>
    <time datetime="2018-07-12">2018-07-12</time>
    <p class="title">タイトルが入ります。タイトルが入ります。タイトルが入ります。</p>
  </div><!-- /.caption -->
</a>
</li><!-- /.box -->

<li class="box">
<a href="#">
<img src="http://placehold.it/600x400" alt="">
  <div class="caption">
    <h2 class="tag">メディア</h2>
    <time datetime="2018-07-12">2018-07-12</time>
    <p class="title">タイトルが入ります。タイトルが入ります。タイトルが入ります。</p>
  </div><!-- /.caption -->
</a>
</li><!-- /.box -->

<li class="box">
<a href="#">
<img src="http://placehold.it/600x400" alt="">
  <div class="caption">
    <h2 class="tag">メディア</h2>
    <time datetime="2018-07-12">2018-07-12</time>
    <p class="title">タイトルが入ります。タイトルが入ります。タイトルが入ります。</p>
  </div><!-- /.caption -->
</a>
</li><!-- /.box -->

<li class="box">
<a href="#">
  <img src="http://placehold.it/600x400" alt="">
  <div class="caption">
    <h2 class="tag">メディア</h2>
    <time datetime="2018-07-12">2018-07-12</time>
    <p class="title">タイトルが入ります。タイトルが入ります。タイトルが入ります。</p>
  </div><!-- /.caption -->
</a>
</li><!-- /.box -->

<li class="box">
<a href="#">
  <img src="http://placehold.it/600x400" alt="">
  <div class="caption">
    <h2 class="tag">メディア</h2>
    <time datetime="2018-07-12">2018-07-12</time>
    <p class="title">タイトルが入ります。タイトルが入ります。タイトルが入ります。</p>
  </div><!-- /.caption -->
</a>
</li><!-- /.box -->

<li class="box">
<a href="#">
  <img src="http://placehold.it/600x400" alt="">
  <div class="caption">
    <h2 class="tag">メディア</h2>
    <time datetime="2018-07-12">2018-07-12</time>
    <p class="title">タイトルが入ります。タイトルが入ります。タイトルが入ります。</p>
  </div><!-- /.caption -->
</a>
</li><!-- /.box -->

<li class="box">
<a href="#">
  <img src="http://placehold.it/600x400" alt="">
  <div class="caption">
    <h2 class="tag">メディア</h2>
    <time datetime="2018-07-12">2018-07-12</time>
    <p class="title">タイトルが入ります。タイトルが入ります。タイトルが入ります。</p>
    </div><!-- /.caption -->
</a>
</li><!-- /.box -->

</ul>

</main>

</div><!-- /.container -->

<footer class="footer">
  <div class="container">
    <p><small>@ Media Style</small></p>
  </div><!-- /.footer -->
</footer>

</body>
</html>
@charset "UTF-8";

/* reset
--------------------------------- */
html, body, h1, h2, p, ul, li {
  padding: 0;
  margin: 0;
  line-height: 1.0;
}
ul {
  list-style: none;
}
a {
  text-decoration: none;
  color: inherit;
}
img {
  vertical-align: bottom;
  width: 100%;
}

/* body
--------------------------------- */
body {
  background: #FFF;
  font-size: 16px;
}

/* layout
--------------------------------- */
.header {
  width: 100%;
  margin-bottom: 20px;
  padding: 20px;
  background: #EEEEEE;
  text-align: center;
  color: #A3A3A3;
}
  .header h1 {
    font-size: 20px;
  }
.container {
  width: 960px;
  margin: 0 auto;
}
.content {
  position: relative;
  width: 960px;
  margin: 0 auto 20px; 
}
  .content ul {
    overflow: hidden;
  }
.box {
  position: relative;
  float: left;
  width: 300px;
  margin: 10px;
}
  .caption {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 80px;
    padding: 10px;
    box-sizing: border-box;
    background: #A3A3A3;
    color: #FFF;

  }
    .title {
      font-size: 14px;
      line-height: 1.3;
    }
    .tag {
      display: inline-block;
      margin-bottom: 6px;
      padding: 0 5px;
      line-height: 20px;
      font-size: 12px;
      letter-spacing: 0.04em;
      border-radius: 2px; 
      background-color: #FF9C00;
    }
    time {
      font-size: 12px;
    }

  .footer {
    width: 100%;
    padding: 20px;
    background: #EEEEEE;
    text-align: center;
    color: #A3A3A3;
  }