【HTML/CSS コーディング解説】入門：フォトサイト2（後編）

1. ディレクトリを用意しよう

今回作るサイトのディレクト構成は下記の通りです。

  
photo2
 ├─img
 │  ├─favicon.ico
 │  ├─logo.svg
 │  ├─mainvisual.jpg
 │  ├─photo1.jpg
 │  ├─photo2.jpg
 │  ├─photo3.jpg
 │  └─photo4.jpg
 │
 ├─css
 │  └─style.css
 │
 └─index.html

photo2という名前のフォルダの中に、index.html、cssフォルダ、imgフォルダを作ります。

画像については、下記から練習用の画像をダウンロードできます。

ダウンロードはこちら

準備ができたら、コーディングに入っていきましょう！

2. コーディングをしよう

それでは、さっそくコーディングに入っていきしょう。

コーディングは下記の手順ですすめていきます。

全体のコーディング
1. HTMLをコーディング
2. CSSをコーディング
各パーツのコーディング（header、メインビジュアル、Index、画像一覧、Detail、footer）
1. HTMLをコーディング
2. CSSをコーディング（レスポンシブも調整）

①：全体のコーディング

まずは全体のコーディングです。
全体の枠組みとhead部分のコーディングを行なっていきます。

HTML

      index.html
      
  <!DOCTYPE html>
  <html lang="ja">
    <head>
      <meta charset="utf-8">
      <title>PHOTO BOOK 2</title>
      <meta name="description" content="テキストテキストテキストテキストテキストテキストテキストテキスト">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="icon" href="img/favicon.ico">
      <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
      <link rel="stylesheet" href="css/style.css">
    </head>

    <body>
      <div class="container">
        <header id="header">
        </header>

        <main>
          <div id="mainvisual">
          </div>

          <div class="inner">
            <section id="index">
            </section>

            <ul class="list">
            </ul>

            <section id="detail">
            </section>
          </div>
        </main>

        <footer id="footer">
        </footer>
      </div>
    </body>
  </html>

metaタグ: title、descriptionは基本必須で設定します。
リセットCSS: 本サイトでは、「ress.min.css」を使用しています。
リセットCSSは色々なものがあるので、自分が使いやすいものを選んだり、案件によって使い分けたりしてください。
containerクラス: コンテンツ全体の最大幅を設定して中央に配置するためのクラスです。
※containerというクラス名は任意ですが、「container」や「wrapper」などのクラス名がよく使われます。
innerクラス: main内のメインビジュアル下コンテンツ全体の横幅を設定して中央に配置するためのクラスです。※クラス名は任意です。

CSS

      style.css
      
  @charset "UTF-8";

  html {
    font-size: 100%;
  }
  body {
    color: #333;
    font-size: 0.875rem;
  }
  img {
    max-width: 100%;
  }
  ul {
    list-style: none;
  }
  .container {
    max-width: 1000px;
    margin: 0 auto;
  }
  .inner {
    max-width: 800px;
    margin: 0 auto;
  }
  .section-title {
    font-size: 1.125rem;
    font-weight: bold;
    margin-bottom: 30px;
    text-align: center;
  }

  /*-------------------------------------------
  SP
  -------------------------------------------*/
  @media screen and (max-width: 1024px) {
    .inner {
      padding: 0 20px;
    }
  }

.container: サイト全体のコンテンツ幅を設定して、「margin: 0 auto」で中央に配置します。
.inner: メインビジュアル下のコンテンツ部分の最大幅を設定するためのクラスです。同じくコンテンツ幅を設定して、「margin: 0 auto」で中央に配置します。
.section-title: 各セクションの見出し用のクラスです。各セクションの見出しは同じデザインなので、このクラスを共通で使用します。
@media screen and (max-width: 1024px): ブレイクポイントを設定します。コーディング仕様に従い、PCとスマホのレイアウトを1024pxで切り替えます。（1024px以下がスマホで1025px以上がPCになります。）

全体のコーディングができたら、次は各パーツのコーディングにはいっていきましょう！

②：ヘッダーのコーディング

ヘッダーをコーディングしていきます。

HTML

      index.html
      
  <header id="header">
    <h1 class="site-title">
      <a href="index.html"><img src="img/logo.svg" alt="PHOTO BOOK 2"></a>
    </h1>
  </header>

headerタグ: ヘッダー全体をheaderタグで囲みます。
ロゴ: ロゴ全体をh1タグで囲みます。さらにロゴ画像をaタグで囲み、トップページへのリンクを張ります。

