プロゲートのコンテンツの構造レッスンの解説とよくあるミス

2021年11月29日

こんにちは、ひつじのジョージです。

大都会でプログラマーとして10年以上活躍しています。普段は会社員として働いていますが、個人でシステム、Webアプリケーションを複数運用しています。

コンテンツの構造レッスンでは今までに学んだ知識を使ってコンテンツを作っていきます。

このレッスンでは最近で使用していなかった画像をしようするので、画像レッスンを復習しておくとスムーズに進みます。

また、以下のコードのように同じクラスを付与したdivタグの使い方と意味も理解しましょう。

<div class="contents-item">
　　　　...
</div>
<div class="contents-item">
　　　　...
</div>
<div class="contents-item">
　　　　...
</div>

マスターすること

同じクラスを付与したdivタグの使い方と意味の理解

1 コンテンツの構造レッスンの答え
2 同じクラスを付与したdivタグの使い方と意味
3 まとめ：同じクラスを付与したdivタグの使い方と意味も理解しよう

コンテンツの構造レッスンの答え

このレッスンの答えは以下のとおりです。

index.htmlに以下のように記述します。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Progate</title>
    <link rel="stylesheet" href="stylesheet.css">
  </head>
  <body>
    <div class="header">
      <div class="header-logo">Progate</div>
      <div class="header-list">
        <ul>
          <li>プログラミングとは</li>
          <li>学べるレッスン</li>
          <li>お問い合わせ</li>
        </ul>
      </div>
    </div>

    <div class="main">
      <div class="copy-container">
        <h1>HELLO WORLD<span>.</span></h1>
        <h2>プログラミングの世界へようこそ</h2>
      </div>
      
      <div class="contents">
        <!-- <h3>要素を追加してください -->
        <h3>学べるレッスン</h3>
        
        <!-- <div>要素を追加し、「contents-item」というclassをつけてください -->
        <div class="contents-item">
          <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/html.svg" >
          <p>HTML & CSS</p>
        </div>
        
        <!-- <div>要素を追加し、「contents-item」というclassをつけてください -->
        <div class="contents-item">
          <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/php.svg" >
          <p>PHP</p>
        </div>
        
        <!-- <div>要素を追加し、「contents-item」というclassをつけてください -->
        <div class="contents-item">
          <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/ruby.svg" >
          <p>Ruby</p>
        </div>
        
        <!-- <div>要素を追加し、「contents-item」というclassをつけてください -->
        <div class="contents-item">
          <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/swift.svg" >
          <p>Swift</p>
        </div>
        
      </div>
      
      <div class="contact-form">
        
      </div>
    </div>

    <div class="footer">
      <div class="footer-logo">Progate</div>
      <div class="footer-list">
        <ul>
          <li>会社概要</li>
          <li>採用</li>
          <li>お問い合わせ</li>
        </ul>
      </div>
    </div>
  </body>
</html>

同じクラスを付与したdivタグの使い方と意味

複数のdivタグに同じクラスを付与する意味は、同じ装飾をしたいからです。

以下のように3つのdivタグにcontents-itemクラスを付与したのなら、CSSでcontents-itemで定義した装飾は3つのdivタグに反映されます。

<div class="contents-item">
　　　　...
</div>
<div class="contents-item">
　　　　...
</div>
<div class="contents-item">
　　　　...
</div>

コアラ

まとめて同じ装飾ができるのは楽ちんだね

ひつじのジョージ

クラスは複数付与できるけど、idは1つのページに1つだけだよ

まとめ：同じクラスを付与したdivタグの使い方と意味も理解しよう

コンテンツの構造レッスンでは今までに学んだ知識を使ってコンテンツを作りました。