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

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

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

  
photo
 │
 ├─css
 │  └─ style.css
 │
 ├─img
 │  ├─favicon.ico
 │  ├─logo.svg
 │  ├─detail.jpg
 │  └─mainvisual.jpg
 │
 └─ index.html

photoという名前のフォルダの中に、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</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>

          <section id="index">
          </section>

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

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

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

CSS

      style.css
      
  @charset "UTF-8";

  html {
    font-size: 100%;
  }
  body {
    background-color: #f4f9ff;
    color: #333;
    font-size: 0.875rem;
  }
  img {
    max-width: 100%;
  }
  .container {
    max-width: 1000px;
    margin: 0 auto;
  }
  .inner {
    max-width: 600px;
    margin: 0 auto;
  }
  .section-title {
    font-size: 1.125rem;
    font-weight: bold;
    margin-bottom: 10px;
  }

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

.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"></a>
    </h1>
  </header>

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

CSS

      style.css
      
  /*-------------------------------------------
  ヘッダー
  -------------------------------------------*/
  #header {
    margin-top: 60px;
  }
  #header .site-title {
    width: 160px;
    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

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

  @media screen and (max-width: 1024px) {
    /*-------------------------------------------
    Mainvisual
    -------------------------------------------*/
    #mainvisual {
      padding: 0 10px;
    }
  }

#mainvisual: 「margin-bottom: 60px;」でメインビジュアルの下に余白を設定します。スマホの場合は「padding: 0 10px;」で両サイドの余白を設定します。

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

④：Indexのコーディング

Indexをコーディングしていきます。

HTML

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

sectionタグ: 全体をsectionタグで囲みます。
inner: コンテンツ部分をdivタグで囲み、中央に配置します。
タイトル: h2タグで囲みます。
目次: 順序性のあるリストのため、ol、liタグで記述します。

CSS

      style.css
      
  /*-------------------------------------------
  Index
  -------------------------------------------*/
  #index {
    background-color: #fff;
    padding: 30px 0;
    margin-bottom: 60px;
  }
  #index .index-list {
    margin-left: 20px;
  }
  #index .index-list li {
    margin-bottom: 20px;
  }
  #index .index-list li:last-child {
    margin-bottom: 0;
  }

#index .index-list: olタグはリストの先頭に番号がつくので、その分だけ「margin-left: 20px;」を設定して左に余白をとります。
#index .index-list li:last-child: 目次の最後の行だけ「margin-bottom: 0;」でテキストの下に余白が入らないようにします。

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

⑤：Detailのコーディング

Detailをコーディングしていきます。

HTML

      index.html
      
  <section id="detail">
    <div class="inner">
      <h2 class="section-title">DETAIL</h2>
      <div class="content">
        <img class="img" src="img/detail.jpg" alt="">
        <div class="text">
          <p class="title">タイトルタイトルタイトル</p>
          <dl>
            <dt>著者</dt>
            <dd>タイトルタイトルタイトル</dd>
            <dt>出版社</dt>
            <dd>タイトルタイトルタイトル</dd>
            <dt>発行年</dt>
            <dd>タイトルタイトルタイトル</dd>
          </dl>
          <p>
            テキストテキストテキストテキストテキストテキスト
            テキストテキストテキストテキストテキストテキスト
          </p>
          <a class="link" href="#" target="_blank" rel="noopener noreferrer">オンラインストアで見る</a>
        </div>
      </div>
    </div>
  </section>

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

CSS

      style.css
      
  /*-------------------------------------------
  Detail
  -------------------------------------------*/
  #detail {
    margin-bottom: 100px;
  }
  #detail .content {
    display: flex;
    align-items: flex-start;
  }
  #detail .content .title {
    font-size: 1.125rem;
    font-weight: bold;
  }
  #detail .content .img {
    width: 270px;
    margin-right: 60px;
  }
  #detail .content .text p {
    margin-bottom: 20px;
  }
  #detail .content dl {
    display: flex;
    flex-wrap: wrap;
    padding: 16px 0;
    margin-bottom: 25px;
    border-top: solid 1px #dedede;
    border-bottom: solid 1px #dedede;
  }
  #detail .content dt {
    width: 25%;
  }
  #detail .content dd {
    width: 75%;
  }
  #detail .content .link {
    color: #333;
  }
  #detail .content .link:hover {
    opacity: 0.8;
  }

  @media screen and (max-width: 1024px) {
    /*-------------------------------------------
    Detail
    -------------------------------------------*/
    #detail .content {
      flex-direction: column;
    }
    #detail .content .img {
      width: 100%;
      margin: 0 0 25px 0;
    }
  }

#detail .content: 「display: flex;」で画像とテキストを横並びに配置します。スマホの場合は、「flex-direction: column;」を設定して縦並びにします。
#detail .content .img: 画像はwidthで横幅を設定して広がりすぎないようにします。スマホの場合は、「width: 100%;」を設定して横幅いっぱいまで広がるようにします。
#detail .content dl: 書籍情報はdlタグに「display: flex;」を設定して、dtタグとddタグを横並びに配置します。また、「flex-wrap: wrap;」を設定して、dtタグとddタグが100%になったら横並びが折り返されるようにします。
#detail .content .link:hover: 「オンラインストアで見る」リンクのマウスオーバー時の動きを設定します。今回は「opacity: 0.8;」を設定して少しだけ透過させています。（※マウスオーバー時の動作については、仕様書内で特に指示がない場合は0.8や0.7の透過を設定しておくと良いでしょう。）

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

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

HTML

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

CSS

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