トップ > ★code-step（引用） > 初級編：ストアサイト（書店）／1カラム

初級編：ストアサイト（書店）／1カラム

★code-step（引用）

ストアサイト（書店）：1カラム

code-step.com

Mag88

A special, long article in a newspaper or magazine
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキスト

Archive
テキストテキストテキストテキスト
テキストテキストテキスト

New
テキストテキストテキストテキスト
テキストテキストテキスト

Fashion & Style
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキスト

Read More

Catalog
テキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキスト

Antique
テキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキスト

Read More

Mag88
タイトル

・テキストテキストテキスト
・テキストテキストテキスト
・テキストテキストテキスト
・テキストテキストテキスト
・テキストテキストテキスト
・タイトルタイトルタイトル

テキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキスト

© Mag88

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>【コーディング練習】ストアサイト（書店）/ 1カラム</title>
<meta name="viewport" content="width=device-width">
<link rel="shortcut icon" href="img/favicon.ico">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- .header -->
<header class="header">
  <h1 class="site-title"><img src="img/logo.svg" alt="Mag88"></h1>
</header>
<!-- /.header -->

<!-- .main-content -->
<main class="main-content">
  <section class="magazine wrapper">
    <h2 class="section-title">A special, long article in a newspaper or magazine</h2>
    <p>
      テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト<br>
      テキストテキストテキストテキストテキストテキストテキストテキスト
    </p>
    <div class="flex-item">
      <a class="item" href="#">
        <img src="img/magazine-archive.jpg" alt="テキストテキストテキストテキスト">
        <div class="text-block">
          <h3 class="title">Archive</h3>
          <p>
            テキストテキストテキストテキスト<br>
            テキストテキストテキスト
          </p>
        </div><!-- /.flex-item -->
      </a>
      <a class="item" href="#">
        <img src="img/magazine-new.jpg" alt="テキストテキストテキストテキスト">
        <div class="text-block">
          <h3 class="title">New</h3>
          <p>
            テキストテキストテキストテキスト<br>
            テキストテキストテキスト
          </p>
        </div><!-- /.text-block -->
      </a>
    </div><!-- /.flex-item -->
  </section><!-- /.magazine -->
  <section class="fashion">
    <div class="wrapper">
      <h2 class="section-title">Fashion &amp; Style</h2>
      <p>
        テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト<br>
        テキストテキストテキストテキストテキストテキストテキストテキスト
      </p>
      <a class="btn" href="#">Read More</a>
    </div>
  </section><!-- /.fashion -->
  <section class="catalog-antique">
    <div class="flex-item wrapper">
      <div class="item">
        <img src="img/catalog.jpg" alt="">
      </div><!-- /.item -->
      <div class="catalog item-text">
        <h2 class="section-title">Catalog</h2>
        <p>
          テキストテキストテキストテキストテキストテキストテキストテキストテキスト
          テキストテキストテキストテキストテキストテキストテキストテキストテキスト
          テキストテキストテキストテキストテキストテキストテキストテキストテキスト
        </p>
        <p>
          テキストテキストテキストテキストテキストテキストテキストテキストテキスト
          テキストテキストテキストテキストテキストテキストテキストテキストテキスト
          テキストテキストテキストテキストテキストテキストテキストテキストテキスト
        </p>
        <p>
          テキストテキストテキストテキストテキストテキストテキストテキストテキスト
          テキストテキストテキストテキストテキストテキストテキストテキストテキスト
          テキストテキストテキストテキストテキストテキストテキストテキストテキスト
        </p>
      </div><!-- /.item -->
    </div><!-- /.flex-item -->
  </section><!-- /.catalog-antique -->
  <section class="catalog-antique">
    <div class="flex-item wrapper">
      <div class="antique item-text">
        <h2 class="section-title">Antique</h2>
        <p>
          テキストテキストテキストテキストテキストテキストテキストテキストテキスト
          テキストテキストテキストテキストテキストテキストテキストテキストテキスト
          テキストテキストテキストテキストテキストテキストテキストテキストテキスト
        </p>
        <p>
          テキストテキストテキストテキストテキストテキストテキストテキストテキスト
          テキストテキストテキストテキストテキストテキストテキストテキストテキスト
          テキストテキストテキストテキストテキストテキストテキストテキストテキスト
        </p>
        <a class="btn" href="#">Read More</a>
      </div><!-- /.item-text -->
      <div class="item">
        <img src="img/antique.jpg" alt="">
      </div><!-- /.item -->
    </div><!-- /.flex-item -->
  </section><!-- /.catalog-antique -->
</main>
<!-- /.main-content -->

<!-- .footer -->
<footer class="footer">
<div class="flex-item wrapper">
  <div class="footer-logo">
    <a href="index.html"><img src="img/logo.svg" alt="Mag88"></a>
  </div><!-- /.item -->
  <div class="footer-item">
    <p class="title">タイトル</p>
    <ul>
      <li>テキストテキストテキスト</li>
      <li>テキストテキストテキスト</li>
      <li>テキストテキストテキスト</li>
      <li>テキストテキストテキスト</li>
      <li>テキストテキストテキスト</li>
    </ul>
  </div><!-- /.item -->
  <div class="footer-item">
    <p class="title">タイトルタイトルタイトル</p>
    <p>
      テキストテキストテキストテキストテキストテキストテキストテキストテキスト
      テキストテキストテキストテキストテキストテキストテキストテキストテキスト
      テキストテキストテキストテキストテキストテキストテキストテキストテキスト
    </p>
  </div><!-- /.item -->
