Webデザインスキル強化計画　【演習課題10 】

* 演習課題-10 *

f:id:ooigawa-bitter-sweet:20131012025523g:plain

《html》

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>課題-10</title>
<link rel="stylesheet" href="kadai-10.css" madia="all">
</head>

<body>

<div id="header">
                 <h1>Typograpy.71</h1>
          </div>

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


           <div id="content-left">

<h2>文字の役割</h2>

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

</div>

<div id="content-right">

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

<div id="content-b">
                       <h2>Webのタイポグラフィ</h2>
                       <p>印刷業界が、技術のシフトに合わせてそれまでのタイポグラフィの根底は残したままその技法を成長させてきたように、Webというメディアにおいても、タイポグラフィの基本的な考え方は十分に適用することができます。</p>
                  </div>

</div>

<div id="footer">
                    <address> c 2013 Typography.71 All Rights Reserved. </address
           </div>

</div>

</body>
</html>

《css》

@charset "utf-8";
/* CSS Document */

/* css reset */

/* ///// IE6対策です　　//// */

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}

table {
         border-collapse:collapse;
         border-spacing:0;
       }
fieldset,img {
border:0;
               }
address,caption,cite,code,dfn,em,strong,th,var {
font-style:normal;
font-weight:normal;
              }
ol,ul {
        list-style:none;
      }

caption,th {
text-align:left;
             }
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
            }
q:before,q:after {
content:'';
               }
abbr,acronym {
          border:0;
          }
body {
     font-family:"メイリオ","ＭＳＰゴシック", Tahoma, Arial, sans-serif;
     line-height: 1.7;
     color: #333;
     font-size: 14px;
     text-align: left;
     }

#container{
            width:780px;
            height:800px;
            background-image:url(images-10/body_bg.jpg);
            margin:0 auto;
       }

h1{
     color:#363;
     font-weight:bold;
     font-size:20px;
     padding-top:50px;
     padding-left:40px;
     padding-bottom:50px;
}

#nav{
     width:780px;
     height:250px;
     margin-bottom:70px;
}

ul{
   padding-left:40px;
}

li{
font-size:60px;
width:740px;
height:45px;
}

a{
text-decoration:none;
color:#FFF;
}

a:hover{
color: #333333;
}

#content-left{
                width:330px;
                height:300px;
                float:left;
                margin-left:40px;
      }

#content-right{
              width:330px;
              height:300px;
              float:right;
              margin-right:40px;
         }

#content-b{
margin-top:30px;
}

h2{
   font-size:20px;
   font-weight:bold;
   padding-bottom:15px;
}

p{
font-size:12px;
font-weight:bold;
}

#footer{
         clear:both;
       }

address{
       font-weight:bold;
       margin-left:40px;
   }