【ソースコード】中級編：ストアサイト（インテリア）／グリッドレイアウト

ディレクトリ構成
HTML（トップページ / index.html）
HTML（Productsページ / products.html）
HTML（Products詳細ページ / item1.html）
HTML（Aboutページ / about.html）
HTML（Companyページ / company.html）
CSS（style.css）
JavaScript（main.js）
- ハンバーガーメニューの仕組み

※コーディングの解説はCSSのコメントを参照

ディレクトリ構成

    
store2
 ├─img
 │  ├─favicon.ico
 │  ├─logo.svg
 │  └─item1.jpg ～ item16.jpg
 │
 ├─css
 │  └─style.css
 │
 ├─js
 │  └─main.js
 │
 ├─about.html
 ├─company.html
 ├─index.html
 ├─item1.html ～ item16.html
 ├─products.html
 └─products2.html

HTML（トップページ / index.html）

別タブで開く

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Furniture Design</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">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="js/main.js"></script>
  </head>

  <body>
    <header id="header" class="wrapper">
      <h1 class="site-title">
        <a href="index.html"><img src="img/logo.svg" alt="Furniture Design"></a>
      </h1>

      <nav id="navi">
        <ul class="nav-menu">
          <li><a href="products.html">PRODUCTS</a></li>
          <li><a href="about.html">ABOUT</a></li>
          <li><a href="company.html">COMPANY</a></li>
          <li><a href="mailto:xxxxx@xxx.xxx?subject=お問い合わせ">CONTACT</a></li>
        </ul>
      </nav>

      <div class="toggle_btn">
        <span></span>
        <span></span>
      </div>

      <div id="mask"></div>
    </header>

    <main>
      <div id="top" class="wrapper">
        <ul class="product-list">
          <li>
            <a href="item1.html">
              <img src="img/item1.jpg" alt="">
              <p>プロダクトタイトルプロダクトタイトル</p>
              <p>&yen;99,999 +tax</p>
            </a>
          </li>
          <li>
            <a href="item2.html">
              <img src="img/item2.jpg" alt="">
              <p>プロダクトタイトルプロダクトタイトル</p>
              <p>&yen;99,999 +tax</p>
            </a>
          </li>
          <li>
            <a href="item3.html">
              <img src="img/item3.jpg" alt="">
              <p>プロダクトタイトルプロダクトタイトル</p>
              <p>&yen;99,999 +tax</p>
            </a>
          </li>
          <li>
            <a href="item4.html">
              <img src="img/item4.jpg" alt="">
              <p>プロダクトタイトルプロダクトタイトル</p>
              <p>&yen;99,999 +tax</p>
            </a>
          </li>
          <li>
            <a href="item5.html">
              <img src="img/item5.jpg" alt="">
              <p>プロダクトタイトルプロダクトタイトル</p>
              <p>&yen;99,999 +tax</p>
            </a>
          </li>
          <li>
            <a href="item6.html">
              <img src="img/item6.jpg" alt="">
              <p>プロダクトタイトルプロダクトタイトル</p>
              <p>&yen;99,999 +tax</p>
            </a>
          </li>
          <li>
            <a href="item7.html">
              <img src="img/item7.jpg" alt="">
              <p>プロダクトタイトルプロダクトタイトル</p>
              <p>&yen;99,999 +tax</p>
            </a>
          </li>
          <li>
            <a href="item8.html">
              <img src="img/item8.jpg" alt="">
              <p>プロダクトタイトルプロダクトタイトル</p>
              <p>&yen;99,999 +tax</p>
            </a>
          </li>
        </ul>
        <a class="link-text" href="products.html">View More</a>
      </div>
    </main>

    <footer id="footer" class="wrapper">
      <ul class="menu">
        <li><a href="https://www.instagram.com/" target="_blank">INSTAGRAM</a></li>
        <li><a href="https://twitter.com/" target="_blank">TWITTER</a></li>
        <li><a href="https://www.facebook.com/" target="_blank">FACEBOOK</a></li>
      </ul>
      <p class="copyright">&copy; Furniture Design</p>
    </footer>
  </body>
