<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>H10 C10</title>
<link rel="stylesheet" href="css/style_c10.css">
</head>
<body>
<div id="container">
<div id="header">
<h1 id="name">Typograpy.<span class="num">71</span></h1>
<div id="nav">
<ul>
<li id="home"><a href="#">HOME</a></li>
<li id="blog"><a href="#">BLOG</a></li>
<li id="photo"><a href="#">PHOTOGRAPH</a></li>
<li id="guest"><a href="#">GUESTBOOK</a></li>
<li id="contact"><a href="#">CONTACT</a></li>
</ul>
</div> <!--/#nav-->
</div> <!--/#header-->
<div id="content">
<div id="wrapper">
<h2>文字の役割</h2>
<p>文字は、「言葉」を視覚的に伝える手段としての重要な役割を担っています。Webサイトにおいても、情報を発信する側の言葉は、文字という記号に置き換わりユーザーに届けられます。ですが、単なる論理的な情報としての文字をそこに置いただけでは、発信者の伝えたいメッセージの背景や意思を、十分に受け手に届けることは難しいでしょう。言葉がイントネーションで変化をつけるように、文字もその表現方法ひとつで伝わり方が大きく変化します。</p>
</div>
<div id="wrapper">
<h2>タイポグラフィとは</h2>
<p>タイポグラフィとは、一般に、活字を情報の目的や意図に合わせて適切に配置、構成することで、印刷物の文字の可読性や美しさを引き出すデザイン技法のことを指します。</p>
</div>
<div id="wrapper">
<h2>Webのタイポグラフィ</h2>
<p>印刷業界が、技術のシフトに合わせてそれまでのタイポグラフィの根底は残したままその技法を成長させてきたように、Webというメディアにおいても、タイポグラフィの基本的な考え方は十分に適用することができます。</p>
</div>
</div> <!--/#content-->
<div id="footer">
<p><small>© 2013 Typography.71 All Rights Reserved.</small></p>
</div> <!--/#footer-->
</div> <!--/#container-->
</body>
</html>
@charset "UTF-8";
/* CSS Document */
/*reset*/
body, h1, h2, p, ul, li, div {
margin: 0;
padding: 0;
}
body {
font-family:
"Hiragino Kaku Gothic ProN",
Meiryo,
Sans-serif;
}
#container {
width: 780px;
height: 800px;
margin: 20px auto;
background: url(../img/body_bg.jpg) no-repeat;
}
#header {
width: 780px;
height: 400px;
}
h1#name {
font-size: 20px;
padding: 40px;
font-weight: middle;
color: #999955;
}
h1#name span.num {
font-size: 35px;
font-family: Georgia, "Times New Roman", Times, serif;
color: #555555;
font-weight: 200;
}
#nav {
width: 600px;
padding: 30px 0 0 60px;
}
#nav li {
list-style: none;
}
#nav a {
text-decoration: none;
font-size: 55px;
line-height: 0.6;
letter-spacing: -0.1em;
color: #FFFFFF;
}
#content {
font-family:
"ＭＳ Ｐ明朝",
"MS PMincho",
"ヒラギノ明朝 Pro W3",
"Hiragino Mincho Pro",
Sans-serif;
color: #333333;
font-size: 15px;
}
h2 {
font-size: 18px;
margin-bottom: 10px;
font-weight: middle;
}
#wrapper {
width: 330px;
float: left;
margin: 10px 0 20px 40px;
}
#footer {
width: 780px;
clear: both;
padding: 10px 0 0 40px;
color: #333333;
}
/*action*/
#nav li#home a:hover {
color: #909000;
}
#nav li#blog a:hover {
color: #909000;
}
#nav li#photo a:hover {
color: #909000;
}
#nav li#guest a:hover {
color: #909000;
}
#nav li#contact a:hover {
color: #909000;
}
