96's blog

WEBサイト制作科 6ヶ月コース

実践演習課題H10C10

HTML

<!DOCTYPE HTML>
<htmllang="ja">
<head>
<metacharset="utf-8">
<title>H10C10</title>
<linkrel="stylesheet"href="css/H10C10.css"media="all">
</head>
<body>
<divid="container">
<divid="header">
<h1>Typograpy.<span>71</span></h1>
<divid="nav">
<ul>
<li><ahref="#">HOME</a></li>
<li><ahref="#">BLOG</a></li>
<li><ahref="#">PHOTOGRAPH</a></li>
<li><ahref="#">GUESTBOOK</a></li>
<li><ahref="#">CONTACT</a></li>
</ul>
</div><!-- /nav -->
</div><!-- /header -->
<divid="content">
<divclass="section">
<h2>文字の役割</h2>
<p>文字は、「言葉」を視覚的に伝える手段としての重要な役割を担っています。Webサイトにおいても、情報を発信する側の言葉は、文字という記号に置き換わりユーザーに届けられます。ですが、単なる論理的な情報としての文字をそこに置いただけでは、発信者の伝えたいメッセージの背景や意思を、十分に受け手に届けることは難しいでしょう。言葉がイントネーションで変化をつけるように、文字もその表現方法ひとつで伝わり方が大きく変化します。</p>
</div>
<divclass="section">
<h2>タイポグラフィとは</h2>
<p>タイポグラフィとは、一般に、活字を情報の目的や意図に合わせて適切に配置、構成することで、印刷物の文字の可読性や美しさを引き出すデザイン技法のことを指します。</p>
<h2>Webのタイポグラフィ</h2>
<p>印刷業界が、技術のシフトに合わせてそれまでのタイポグラフィの根底は残したままその技法を成長させてきたように、Webというメディアにおいても、タイポグラフィの基本的な考え方は十分に適用することができます。</p>
</div>
</div>
<divid="footer">
<small>&copy;2013 Typography.71 All Rights Reserved.</small>
</div><!-- /footer -->
</div>
</body>
</html>

CSS

@charset "utf-8";
/* CSS Document */
/*リセット*/
body , div, h1, h2, p, ul, li{
  margin: 0;
  padding: 0;
}
ul {
  list-style: none;
}
a {
  text-decoration: none;
}
/*フォント*/
body {
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
  color: #333;
}

/*コンテンツ*/
#container{
  width: 760px;
  height: 880px;
  padding: 0px 0px 0px 60px;
  background: #D2D0B9 url(../img/10/body_bg.jpg) no-repeat left top;
  margin: 0 auto;
}
#header{
  height: 370px;
  padding-top: 20px;
}
h1 {
  color: #77734e;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 24px;
  font-weight:500;
  letter-spacing: -2px;
  margin-bottom: 60px;
}
h1 span{
  font-family: Georgia, "Times New Roman", Times, serif ;
  font-size: 40px;
  color: #333333;
}
#nav a {
  font-family: Arial, Helvetica, sans-serif;
  color: #ffffff;
  font-size: 60px;
  font-weight: 500;
  letter-spacing: -6px;
  line-height: 0.55em;
}
#nav a:hover {
  color:#77734e;
}
#content{
  padding-top: 40px;
  overflow:hidden;
}
.section{
  width: 330px;
  margin-right:50px;
  float:left;
}
h2 {
  font-family:
  "ヒラギノ明朝 Pro W3", "MS P明朝", serif;
  font-size: 18px;
  letter-spacing: 2px;
  margin-bottom: 20px;
}
.section p{
  font-size: 14px;
  line-height: 1.9em;
  margin-bottom: 40px;
}
#footer{
  clear:both;
}

f:id:webtm2013:20130819130108p:image