</html>

HTML（Productsページ / products.html）

別タブで開く

products.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Products | Furniture Design</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">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="js/main.js"></script>
  </head>

  <body>
    <header id="header" class="wrapper">
      <div class="site-title">
        <a href="index.html"><img src="img/logo.svg" alt="Furniture Design"></a>
      </div>

      <nav id="navi">
        <ul class="nav-menu">
          <li><a href="products.html">PRODUCTS</a></li>
          <li><a href="about.html">ABOUT</a></li>
          <li><a href="company.html">COMPANY</a></li>
          <li><a href="mailto:xxxxx@xxx.xxx?subject=お問い合わせ">CONTACT</a></li>
        </ul>
      </nav>

      <div class="toggle_btn">
        <span></span>
        <span></span>
      </div>

      <div id="mask"></div>
    </header>

    <main>
      <div class="content wrapper">
        <h1 class="page-title">Products</h1>
        <ul class="product-list">
          <li>
            <a href="item1.html">
              <img src="img/item1.jpg" alt="">
              <p>プロダクトタイトルプロダクトタイトル</p>
              <p>&yen;99,999 +tax</p>
            </a>
          </li>
          <li>
            <a href="item2.html">
              <img src="img/item2.jpg" alt="">
              <p>プロダクトタイトルプロダクトタイトル</p>
              <p>&yen;99,999 +tax</p>
            </a>
          </li>
          <li>
            <a href="item3.html">
              <img src="img/item3.jpg" alt="">
              <p>プロダクトタイトルプロダクトタイトル</p>
              <p>&yen;99,999 +tax</p>
            </a>
          </li>
          <li>
            <a href="item4.html">
              <img src="img/item4.jpg" alt="">
              <p>プロダクトタイトルプロダクトタイトル</p>
              <p>&yen;99,999 +tax</p>
            </a>
          </li>
          <li>
            <a href="item5.html">
              <img src="img/item5.jpg" alt="">
              <p>プロダクトタイトルプロダクトタイトル</p>
              <p>&yen;99,999 +tax</p>
            </a>
          </li>
          <li>
            <a href="item6.html">
              <img src="img/item6.jpg" alt="">
              <p>プロダクトタイトルプロダクトタイトル</p>
              <p>&yen;99,999 +tax</p>
            </a>
          </li>
          <li>
            <a href="item7.html">
              <img src="img/item7.jpg" alt="">
              <p>プロダクトタイトルプロダクトタイトル</p>
              <p>&yen;99,999 +tax</p>
            </a>
          </li>
          <li>
            <a href="item8.html">
              <img src="img/item8.jpg" alt="">
              <p>プロダクトタイトルプロダクトタイトル</p>
              <p>&yen;99,999 +tax</p>
            </a>
          </li>
          <li>
            <a href="item9.html">
              <img src="img/item9.jpg" alt="">
              <p>プロダクトタイトルプロダクトタイトル</p>
              <p>&yen;99,999 +tax</p>
            </a>
          </li>
          <li>
            <a href="item10.html">
              <img src="img/item10.jpg" alt="">
              <p>プロダクトタイトルプロダクトタイトル</p>
              <p>&yen;99,999 +tax</p>
            </a>
          </li>
          <li>
            <a href="item11.html">
              <img src="img/item11.jpg" alt="">
              <p>プロダクトタイトルプロダクトタイトル</p>
              <p>&yen;99,999 +tax</p>
            </a>
          </li>
          <li>
            <a href="item12.html">
              <img src="img/item12.jpg" alt="">
              <p>プロダクトタイトルプロダクトタイトル</p>
              <p>&yen;99,999 +tax</p>
            </a>
          </li>
        </ul>
        <ul class="pagination">
          <li>1</li>
          <li><a href="products2.html">2</a></li>
        </ul>
      </div>
    </main>

    <footer id="footer" class="wrapper">
      <ul class="menu">
        <li><a href="https://www.instagram.com/" target="_blank">INSTAGRAM</a></li>
        <li><a href="https://twitter.com/" target="_blank">TWITTER</a></li>
        <li><a href="https://www.facebook.com/" target="_blank">FACEBOOK</a></li>
      </ul>
      <p class="copyright">&copy; Furniture Design</p>
    </footer>
  </body>
