#17 完成したレイアウトを拡張する

先程作ったサイトを拡張してみたいと思います。


サンプルサイトにアクセスして見てみましょう
サンプルサイト02
画像をダウンロードし、imgフォルダに入っている画像をimagesフォルダに移動しましょう。
画像をダウンロード

追記するときの考え方

  1. .header_contents内に.navという名前のナビゲーションを追加する
  2. .contents内に.lessonと.catchcopyという2つのコンテンツを追加する
  3. .footerに.footer_contentsというリンク集を追加

まずは答えを見ずに、上記の図を参考にindex.htmlに追記してみましょう。
答え

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>練習</title>
  <link href="css/style.css" rel="stylesheet">
</head>
<body>
  <div class="header">
  <div class="header_contents">
    <div class="logo">
      <img src="images/cbc_icon.svg">
      CRI BOOT CAMP
    </div>
    <!-- ナビゲーション追加 -->
    <div class="navi">
      <ul>
        <li><a href="/page1.html">ホーム</a></li>
        <li><a href="/page2.html">レッスン</a></li>
        <li><a href="/page3.html">入門</a></li>
        <li><a href="/page4.html">基礎</a></li>
        <li><a href="/page5.html">応用</a></li>
        <li><a href="/page6.html">実践</a></li>
      </ul>
    </div>
    <!-- /ナビゲーション追加 -->
  </div>
  </div>

  <div class="contents">
    <div class="visual">
      <h1 class="copy">
        楽しく習得。<br>
        もっと学習。
      </h1>
    </div>

    <div class="text_wrapper">
      <div class="text">
        html+cssを習得するには、実際に作りながら覚えるのが一番!
        英語でも文法を学ぶより、話すことが上達への近道なように。
      </div>
      <div class="menu">
        <ul>
          <li><a href="/page1.html">ホームページの作り方</a></li>
          <li><a href="/page2.html">htmlとcssをつかう</a></li>
          <li><a href="/page3.html">htmlで枠を作る</a></li>
          <li><a href="/page4.html">htmlの枠の使い方</a></li>
          <li><a href="/page5.html">cssでデザインする</a></li>
        </ul>
      </div>
    </div>
  </div>

  <!-- コンテンツ追加 -->
  <div class="lesson">
    <div class="lesson_item">
      <img src="images/01.jpg">
      <h2>HTML & CSS</h2>
      <p>I’m a customer care section. I’m a great place to write a long text about your company and your services, and, most importantly, how to contact your store with queries.</p>
    </div>
    <div class="lesson_item">
      <img src="images/02.jpg">
      <h2>JavaScript</h2>
      <p>I’m a customer care section. I’m a great place to write a long text about your company and your services, and, most importantly, how to contact your store with queries.</p>
    </div>
    <div class="lesson_item">
      <img src="images/03.jpg">
      <h2>PHP</h2>
      <p>I’m a customer care section. I’m a great place to write a long text about your company and your services, and, most importantly, how to contact your store with queries.</p>
    </div>
  </div>

  <div class="catchcopy">
    <div class="readcopy">Work</div>
    <div class="bodycopy">
I'm the second paragraph in your customer care section. Click here to add your own text and edit me. It’s easy. Just click “Edit Text” or double click me to add details about your policy and make changes to the font. I’m a great place for you to tell a story and let your users know a little more about you.</div>
  </div>
  <!-- /コンテンツ追加 -->

  <!-- リンク集追加 -->
  <div class="footer">
    <div class="footer_contents">
      <div class="footer_menu">
        <h3>会社案内</h3>
        <ul>
          <li><a href="">経営理念</a></li>
          <li><a href="">企業理念</a></li>
          <li><a href="">会社概要</a></li>
          <li><a href="">事業紹介</a></li>
        </ul>
      </div>
      <div class="footer_menu">
        <h3>トレーニング</h3>
        <ul>
          <li><a href="">HTML & CSS</a></li>
          <li><a href="">JavaScript</a></li>
          <li><a href="">jQuery</a></li>
          <li><a href="">PHP</a></li>
        </ul>
      </div>
      <div class="footer_menu">
        <h3>トレーニング</h3>
        <ul>
          <li><a href="">SCSS</a></li>
          <li><a href="">Git</a></li>
          <li><a href="">API</a></li>
          <li><a href="">Ajax</a></li>
        </ul>
      </div>
    </div>
    <div class="copyright">©cri</div>
  </div>
  <!-- /リンク集追加 -->

</body>
</html>


/* ブラウザ特有の余白などをリセットしたりする箇所 */
body{
  margin:0; /*ブラウザの初期設定の余白を削除*/
}
ul{
  list-style: none; /*リストタグの最初の中黒を削除*/
}
a{
  color:#666;
  text-decoration: none;
}
a:hover{ /*疑似クラス(セレクタ) 後日説明*/
  color:#00F;
}


.header{
  height:150px;
  margin-bottom:20px;
  background-color:#d9e021;
  display: flex;
  align-items: center;
}
.header_contents{
  margin:0 auto;
  width:980px;
  display: flex;
}
.logo{
  width:200px;
  color:#52b6ac;
  font-size:12px;
  display: flex;
  align-items: center;
}
.logo img{
  width:50px;
  margin-right:10px;
}

/*ナビゲーション*/
.navi{
  display: flex;
  margin-left:auto;
}
.navi ul{
  display: flex;
}
.navi li{
  margin-left:40px;
}

.contents{
  margin:0 auto;
  width:980px;
}
.visual{
  height:400px;
  background: url("../images/top_bg.jpg") no-repeat center center;
  display: flex;
  align-items: center;
}
.copy{
  color:#FFF;
  margin-left:100px;
  font:normal 32px/2em sans-serif;
}
.text_wrapper{
  margin:0 auto;
  height:200px;
  display:flex;
  justify-content: center;
}
.text{
  width:280px;
  height:160px;
  margin-top:20px;
  padding-right:15px;
  border-right:8px solid #000;
  font:normal 18px/2em sans-serif;
  display:flex;
  align-items: center;
}
.menu{
  width:300px;
  font:normal 18px/1.6em sans-serif;
  display:flex;
  align-items: center;
}

/* 追加コンテンツ */
.lesson{
  display:flex;
}
.lesson_item{
  width:80%;
  height:500px;
  margin-top:100px;
  padding:0 15px;
  text-align:center;
}
.lesson_item img{
  width:300px;
}
.catchcopy{
  width:980px;
  margin:80px auto 100px;
  display:flex;
}
.readcopy{
  color:#9941D8;
  font: bold 36px/1 sans-serif;
  text-align:right;
  flex:1; /* flexボックスプロパティ 後日説明 幅は1:3の割合で配置*/
}
.bodycopy{
  padding-left:20px;
  font: normal 1em/1.4 serif;
  flex:3; /* 幅は1:3の割合で配置 */
}

.footer{
  height:280px;
  margin-top:30px;
  background-color:#bec9c9;
}
.footer_contents{
  width:980px;
  margin:0 auto;
  display:flex;
  justify-content: space-around;
}

/*リンク集*/
.footer_menu{
  width:25%;
  padding-top:10px;
}
.footer_contents ul{
  padding:0;
  line-height:2;
}
.copyright{
  text-align:center;
  margin-top:30px;
}
powerd by