レスポンシブWebデザイン - 演習（１）解答例

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>レスポンシブWebデザイン 演習（１）</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<div class="box">
<main class="content">
<h1>設計図の作成</h1>
<p>物作りは設計図の用意から始まります。機能や構造、配置などを明確にしていくことで、必要な部品、材料、工数、工程、時間など、さまざまな情報が出てきます。</p>
<p><img src="img/snap.jpg" alt=""></p>
<p>また、設計図を用意すると、まわりの人にやりたいことを伝え、情報を共有することができるようになります。必要であれば手助けをお願いすることもできますし、改善点を指摘してもらうこともできるでしょう。</p>
<p>こうした過程で、準備しなければならないもの、頼まなければならないもの、確保しなければならないものなども見えてきます。</p>
</main>
<div class="submenu">
<h2>MENU</h2>
<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="#">24時間サポート</a></li>
<li><a href="#">採用情報</a></li>
<li><a href="#">お問い合わせ</a></li>
<li><a href="#">ブログ</a></li>
</ul>
</div><!-- /.submenu -->
</div><!-- /.box -->
</div><!-- /#container -->
<footer class="footer">
<div class="box">
<form action="#" class="search" method="get">
<input id="q" name="q" type="search" value=""><button type="submit"><i class="fa fa-search"></i><span>検索</span></button>
</form>
<div class="snsmenu">
<ul>
<li><a href="#"><i class="fa fa-twitter"></i><span>Twitter</span></a></li>
<li><a href="#"><i class="fa fa-facebook"></i><span>Facebook</span></a></li>
<li><a href="#"><i class="fa fa-google-plus"></i><span>Google+</span></a></li>
<li><a href="#"><i class="fa fa-rss"></i><span>RSS</span></a></li>
</ul>
</div><!-- /.snsmenu -->
<div class="copyright">
<p><small>Copyright © レスポンシブWebデザイン</small></p>
</div><!-- /.copyright -->
</div><!-- /.box -->
</footer><!-- /footer -->
</body>
</html>

@charset "UTF-8";

/* reset
-------------------------------------------------------------------*/
html, body, h1, h2, p, ul, li {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
ul { list-style: none; }
a { text-decoration: none; }
img { border: none; vertical-align: bottom; }

/* layout
-------------------------------------------------------------------*/
#container {
  width: 100%;
  height: auto;
  padding: 30px auto 40px auto;
  overflow: hidden;
}
img {
  max-width: 100%;
}
.box {
  padding: 16px;
  box-sizing: border-box;
}
.content, .submenu {
  box-sizing: border-box;
}
.content h1 {
  margin-bottom: 20px;
  font-size: 30px;
  color: #333;
}
.content p {
  margin-bottom: 20px;
  font-size: 16px;
  line-height: 1.5;
}
.submenu {
  border: solid 5px #CCC;
  padding: 20px 15px 10px ;
}
.submenu h2 {
  margin-bottom: 10px;
  color: #888;
  font-size: 18px;
  line-height: 1.2;
}
.submenu ul {
  font-size: 14px;
  line-height: 1.4;
}
.submenu li a {
  display: block;
  padding: 10px 5px;
  color: #666;
}
.submenu li a:hover {
  background-color: #EEE;
}
.submenu li a {
  border-top: solid 1px #CCC;
}
.footer {
  padding: 30px auto;
  background-color: #DDD;
  overflow: hidden;
}
.search {
  margin-bottom: 20px;
  width: 400px;
  max-width: 100%;
  background-color: #FFF;
  position: relative;
}
.search input {
  width: 86%;
  height: 44px;
  padding: 5px;
  border: none;
  border-radius: 0;
  background-image: none;
  font-family: inherit;
  font-size: 20px;
  -webkit-appearance: none;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.search button {
  display: block;
  width: 44px;
  height: 44px;
  margin-left: 0;
  padding: 5px;
  border: none;
  border-radius: 0;
  background: none;
  color: #666;
  font-size: 20px;
  line-height: 33px;
  text-decoration: none;
  cursor: pointer;
  -webkit-appearance: none;
  position: absolute;
  top: 0;
  right: 0;
}
.search button:visited, .search button:active {
  outline: none;
}
.search span, .snsmenu li a span {
  display: block;
  white-space: nowrap;
  text-indent: 100%;
  overflow: hidden;
}
.snsmenu ul {
  font-size: 14px;
  line-height: 1.4;
  margin: 16px;
  margin-left: 0;
  overflow: hidden;
}
.snsmenu li {
  float: left;
}
.snsmenu li a {
  display: block;
  width: 50px;
  height: 40px;
  margin-right: 20px;
  padding-top: 10px;
  border-radius: 6px;
  background-color: #AAA;
  color: #000;
  text-align: center;
}
.snsmenu li a i {
  color: #FFF;
  font-size: 30px;
}
.snsmenu li a:hover {
  background-color: #888;
}
.copyright p {
  clear: both;
  color: #666;
  font-size: 14px;
}


@media screen and (min-width: 768px) {

/* main＆submenu 2column */
.content {
  float: left;
  width: 64%;
  margin-right: 4%;
}
.submenu {
  float: left;
  width: 32%;
}

/* footer 2column */
.search {
  float: right;
  margin-top: 20px;
}
.snsmenu {
  float: left;
}

}


@media screen and (min-width: 1024px) {

.box {
  width: 960px;
  margin: 0 auto;
  overflow: hidden;
}

}