レスポンシブWebデザイン - 演習(1)解答例
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>レスポンシブWebデザイン 演習(1)</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>
</div>
</div>
<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>
<div class="copyright">
<p><small>Copyright © レスポンシブWebデザイン</small></p>
</div>
</div>
</footer>
</body>
</html>
"UTF-8";
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; }
#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;
appearance: none;
box-sizing: border-box;
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;
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;
}
screen and (min-width: 768px) {
.content {
float: left;
width: 64%;
margin-right: 4%;
}
.submenu {
float: left;
width: 32%;
}
.search {
float: right;
margin-top: 20px;
}
.snsmenu {
float: left;
}
}
screen and (min-width: 1024px) {
.box {
width: 960px;
margin: 0 auto;
overflow: hidden;
}
}