2013-07-18

H12/C12

課題

課題の回答です。

HTML

<body>
  <div id="container">
    <div id="page">
      <header>
        <h1><span class="hide_text">サンプルスタイルシートカンパニー</span></h1>
        <nav id="header_innner">
          <ul>
            <li><a href="#" id="top"><span>トップページ</span></a></li>
            <li><a href="#" id="solution"><span>ソリューション</span></a></li>
            <li><a href="#" id="achevement"><span>実績紹介</span></a></li>
            <li><a href="#" id="partner"><span>パートナー</span></a></li>
            <li><a href="#" id="customer"><span>カスタマー</span></a></li>
            <li><a href="#" id="company"> <span>会社概要</span></a></li>
            <li><a href="#" id="contact"><span>お問い合わせ</span></a></li>
          </ul>
        </nav><!--  /#header_innner -->
      </header>
      <div id="page_wrapper">
        <div class="main_image">
          <h2><span>あなたにとっての最高のパートナーであるために</span></h2>
        </div><!--  /#main_image -->
        <div id="content_wrapper">
            <article id="about">
              <div class="base"><h3><span>弊社について</span></h3></div>
              <div id="about_body">
                <section>
                  <h4><span>スタイルシートによるレイアウトで、表現力と機能性が共存したサイトを構築。</span></h4>
                  <p class="text">サンプルスタイルシートカンパニーでは、ウェブサイトの構築にスタイルシートによるレイアウトを採用しています。そのため、視覚的に美しい表現力だけでなく、ユーザーにとって使いやすい機能性とを合わせ持ったウェブサイトを提供することができます。</p>
                  <p class="link"><a href="#">ソリューションへ</a></p>
                </section>
                 <section>
                  <h4><span>ウェブサイトを成功に導く、構造設計とインターフェース構築を武器に。</span></h4>
                  <p class="text">100件あまりのウェブサイト構築経験から培った企画・開発力をバックボーンにもつ、サンプルスタイルシートカンパニー。競争に勝ち抜くための構造設計と、インターフェース構築を武器に、お客様のウェブサイトを成功に導くお手伝いをします。</p>
                  <p class="link"><a href="#">実績紹介へ</a></p>
                </section>
              </div><!-- /#about_body  -->
            </article>
            <div id="news">
              <section>
                <div class="base"><h3><span>ニュースリリース</span></h3></div>
                <div id="news_body">
                  <dl>
                    <dt>2013年7月1日</dt>
                    <dd>サンプルスタイルシートカンパニーのウェブサイトがリニューアルしました。</dd>
                    <dt>2013年7月1日</dt>
                    <dd>サンプルスタイルシートカンパニーのウェブサイトがリニューアルしました。</dd>
                    <dt>2013年7月1日</dt>
                    <dd>サンプルスタイルシートカンパニーのウェブサイトがリニューアルしました。</dd>
                    <dt>2013年7月1日</dt>
                    <dd>サンプルスタイルシートカンパニーのウェブサイトがリニューアルしました。</dd>
                    <dt>2013年7月1日</dt>
                    <dd>サンプルスタイルシートカンパニーのウェブサイトがリニューアルしました。</dd>
                  </dl>
                </div>
              </section>
            </div><!--  /#news -->
        </div><!--  /#content_wrapper -->
      </div><!--  /#page_wrapper -->
      <footer><p><small>Copyright &copy; Sample Stylesheet Company All Rights Reserved.</small></p></footer>
    </div><!--  /#page -->
  </div><!--  /#container -->
</body>

CSS

/*reset*/
body,div,p,h1,h2,h3,h4,ul,li,header,article,section,footer,small,a,nav,dl,dt,dd{
  margin:0;
  padding: 0;
}
ul{
  list-style: none;
}

body{
  font-family:"Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  font-size:12px;
  line-height:1.6em;
  letter-spacing:1px;
}
#container{
  width: 770px;
  margin: 0 auto;
  padding-top:10px;
  background:url(../img/body_bg.gif) repeat-x;
  background-color: #F4F4F4;
}
#page{
  width:740px;
  margin-right:30px;
}
header h1{
  height:38px;
  margin-bottom:25px;
  background:url(../img/logo.gif) no-repeat;
}
header .hide_text{
  visibility:hidden;
}
nav ul{
  background:url(../img/global_nav_bg.gif) repeat-x;
  overflow:hidden;
}
nav ul li{
  float:left;
}
nav li a{
  display:block;
  width:94px;
  height:33px;
  background:url(../img/global_nav.gif)
}
nav li a#top{
  background-position:0 0;
}
nav li a#solution{
  background-position:-94px 0;
}
nav li a#achevment{
  background-position:-188px 0;
}
nav li a#partner{
  background-position:-282px 0;
}
nav li a#customer{
  background-position:-376px 0;
}
nav li a#company{
  background-position:-470px 0;
}
nav li a#contact{
  background-position:-564px 0;
}
nav ul li a span{
  visibility:hidden;
}
#page_wrapper h2{
  width:740px;
  height:272px;
  background:url(../img/main_copy.jpg) no-repeat;
}
#page_wrapper h2 span{
  visibility:hidden;
}
#content_wrapper{
  overflow:hidden;
}
#content_wrapper h3 span{
  visibility:hidden;
}
#content_wrapper #about{
  width:498px;
  float:left;
  border-top: 1px solid #E5E5E5;
}
#about .base{
  height:42px;
  background:url(../img/title_bg.gif) repeat-x;
}
#about h3{
  width:107px;
  height: 42px;
  background:url(../img/title_about.gif) no-repeat;
}
#about_body{
  padding:20px 20px;
}
#about_body section{
  margin-bottom:20px;
  padding-bottom: 15px;
  border-bottom: 2px solid #E5E5E5;
}
#about_body section h4{
  width:292px;
  height:38px;
  margin-bottom:15px;
}
#about_body section h4 span{
  visibility:hidden;
}
#about_body section:first-child h4{
  background:url(../img/section_01.gif) no-repeat;
}
#about_body section:nth-child(2) h4{
  background:url(../img/section_01.gif) no-repeat;
}
#about_body .text{
  margin-bottom:10px;
}
#about_body .link{
  padding-left:15px;
  background:url(../img/arrow.gif) no-repeat 0 center;
}
#content_wrapper #news{
  width:240px;
  float:right;
  border-top: 1px solid #E5E5E5;
  border-right: 1px solid #E5E5E5;
  border-left: 1px solid #E5E5E5;
}
#news .base{
  height:42px;
  background:url(../img/title_bg.gif) repeat-x;
}
#news h3{
  width:119px;
  height: 42px;
  background:url(../img/title_news.gif) no-repeat;
}
#news_body{
  padding: 20px 20px;
}
#news_body dt{
  color: #7D848A;
  font-weight:bold;
}
#news_body dd{
  margin-bottom:12px;
}
footer{
  background: #333333;
}
footer p{
  width:319px;
  height: 33px;
  background:url(../img/copyright.gif) no-repeat;
}
footer p small{
  visibility:hidden;
}