CSS

      style.css
      
  /*-------------------------------------------
  ヘッダー
  -------------------------------------------*/
  #header {
    margin-top: 60px;
  }
  #header .site-title {
    width: 180px;
    line-height: 1px;
    margin-bottom: 15px;
  }
  #header .site-title a {
    display: block;
  }

  @media screen and (max-width: 1024px) {
    #header {
      padding: 0 10px;
    }
  }

#header: 「margin-top: 60px;」でヘッダー上部に余白をとります。スマホの場合は、「padding: 0 10px;」で両サイドの余白を設定します。
#header .site-title: h1タグ用のクラスです。line-heightにh1タグがもともと持つ高さよりも小さい値「1px」を指定することで、h1タグの上下の余白を消してロゴ画像の高さと揃うようにします。
#header .site-title a: 「display: block;」を設定して、aタグのリンク範囲を親要素のサイズいっぱいに広げます。

ヘッダーのコーディングは以上になります。

次はメインビジュアルをコーディングしていきます。

③：メインビジュアルのコーディング

メインビジュアルをコーディングしていきます。

HTML

      index.html
      
  <div id="mainvisual">
    <img src="img/mainvisual.jpg" alt="テキストテキストテキスト">
  </div>

メインビジュアルは、画像をdivタグで囲むだけです。

続いてCSSをコーディングしていきましょう。

CSS

      style.css
      
  /*-------------------------------------------
  Mainvisual
  -------------------------------------------*/
  #mainvisual {
    margin-bottom: 60px;
  }

#mainvisual: 「margin-bottom: 60px;」でメインビジュアルの下に余白を設定します。

メインビジュアルは以上になります。

続いて、Indexセクションです。

④：Indexセクションのコーディング

Indexセクションをコーディングしていきます。

HTML

      index.html
      
  <section id="index">
    <h2 class="section-title">INDEX</h2>
    <div class="index-inner">
      <ol class="index-list">
        <li>タイトルタイトルタイトルタイトルタイトルタイトルタイトル</li>
        <li>タイトルタイトルタイトルタイトルタイトルタイトルタイトル</li>
        <li>タイトルタイトルタイトルタイトルタイトルタイトルタイトル</li>
        <li>タイトルタイトルタイトルタイトルタイトルタイトルタイトル</li>
        <li>タイトルタイトルタイトルタイトルタイトルタイトルタイトル</li>
      </ol>
    </div>
  </section>

sectionタグ: 全体をsectionタグで囲みます。
タイトル: h2タグで囲みます。
index-inner: 目次エリアを枠線で囲むためのdivタグです。
目次: 順序性のあるリストなので、ol、liタグで記述します。

CSS

      style.css
      
  /*-------------------------------------------
  Index
  -------------------------------------------*/
  #index {
    background-color: #f5f5f5;
    padding: 60px;
    margin-bottom: 60px;
  }
  #index .index-inner {
    border: solid 1px #333;
    padding: 30px;
  }
  #index .index-inner .index-list {
    display: table;
    margin: 0 auto;
  }
  #index .index-inner .index-list li {
    margin-bottom: 20px;
  }
  #index .index-inner .index-list li:last-child {
    margin-bottom: 0;
  }

  /*-------------------------------------------
  SP
  -------------------------------------------*/
  @media screen and (max-width: 1024px) {
    /*-------------------------------------------
    Index
    -------------------------------------------*/
    #index {
      padding: 40px 20px;
    }
  }

#index: 目次エリア全体を囲むクラスです。「background-color: #f5f5f5;」で背景を、paddingで内側の余白を設定します。
#index .index-inner: 目次エリアの内側に枠線を引くためのクラスです。「border: solid 1px #333;」で枠線を引き、「padding: 30px;」で内側に余白を設定します。
#index .index-inner .index-list: 目次は、「display: table;」と「margin: 0 auto;」で中央に配置します。（※「display: table;」と「margin: 0 auto;」を組み合わせることで、横幅が設定されていない場合でもコンテンツを中央に配置できます。
#index .index-inner .index-list li:last-child: 目次の最後の行は下に余白が入らないよう、「margin-bottom: 0;」を設定します。

Indexセクションのコーディングは以上になります。

次は、画像一覧エリアです。

⑤：画像一覧のコーディング

画像一覧をコーディングしていきます。

HTML

      index.html
      
  <ul class="list">
    <li><img src="img/photo1.jpg" alt=""></li>
    <li><img src="img/photo2.jpg" alt=""></li>
    <li><img src="img/photo3.jpg" alt=""></li>
    <li><img src="img/photo4.jpg" alt=""></li>
  </ul>

画像一覧は、ul、liタグで記述していきます。

