H10 C10

授業　演習問題 

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<div id="header">
<h1><span >Typograpy.</span>71</h1>
</div>

<div id="nav">
<ul>
<li><a href="#"><span >HOME</span></a></li>
<li><a href="#">BLOG</a></li>
<li><a href="#">PHOTOGRAPH</a></li>
<li><a href="#">GUEST BOOK</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>

<div id="content">
<div class="section" id="section1">
<h2>文字の役割</h2>
<p>
文字は、「言葉」を視覚的に伝える手段としての重要な役割を担っています。Webサイトにおいても、情報を発信する側の言葉は、文字という記号に置き換わりユーザーに届けられます。ですが、単なる論理的な情報としての文字をそこに置いただけでは、発信者の伝えたいメッセージの背景や意思を、十分に受け手に届けることは難しいでしょう。言葉がイントネーションで変化をつけるように、文字もその表現方法ひとつで伝わり方が大きく変化します。
</p>
</div>

<div class="section" id="section2">
<h2>タイポグラフィとは</h2>
<p>
タイポグラフィとは、一般に、活字を情報の目的や意図に合わせて適切に配置、構成することで、印刷物の文字の可読性や美しさを引き出すデザイン技法のことを指します。</p>
</div>

<div class="section" id="section3">
<h2>Webのタイポグラフィ</h2>
<p>
印刷業界が、技術のシフトに合わせてそれまでのタイポグラフィの根底は残したままその技法を成長させてきたように、Webというメディアにおいても、タイポグラフィの基本的な考え方は十分に適用することができます。</p>
</div>
</div>
<div id="footer">
<address><small>(c) 2013 Typography.71 All Rights Reserved.</small></address>
</div>
</div>
</body>
</html>

@charset "utf-8";
body,h1,h2,div,p,ul,li{
  margin: 0px;
  padding: 0px;
}
ul{
  list-style: none;
}
a{
  text-decoration: none;
}
/* 全体 */
body{
  color: #333;
  font-size: 14px;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo, 
    sans-serif;
  background: #d1cfba;
}
#container{
  width: 780px;
  background-image: url(img/body_bg.jpg);
}
#content{
  width: 780px;
  overflow: hidden;
  margin-bottom: 30px;
}
#footer{
  margin-left: 30px;
  clear: both;
}
/* 子孫 */
h1{
  padding: 30px 0 70px 30px;
  }
h1 span{
  color: #bdb76b;
  font-size: 24px;
}
#nav ul{
  padding: 0px 0 60px 30px;
}
#nav li{
  font-size: 60px;
  line-height: 0.8;

}
#nav span{
  color: #bdb76b;
}
#nav li a{
  color: #fff;
}
.section{
  width: 330px;
}
#section1{
  float: left;
  margin-left: 30px;
}
#section2, #section3{
  float: right;
  margin-right: 30px;
}