</div><!-- /.flex-item -->
<p class="copyright">&copy; Mag88</p>
</footer>
<!-- /.footer -->
</body>
</html>

@charset "URF-8";

/* --------------------------------------
  reset
-------------------------------------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
ul, li {
  list-style: none;
}
a {
  color: inherit;
  text-decoration: none;
}
img {
  max-width: 100%;
  vertical-align: bottom;
}


/* --------------------------------------
  body
-------------------------------------- */
body {
  color: #333;
  font-size: 14px;
  font-family: 'Arial', sans-serif;
  line-height: 1.5;
}


/* --------------------------------------
  common
-------------------------------------- */
.wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 5%;
}
.section-title {
  margin-bottom: 20px;
  font-size: 24px;
  font-family: 'Arial', sans-serif;
  line-height: 1.0;
  text-align: center;
}
.btn {
  display: inline-block;
  margin-top: 30px;
  padding: 12px 36px;
  border: 1px solid #2a2a2a;
  color: #2a2a2a;
  font-size: 12px;
  text-align: center;
}


/* --------------------------------------
  header
-------------------------------------- */
.header {
  position: relative;
  height: 100vh;
  margin-bottom: 80px;
  background: url(../img/mainvisual.jpg) no-repeat center top;
  background-size: cover;
}
  .header .site-title {
    position: absolute;
    top: 28px;
    right: 30px;
  }


/* --------------------------------------
  magazine
-------------------------------------- */
.magazine {
  text-align: center;
  margin-bottom: 80px;
}
  .magazine > .section-title {
    margin-bottom: 22px;
  }
  .magazine > .flex-item {
    margin-top: 39px;
  }
    .magazine > .flex-item .item {
      position: relative;
      display: block;
    }
    .magazine > .flex-item .item:nth-of-type(1) {
      margin-bottom: 34px;
    }
    .text-block {
      position: absolute;
      top: 40%;
      left: 0;
      right: 0;
      max-width: 290px;
      margin: 0 auto;
      padding: 11px 0 14px;
      background-color: rgba(0, 0, 0, 0.5);
      color: #fff;
      font-weight: bold;
    }
      .text-block > .title {
        font-size: 20px;
      }

@media screen and (min-width: 768px) {
  .magazine > .flex-item {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
  }
      .magazine > .flex-item .item:nth-of-type(1) {
        margin-bottom: 0;
      }
}


/* --------------------------------------
  fashion
-------------------------------------- */
.fashion {
  height: 516px;
  margin-bottom: 60px;
  padding: 44px 0 60px;
  background: url(../img/fashion.jpg) no-repeat center 10px;
  background-size: cover;
  text-align: center;
}
  .fashion .section-title {
    margin-bottom: 22px;
  }

@media screen and (min-width: 768px) {
  .fashion {
    height: 540px;
    margin-bottom: 60px;
    padding: 66px 0 60px;
    background: url(../img/fashion.jpg) no-repeat center bottom;
    background-size: cover;
    text-align: center;
  }
    .fashion .section-title {
      margin-bottom: 22px;
    }
}


/* --------------------------------------
  catalog-antique
-------------------------------------- */
.catalog-antique {
  background-color: #f5f5f5;
  padding: 30px 0 28px;
}
  .item-text {
    text-align: center;
  }
    .item-text p {
      margin-bottom: 30px;
      text-align: left;
    }
      .item-text p:last-of-type {
        margin-bottom: 0;
      }
    .catalog .section-title {
      margin: 60px 0 36px;
      line-height: 1.5;
    }
    .antique .section-title {
      margin: 0 0 36px;
      line-height: 1.5;
    }
    .antique p:last-of-type {
      margin-bottom: 30px;
    }
    .antique a {
      margin-bottom: 60px;
    }

@media screen and (min-width: 768px) {
  .catalog-antique {
    background-color: #f5f5f5;
    padding: 60px 0 62px;
  }
  .catalog-antique > .flex-item {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 42px;
  }
    .catalog-antique > .flex-item:nth-of-type(even) {
      /* grid-auto-flow: dense; */
      grid-row: 1
    }
    .catalog .section-title, .antique .section-title {
      margin: 92px 0 40px;
    }
    .catalog-antique .item > img {
      margin-bottom: 0;
    }
    .item-text p:last-of-type {
      margin-bottom: 30px;
    }

}


/* --------------------------------------
  footer
-------------------------------------- */
.footer {
  background-color: #333;
  color: #fff;
}
  .footer-logo {
    padding: 30px 0;
    text-align: center;
  }
  .footer-item>.title {
    margin-bottom: 10px;
    font-size: 16.2px;
    font-weight: 700;
    line-height: 2.0;
  }
  .footer-item {
    margin-bottom: 30px;
    font-size: 12.2px;
    line-height: 1.91;
  }
  .footer-item:last-of-type {
    margin-bottom: 60px;
  }
  .footer li::before {
    content: "-";
    margin-right: 5px;
    color: #fff;
  }
  p.copyright {
    width: 100%;
    padding: 28px 0;
    background-color: #fff;
    text-align: center;
    color: #333;
    font-size: 12px;
  }

@media screen and (min-width: 768px) {
  .footer>.wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    max-width: 1200px;
    margin: 0 auto;
    padding: 100px 5%; 
  }
  .footer-logo {
    padding: 60px 0;
    text-align: left;
  }
  .footer-item {
    margin-bottom: 0;
  }
  .footer-item:last-of-type {
    margin-bottom: 0;
  }
}