2013-07-18

H13/C13

課題

課題の回答です。
positionを使った無理やりなレイアウトになってしまった…
良い組み方が思いつかなかったです。。

HTML

<body>
  <div id="container">
    <div id="left">
      <h1><span>Patisserie camellia</span></h1>
      <nav>
        <ul>
          <li><a href="#" id="info"><span>Information</span></a></li>
          <li><a href="#" id="menu"><span>Menu</span></a></li>
          <li><a href="#" id="access"><span>Access</span></a></li>
          <li><a href="#" id="mail"><span>Mail</span></a></li>
        </ul>
      </nav>
    </div>
    <div id="images">
        <div class="img1"><img src="img/photo03.jpg" height="160" width="160" alt="ワッフル"></div>
        <div class="img2"><img src="img/photo05.jpg" height="80" width="80" alt="ロウソク"></div>
        <div class="img3"><img src="img/photo07.jpg" height="80" width="80" alt="イチゴスムージー"></div>
        <div class="img4"><img src="img/campaign.gif" height="100" width="170" alt="キャンペーン"></div>
        <div class="img5"><img src="img/photo01.jpg" height="160" width="160" alt="プリン"></div>
        <div class="img6"><img src="img/photo04.jpg" height="80" width="80" alt="コーヒー"></div class="img1">
        <div class="img7"><img src="img/photo06.jpg" height="80" width="80" alt="ラズベリー"></div class="img1">
        <div class="img8"><img src="img/photo02.jpg" height="160" width="160" alt="ケーキ"></div class="img1">
        <div class="img9"><img src="img/photo08.jpg" height="80" width="80" alt="プリン"></div class="img1">
        <div class="img10"><img src="img/photo09.jpg" height="80" width="80" alt=""></div class="img1">
        <div class="img11"><img src="img/photo10.jpg" height="80" width="80" alt="エスプレッソ"></div class="img1">
      </div>
    </div>
  </div>
</body>

CSS

body,h1,nav,ul,li,div,img,span{
  margin: 0;
  padding: 0;
}
ul{
  list-style: none;
}
a{
  text-decoration: none;
}
img{
  vertical-align: bottom;
}
body{
  background: #5F3D18;
}
#container{
  width: 880px;
  height: 410px;
  margin: 150px auto 0 auto;
  background: url(../img/shadow.gif) repeat-X left bottom;
  background-color: white;
  position: relative;
}
h1{
  width: 267px;
  height: 129px;
  background: url(../img/logo.gif) no-repeat;
  position: absolute;
  top: 230px;
  left: 30px;
}
h1 span{
  visibility: hidden;
}
nav{
  position: absolute;
  top: 30px;
  left: 30px;
}
nav ul li a span{
  visibility: hidden;
}
nav ul li a{
  display: block;
  width: 94px;
  height: 25px;
}
#info{
  background: url(../img/m_info.gif) no-repeat;
}
#menu{
  background: url(../img/m_menu.gif) no-repeat;
}
#access{
  background: url(../img/access.gif) no-repeat;
}
#mail{
  background: url(../img/m_mail.gif) no-repeat;
}
#images div{
  position: absolute;
}
.img1{
  top: 0;
  left: 400px;
}
.img2{
  top: 0;
  left: 560px;
}
.img3{
  top: 80px;
  left: 640px;
}
.img4{
  top: -23px;
  left: 725px;
}
.img5{
  top: 80px;
  left: 720px;
}
.img6{
  top: 160px;
  left: 400px;
}
.img7{
  top: 160px;
  left: 560px;
}
.img8{
  top: 240px;
  left: 480px;
}
.img9{
  top: 240px;
  left: 640px;
}
.img10{
  top: 320px;
  left: 720px;
}
.img11{
  top: 240px;
  left: 800px;
}