</html>

HTML（Products詳細ページ / item1.html）

※item2～item16.html についても、ファイル名以外は同じ内容です。

別タブで開く

item1.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="EUC-JP" />
<title>429 Too Many Requests</title>
<meta name="copyright" content="Copyright XSERVER Inc.">
<meta name="robots" content="INDEX,FOLLOW" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
<style type="text/css">
* {
    margin: 0;
    padding: 0;
}
img {
    border: 0;
}
ul {
    padding-left: 2em;
}
html {
    overflow-y: scroll;
    background: #3b79b7;
}
body {
    font-family: "�ᥤ�ꥪ", Meiryo, "�ͣ� �Х����å�", "MS PGothic", "�ҥ饮�γѥ� Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
    margin: 0;
    line-height: 1.4;
    font-size: 75%;
    text-align: center;
    color: white;
}
h1 {
    font-size: 24px;
    font-weight: bold;
}
h1 {
    font-weight: bold;
    line-height: 1;
    padding-bottom: 20px;
    font-family: Helvetica, sans-serif;
}
h2 {
    text-align: center;
    font-weight: bold;
    font-size: 27px;
}
p {
    text-align: center;
    font-size: 14px;
    margin: 0;
    padding: 0;
    color: white;
}
.explain {
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    line-height: 1.5;
    margin: 30px auto;
    padding: 17px;
}
#cause {
    text-align: left;
}
#cause li {
    color: #666;
}
h3 {
    letter-spacing: 1px;
    font-weight: bold;
    padding: 0;
}
#white_box {
    margin: 15px auto 0;
    background-color: white;
}

/* ====================

  ���ޡ��ȥե���

======================= */
@media only screen and (min-width: 0) and (max-width: 767px) {
	#base {
		padding: 30px 10px;
	}
	h1 {
		font-size: 26px;
	}
	h1 span {
		font-size: 60px;
	}
	h2 {
		font-size: 16px;
	}
	.explain {
		font-size: 14px;
	}
	h3 {
		margin-top: 45px;
		font-size: 16px;
	}
	#cause {
		padding: 20px;
		font-size: 12px;
	}
}

/* ====================

   �ѥ�������֥�å�

======================= */

@media only screen and (min-width: 768px) {
	#base {
		margin-top: 80px;
	}
	h1 {
		font-size: 50px;
	}
	h1 span {
		font-size: 110px;
	}
	.explain {
		font-size: 16px;
		width: 660px;
	}
	#white_box {
		width: 680px;
		margin-bottom: 50px;
	}
	h3 {
		font-size: 20px;
		margin-top: 80px;
	}
	#cause {
		padding: 30px;
		font-size: 14px;
	}
}
</style>
</head>

<body>
<div id="base">
    <h1><span>429</span><br />
        Too Many Requests</h1>
    <h2>�����������褦�Ȥ����ڡ�����ɽ���Ǥ��ޤ���Ǥ�����</h2>
    <p class="explain">���Υ��顼�ϡ����������¿���Υꥯ�����Ȥ����ä����Ȥ��̣���ޤ���<br />
		���֤��֤��ƺ��٥����������Ƥ���������</p>
    <h3>�ʲ��Τ褦�ʸ������ͤ����ޤ���</h3>
    <div id="white_box">
        <div id="cause">
            <ul>
                <li>�ִ�Ū�����̤�Web�������������ä���</li>
				<li>����ץ����ˤ�����̤Υꥯ�����Ȥ�ȯ��������</li>
            </ul>
        </div>
    </div>
    <!--//base--></div>
</body>
</html>

HTML（Aboutページ / about.html）

別タブで開く

