【ソースコード】入門編：フォトサイト2／1カラム

目次

※コードの解説はこちらを参照

ディレクトリ構成

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

HTML（index.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">
        <h1 class="site-title">
          <a href="index.html"><img src="img/logo.svg" alt="PHOTO BOOK 2"></a>
        </h1>
      </header>

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

        <div class="inner">
          <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>

          <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>

          <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>
        </div>
      </main>

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

CSS（style.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;
}

/*-------------------------------------------
ヘッダー
-------------------------------------------*/
#header {
  margin-top: 60px;
}
/*
h1タグ
line-height にh1タグの高さよりも小さい値「1px」を指定することで、
h1タグの上下の余白が消えるため、ロゴ画像の高さと揃う
「line-height: 0;」を指定してもOKです
*/
#header .site-title {
  width: 180px;
  line-height: 1px;
  margin-bottom: 15px;
}
/* aタグのリンク範囲を親要素のサイズに広げる */
#header .site-title a {
  display: block;
}

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

/*-------------------------------------------
Index
-------------------------------------------*/
#index {
  background-color: #f5f5f5;
  padding: 60px;
  margin-bottom: 60px;
}
#index .index-inner {
  border: solid 1px #333;
  padding: 30px;
}
/*
「display: table;」と「margin: 0 auto;」で中央に配置。
※この方法を使うとテキストの長さに応じて可変で中央配置できる
*/
#index .index-inner .index-list {
  display: table;
  margin: 0 auto;
}
#index .index-inner .index-list li {
  margin-bottom: 20px;
}
/*
最後のliタグには margin-bottom を設定しない
*/
#index .index-inner .index-list li:last-child {
  margin-bottom: 0;
}

/*-------------------------------------------
Image
-------------------------------------------*/
/*
flex-wrap: wrap;
→改行あり
justify-content: space-between;
→両端揃えで均等に配置
*/
.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;
}

/*-------------------------------------------
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;
}

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

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

  /*-------------------------------------------
  ヘッダー
  -------------------------------------------*/
  #header {
    padding: 0 10px;
  }

  /*-------------------------------------------
  Index
  -------------------------------------------*/
  #index {
    padding: 40px 20px;
  }

  /*-------------------------------------------
  Image
  -------------------------------------------*/
  /*
  画像を縦に並べる
  */
  .list {
    flex-direction: column;
  }
  .list li {
    width: 100%;
    text-align: center;
  }

  /*-------------------------------------------
  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;
  }
}