CSS

      style.css
      
  /*-------------------------------------------
  Image
  -------------------------------------------*/
  .list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 45px;
  }
  .list li {
    width: 49%;
    margin-bottom: 15px;
  }
  .list li img {
    vertical-align: bottom;
  }

  /*-------------------------------------------
  SP
  -------------------------------------------*/
  @media screen and (max-width: 1024px) {
    /*-------------------------------------------
    Image
    -------------------------------------------*/
    .list {
      flex-direction: column;
    }
    .list li {
      width: 100%;
      text-align: center;
    }
  }

.list: 画像用のリストです。「display: flex;」で横並びに配置し、「flex-wrap: wrap;」で横幅いっぱいまできた時に折り返されるようにします。「justify-content: space-between;」で左右の画像が両端に揃うようにします。スマホの場合は、「flex-direction: column;」で画像を縦に並べます。
.list li: 「width: 49%;」で各画像の横幅を設定します。49%にすることで左右の画像の間に2%の余白ができるようにしています。（※2%の数値はデザインを確認しながら調整します。）スマホの場合は、「width: 100%;」で画像が横幅いっぱいまで広がるようにします。「text-align: center;」を設定しているのは、画面幅を狭めてスマホレイアウトに切り替わった際に、画像が左に寄らないようにするためです。
.list li img: 「vertical-align: bottom;」を設定して画像の下にできる隙間を消します。

画像一覧のコーディングは以上になります。

次は、Detailセクションです。

⑥：Detailセクションのコーディング

Detailセクションをコーディングしていきます。

HTML

      index.html
      
  <section id="detail">
    <h2 class="section-title">DETAIL</h2>
    <div class="flex">
      <dl>
        <dt>著者：</dt>
        <dd>タイトルタイトルタイトル</dd>
        <dt>出版社：</dt>
        <dd>タイトルタイトルタイトル</dd>
        <dt>発行年：</dt>
        <dd>2021年1月1日</dd>
      </dl>
      <div class="text">
        <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
        <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
        <a class="link" href="#">オンラインストアで見る</a>
      </div>
    </div>
  </section>

sectionタグ: 全体をsectionタグで囲みます。
タイトル: h2タグで囲みます。
flex: コンテンツ部分をdivタグで囲み、Flexobxで横並びに配置します。
書籍情報: 項目と内容が対になっているので、dl、dt、ddタグを使って記述します。

CSS

      style.css
      
  /*-------------------------------------------
  Detail
  -------------------------------------------*/
  #detail {
    background-color: #f5f5f5;
    padding: 60px;
    margin-bottom: 60px;
  }
  #detail .flex {
    display: flex;
  }
  #detail dl {
    width: 35%;
    border-right: solid 1px #333;
    padding-right: 40px;
  }
  #detail dt {
    font-weight: bold;
  }
  #detail dd {
    margin-bottom: 10px;
  }
  #detail dd:last-child {
    margin-bottom: 0;
  }
  #detail .text {
    width: 65%;
    padding-left: 40px;
  }
  #detail .text p {
    margin-bottom: 20px;
  }
  #detail .text .link {
    color: #333;
  }
  #detail .text .link:hover {
    opacity: 0.8;
  }

  @media screen and (max-width: 1024px) {
    /*-------------------------------------------
    Detail
    -------------------------------------------*/
    #detail {
      padding: 40px 20px;
    }
    #detail .flex {
      flex-direction: column;
    }
    #detail dl {
      width: 100%;
      border-right: none;
      border-bottom: solid 1px #333;
      padding: 0 0 40px 0;
    }
    #detail .text {
      width: 100%;
      padding: 40px 0 0 0;
    }
  }

#detail .flex: 「display: flex;」で書籍情報とテキストエリアを横並びに配置します。
#detail dl: 書籍情報エリアの横幅を35%に設定します。（※レスポンシブに対応するため、pxではなく%で設定します。35%の数値はデザインを確認しながら同じサイズ感になるよう調整します。）スマホは横幅を100%の全幅に設定します。「border-right: none;」で右のラインを消して、「border-bottom: solid 1px #333;」で下に線を設定します。
#detail .text: 右側テキストエリアの横幅を65%に設定します。スマホは横幅を100%の全幅に設定します。

以上でDetailセクションのコーディングは終了です。

次は、いよいよ最後のフッターのコーディングになります。

フッターをコーディングしていきます。

HTML

      index.html
      
  <footer id="footer">
    <p class="inner">&copy; 2021 PHOTO BOOK 2</p>
  </footer>

CSS

      style.css
      
  /*-------------------------------------------
  footer
  -------------------------------------------*/
  #footer {
    font-size: 0.625rem;
    padding: 15px 0;
    text-align: center;
  }