about.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="EUC-JP" />
<title>429 Too Many Requests</title>
<meta name="copyright" content="Copyright XSERVER Inc.">
<meta name="robots" content="INDEX,FOLLOW" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
<style type="text/css">
* {
    margin: 0;
    padding: 0;
}
img {
    border: 0;
}
ul {
    padding-left: 2em;
}
html {
    overflow-y: scroll;
    background: #3b79b7;
}
body {
    font-family: "�ᥤ�ꥪ", Meiryo, "�ͣ� �Х����å�", "MS PGothic", "�ҥ饮�γѥ� Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
    margin: 0;
    line-height: 1.4;
    font-size: 75%;
    text-align: center;
    color: white;
}
h1 {
    font-size: 24px;
    font-weight: bold;
}
h1 {
    font-weight: bold;
    line-height: 1;
    padding-bottom: 20px;
    font-family: Helvetica, sans-serif;
}
h2 {
    text-align: center;
    font-weight: bold;
    font-size: 27px;
}
p {
    text-align: center;
    font-size: 14px;
    margin: 0;
    padding: 0;
    color: white;
}
.explain {
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    line-height: 1.5;
    margin: 30px auto;
    padding: 17px;
}
#cause {
    text-align: left;
}
#cause li {
    color: #666;
}
h3 {
    letter-spacing: 1px;
    font-weight: bold;
    padding: 0;
}
#white_box {
    margin: 15px auto 0;
    background-color: white;
}

/* ====================

  ���ޡ��ȥե���

======================= */
@media only screen and (min-width: 0) and (max-width: 767px) {
	#base {
		padding: 30px 10px;
	}
	h1 {
		font-size: 26px;
	}
	h1 span {
		font-size: 60px;
	}
	h2 {
		font-size: 16px;
	}
	.explain {
		font-size: 14px;
	}
	h3 {
		margin-top: 45px;
		font-size: 16px;
	}
	#cause {
		padding: 20px;
		font-size: 12px;
	}
}

/* ====================

   �ѥ�������֥�å�

======================= */

@media only screen and (min-width: 768px) {
	#base {
		margin-top: 80px;
	}
	h1 {
		font-size: 50px;
	}
	h1 span {
		font-size: 110px;
	}
	.explain {
		font-size: 16px;
		width: 660px;
	}
	#white_box {
		width: 680px;
		margin-bottom: 50px;
	}
	h3 {
		font-size: 20px;
		margin-top: 80px;
	}
	#cause {
		padding: 30px;
		font-size: 14px;
	}
}
</style>
</head>

<body>
<div id="base">
    <h1><span>429</span><br />
        Too Many Requests</h1>
    <h2>�����������褦�Ȥ����ڡ�����ɽ���Ǥ��ޤ���Ǥ�����</h2>
    <p class="explain">���Υ��顼�ϡ����������¿���Υꥯ�����Ȥ����ä����Ȥ��̣���ޤ���<br />
		���֤��֤��ƺ��٥����������Ƥ���������</p>
    <h3>�ʲ��Τ褦�ʸ������ͤ����ޤ���</h3>
    <div id="white_box">
        <div id="cause">
            <ul>
                <li>�ִ�Ū�����̤�Web�������������ä���</li>
				<li>����ץ����ˤ�����̤Υꥯ�����Ȥ�ȯ��������</li>
            </ul>
        </div>
    </div>
    <!--//base--></div>
</body>
</html>

HTML（Companyページ / company.html）

別タブで開く

company.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="EUC-JP" />
<title>429 Too Many Requests</title>
<meta name="copyright" content="Copyright XSERVER Inc.">
<meta name="robots" content="INDEX,FOLLOW" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
<style type="text/css">
* {
    margin: 0;
    padding: 0;
}
img {
    border: 0;
}
ul {
    padding-left: 2em;
}
html {
    overflow-y: scroll;
    background: #3b79b7;
}
body {
    font-family: "�ᥤ�ꥪ", Meiryo, "�ͣ� �Х����å�", "MS PGothic", "�ҥ饮�γѥ� Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
    margin: 0;
    line-height: 1.4;
    font-size: 75%;
    text-align: center;
    color: white;
}
h1 {
    font-size: 24px;
    font-weight: bold;
}
h1 {
    font-weight: bold;
    line-height: 1;
    padding-bottom: 20px;
    font-family: Helvetica, sans-serif;
}
h2 {
    text-align: center;
    font-weight: bold;
    font-size: 27px;
}
p {
    text-align: center;
    font-size: 14px;
    margin: 0;
    padding: 0;
    color: white;
}
.explain {
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    line-height: 1.5;
    margin: 30px auto;
    padding: 17px;
}
#cause {
    text-align: left;
}
#cause li {
    color: #666;
}
h3 {
    letter-spacing: 1px;
    font-weight: bold;
    padding: 0;
}
#white_box {
    margin: 15px auto 0;
    background-color: white;
}

/* ====================

  ���ޡ��ȥե���

======================= */
@media only screen and (min-width: 0) and (max-width: 767px) {
	#base {
		padding: 30px 10px;
	}
	h1 {
		font-size: 26px;
	}
	h1 span {
		font-size: 60px;
	}
	h2 {
		font-size: 16px;
	}
	.explain {
		font-size: 14px;
	}
	h3 {
		margin-top: 45px;
		font-size: 16px;
	}
	#cause {
		padding: 20px;
		font-size: 12px;
	}
}

/* ====================

   �ѥ�������֥�å�

======================= */

@media only screen and (min-width: 768px) {
	#base {
		margin-top: 80px;
	}
	h1 {
		font-size: 50px;
	}
	h1 span {
		font-size: 110px;
	}
	.explain {
		font-size: 16px;
		width: 660px;
	}
	#white_box {
		width: 680px;
		margin-bottom: 50px;
	}
	h3 {
		font-size: 20px;
		margin-top: 80px;
	}
	#cause {
		padding: 30px;
		font-size: 14px;
	}
}
</style>
</head>

<body>
<div id="base">
    <h1><span>429</span><br />
        Too Many Requests</h1>
    <h2>�����������褦�Ȥ����ڡ�����ɽ���Ǥ��ޤ���Ǥ�����</h2>
    <p class="explain">���Υ��顼�ϡ����������¿���Υꥯ�����Ȥ����ä����Ȥ��̣���ޤ���<br />
		���֤��֤��ƺ��٥����������Ƥ���������</p>
    <h3>�ʲ��Τ褦�ʸ������ͤ����ޤ���</h3>
    <div id="white_box">
        <div id="cause">
            <ul>
                <li>�ִ�Ū�����̤�Web�������������ä���</li>
				<li>����ץ����ˤ�����̤Υꥯ�����Ȥ�ȯ��������</li>
            </ul>
        </div>
    </div>
    <!--//base--></div>
</body>
</html>

CSS（style.css）

別タブで開く

style.css

@charset "UTF-8";

html {
  font-size: 100%;
}
/*
フッターを画面下に配置するために、
「position: relative;」を設定
「min-height」で最小の高さを画面の高さにあわせる
*/
body {
  color: #333;
  font-size: 0.875rem;
  min-height: 100vh;
  position: relative;
}
a {
  color: #333;
  text-decoration: none;
  transition: all 0.5s;
}
a:hover {
  opacity: 0.7;
}
img {
  max-width: 100%;
}
li {
  list-style: none;
}
/*
コンテンツ幅を設定するための共通クラス
*/
.wrapper {
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 40px;
}
.content {
  padding-top: 120px;
  padding-bottom: 160px;
}
.site-title a {
  width: 180px;
  line-height: 1px;
  display: block;
}
.page-title {
  font-size: 0.875rem;
  font-weight: normal;
  margin-bottom: 30px;
}

/*-------------------------------------------
ヘッダー
-------------------------------------------*/
/*
「position: fixed;」でヘッダーを固定し、「z-index: 10;」で前面に表示
※他のコンテンツでpositionをrelative、absolute、fixedのいずれかに
設定している場合は、z-indexの数値が大きい方が前面に表示される
*/
#header {
  width: 100%;
  height: 80px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  left: 0;
  right: 0;
  z-index: 10
}
/*
ハンバーガーメニュー
メニューが閉じている時は、「left: -300px;」で画面左に隠し、
「opacity: 0;」で非表示にしている
*/
#navi {
  position: fixed;
  top: 0;
  left: -300px;
  width: 300px;
  color: #fff;
  padding: 36px 50px;
  transition: all 0.5s;
  z-index: 20;
  opacity: 0;
}
#navi a {
  color: #fff;
}
#navi li {
  margin-bottom: 14px;
}
/*
ハンバーガーメニュー
メニューが開いている時は、「left: 0;」「opacity: 1;」で
画面左に表示する
*/
.open #navi {
  left: 0;
  opacity: 1;
}
.toggle_btn {
  width: 30px;
  height: 30px;
  position: relative;
  transition: all 0.5s;
  cursor: pointer;
  z-index: 20;
}
/*
ハンバーガーメニューの線の設定（メニューが閉じている時）
*/
.toggle_btn span {
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  background-color: #333;
  border-radius: 4px;
  transition: all 0.5s;
}
/*
1本目の線の位置を設定
*/
.toggle_btn span:nth-child(1) {
  top: 10px;
}
/*
2本目の線の位置を設定
*/
.toggle_btn span:nth-child(2) {
  bottom: 10px;
}
/*
ハンバーガーメニューの線の設定（メニューが開いている時）
線の色を白に変更
*/
.open .toggle_btn span {
  background-color: #fff;
}
/*
1本目の線を-45度回転
*/
.open .toggle_btn span:nth-child(1) {
  -webkit-transform: translateY(4px) rotate(-45deg);
  transform: translateY(4px) rotate(-45deg);
}
/*
2本目の線を45度回転
*/
.open .toggle_btn span:nth-child(2) {
  -webkit-transform: translateY(-4px) rotate(45deg);
  transform: translateY(-4px) rotate(45deg);
}
#mask {
  display: none;
  transition: all 0.5s;
}
/*
メニューを開いている時は、全体を黒背景にする
*/
.open #mask {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: .8;
  z-index: 10;
  cursor: pointer;
}

/*-------------------------------------------
TOP、PRODUCTS
-------------------------------------------*/
#top {
  padding-top: 80px;
  padding-bottom: 160px;
}
.product-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 35px;
}
/*
vertical-align: top;
画像の下にできる隙間を消す
*/
.product-list img {
  margin-bottom: 10px;
  vertical-align: top;
}
.product-list p {
  font-size: 0.75rem;
}
.link-text {
  display: block;
  margin-top: 40px;
  text-align: center;
}
.pagination {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}
.pagination li {
  padding: 0 20px;
}

/*-------------------------------------------
ITEM
-------------------------------------------*/
#item {
  max-width: 800px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 60px;
}
#item .item-text {
  width: 42%;
}
/*
text-align: justify;
テキストの両端を揃える
*/
#item .item-text p {
  margin-bottom: 30px;
  text-align: justify;
}
#item .item-text dl {
  display: flex;
  flex-wrap: wrap;
}
#item .item-text dt {
  width: 30%;
}
#item .item-text dd {
  width: 70%;
}
#item .item-img {
  width: 50%;
}

/*-------------------------------------------
ABOUT
-------------------------------------------*/
#about {
  max-width: 600px;
}
#about p {
  line-height: 1.9;
  margin-bottom: 30px;
}

/*-------------------------------------------
COMPANY
-------------------------------------------*/
#company {
  max-width: 600px;
}
#company dl {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
#company dt {
  width: 30%;
  border-bottom: solid 1px #dcdbdb;
  padding: 20px 10px;
}
#company dt:last-of-type {
  border-bottom: none;
}
#company dd {
  width: 70%;
  border-bottom: solid 1px #dcdbdb;
  padding: 20px 10px;
}
#company dd:last-of-type {
  border-bottom: none;
}
#company .map {
  /* グーグルマップをグレースケールにする */
  filter: grayscale(1);
}
/* グーグルマップのサイズを設定 */
#company .map iframe {
  width: 100%;
  height: 300px;
  border: 0;
}

/*-------------------------------------------
フッター
-------------------------------------------*/
/*
「position: absolute;」を設定して、フッター位置を画面下に設定
「left: 0;」「right: 0;」で中央に配置
*/
#footer {
  display: flex;
  justify-content: space-between;
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
}
#footer .menu {
  display: flex;
}
#footer .menu li {
  font-size: 0.75rem;
  margin-right: 30px;
}
#footer .copyright {
  font-size: 0.625rem;
}

/*-------------------------------------------
SP
-------------------------------------------*/
@media screen and (max-width: 900px) {

  /*-------------------------------------------
  TOP、PRODUCTS
  -------------------------------------------*/
  .product-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 20px;
  }

  /*-------------------------------------------
  ITEM
  -------------------------------------------*/
  #item {
    flex-direction: column;
  }
  #item .item-text {
    width: 100%;
  }
  #item .item-img {
    width: 100%;
    margin-bottom: 30px;
  }

  /*-------------------------------------------
  COMPANY
  -------------------------------------------*/
  #company dl {
    flex-direction: column;
  }
  #company dt {
    width: 100%;
    border-bottom: none;
    padding-bottom: 5px;
  }
  #company dd {
    width: 100%;
    padding-top: 5px;
  }

  /*-------------------------------------------
  フッター
  -------------------------------------------*/
  #footer {
    flex-direction: column;
  }
  #footer .menu {
    margin-bottom: 5px;
  }
}

JavaScript（main.js）

別タブで開く

main.js

$(function(){
  /*=================================================
  ハンバーガーメニュー
  ===================================================*/
  // ハンバーガーメニューのクリックイベント
  $('.toggle_btn').on('click', function() {
    // #headerにopenクラスが存在する場合
    if ($('#header').hasClass('open')) {
      // openクラスを削除
      // openクラスを削除すると、openクラスのCSSがはずれるため、
      // メニューが非表示になる
      $('#header').removeClass('open');

    // #headerにopenクラスが存在しない場合
    } else {
      // openクラスを追加
      // openクラスを追加すると、openクラスのCSSが適応されるため、
      // メニューが表示される
      $('#header').addClass('open');
    }
  });

  // メニューが表示されている時に画面をクリックした場合
  $('#mask').on('click', function() {
    // openクラスを削除して、メニューを閉じる
    $('#header').removeClass('open');
  });
});

最初は非表示: ハンバーガーメニュー「#navi」には、「opacity: 0;」が設定されているので、最初は非表示の状態です。
メニューをクリック（メニューを開く）: ハンバーガーメニューをクリックすると、main.jsの以下イベントが動作します。
$('.toggle_btn').on('click', function() {
headerタグにopenクラスを追加: イベントが動作すると、はじめはheaderタグにopenクラスが存在しないので、イベントの中の「$('#header').addClass('open');」が実行され、headerタグにopenクラスが追加されます。
openクラスのCSSが認識されメニューが表示される: headerタグにopenクラスが追加されると、openクラスのCSS「.open #navi」が認識されるので、メニューが表示されるようになります。（「.open #navi」には、「opacity: 1;」が設定されているため）
もう一度メニューをクリック（メニューを閉じる）: この状態で、もう一度ハンバーガーメニューをクリックすると、今度はすでにheaderタグの中にopenクラスが存在しているので「$('#header').removeClass('open');」が実行され、headerタグからopenクラスが削除されます。
openクラスのCSSが認識されなくなりメニューが非表示になる: headerタグからopenクラスが削除されると、openクラスのCSS「.open #navi」が認識されなくなるので、メニューが非表示になります。

【ソースコード】中級編：ストアサイト（インテリア）／グリッドレイアウト

目次

ディレクトリ構成

HTML（トップページ / index.html）

HTML（Productsページ / products.html）

HTML（Products詳細ページ / item1.html）

HTML（Aboutページ / about.html）

HTML（Companyページ / company.html）

CSS（style.css）

JavaScript（main.js）

ハンバーガーメニューの仕組み