Saetl.net

Simple And Easy TempLate

MixItUpの使い方

  1. 下記ページの 「DOWNLOAD.ZIP」 よりファイル1式をダウンロード。
  2. ダウンロードしたファイルを任意の場所にコピー。
    ファイル構成
  3. 動作させるファイル(サンプルではindex.html)にコードを記述。
    パスは上記ファイル構成の場合なので環境にあわせて変更>
    ・head部分にcssとjsファイルを読み込ませるためのコードを記述。
    <head>
    <link rel="stylesheet" type="text/css" href="css/mixitup.css"/>
    <!--googleのCDN(ネットワーク経由でコンテンツを提供するサービス)よりjqueryをロード-->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <!--ダウンロードしたファイル(一部追加)-->
    <script type="text/javascript" src="js/jquery.mixitup.js"></script>
    </head> 
    

    サンプルのcssコード

    /*ページ設定部分(style.cssなどで設定していれば削除する)*/
    body, ul, li, h1, h2, span {
    	margin: 0;
    	padding: 0;
    }
    body {
    	background: #fff;
    }
    ul {
    	list-style: none;
    }
    #container {
    	margin: 0 auto;
    	width: 1100px;
    }
    a {
    	color: #333;
    	text-decoration: none;
    }
    a:hover {
    	color: #ff0000;
    	text-decoration: underline;
    }
    /*ここまでページ設定部分*/
    
    
    /*ここからMixitupの設定*/
    
    /* CONTROLS STYLES */
    
    .controls {
    	height: 50px;
    	line-height: 50px;
    	margin-bottom: 20px;
    }
    .group {
    	display: inline-block;
    }
    .just {
    	text-align: justify;
    }
    .just::after {
    	content: '';
    	display: inline-block;
    	width: 100%;
    	height: 0;
    }
    .anim150 {
    	-webkit-transition: all 150ms ease-in-out;
    	-moz-transition: all 150ms ease-in-out;
    	-ms-transition: all 150ms ease-in-out;
    	-o-transition: all 150ms ease-in-out;
    	transition: all 150ms ease-in-out;
    }
    .anim250 {
    	-webkit-transition: all 250ms ease-in-out;
    	-moz-transition: all 250ms ease-in-out;
    	-ms-transition: all 250ms ease-in-out;
    	-o-transition: all 250ms ease-in-out;
    	transition: all 250ms ease-in-out;
    }
    .anim250 li {
    	font-size: 13px !important;
    }
    /* IMAGES */
    
    .img_wrapper {
    	position: relative;
    	background: #f0ebe5;
    	overflow: hidden;
    }
    .img_wrapper img {
    	position: absolute;
    	width: 100%;
    	height: auto;
    	opacity: 0;
    	top: 0;
    	-webkit-transition: opacity 150ms;
    	-moz-transition: opacity 150ms;
    	-ms-transition: opacity 150ms;
    	transition: opacity 150ms;
    }
    .img_wrapper.loaded img {
    	opacity: 1;
    }
    .button, .drop_down {
    	display: inline-block;
    	width: 70px;
    	height: 30px;
    	line-height: 30px;
    	padding: 0 8px;
    	background: #c3bdb8;
    	vertical-align: middle;
    	margin-right: 10px;
    	color: #f9f6f0;
    	font-size: 16px !important;
    	text-transform: uppercase;
    	cursor: pointer;
    	-webkit-border-radius: 3px;
    	-moz-border-radius: 3px;
    	border-radius: 3px;
    }
    .drop_down {
    	width: auto;
    	margin: 0 0 0 px;
    	background: none;
    	color: #c3bdb8;
    	padding: 0;
    	position: relative;
    	letter-spacing: 2px;
    	z-index: 999;
    }
    .drop_down span {
    	position: relative;
    	padding-right: 20px;
    }
    .drop_down span::after, .drop_down span::before {
    	position: absolute;
    	top: 8px;
    	right: 3px;
    	display: block;
    	content: '';
    	border: 6px solid transparent;
    	border-top: 7px solid #c3bdb8;
    }
    .drop_down span::before {
    	top: 6px;
    	border-top-color: #f9f6f0;
    	z-index: 10;
    }
    .drop_down:hover span::after {
    	border-top-color: #333;
    }
    .drop_down ul {
    	position: absolute;
    	opacity: 0;
    	max-height: 0;
    	right: -3px;
    	background: #fff;
    	padding: 10px;
    	min-width: 100px;
    	text-align: left;
    	overflow: hidden;
    	-webkit-box-shadow: 0 0 10px rgba(0,0,0,.3);
    	-moz-box-shadow: 0 0 10px rgba(0,0,0,.3);
    	box-shadow: 0 0 10px rgba(0,0,0,.3);
    	-webkit-border-radius: 5px;
    	-moz-border-radius: 5px;
    	border-radius: 5px;
    }
    .drop_down:hover ul {
    	opacity: 1;
    	max-height: 300px;
    }
    .drop_down:hover span {
    	color: #333;
    }
    .drop_down li {
    	display: block;
    	text-transform: none;
    	color: #808080;
    	font-weight: 300;
    	line-height: 1;
    	letter-spacing: 0;
    	margin-bottom: 10px;
    	padding: 0 10px !important;
    	-webkit-transition: all 150ms;
    	-moz-transition: all 150ms;
    	-ms-transition: all 150ms;
    	transition: all 150ms;
    }
    .drop_down li:before {
    	content: '';
    	position: relative;
    	display: inline-block;
    	width: 10px;
    	height: 10px;
    	top: 1px;
    	margin-right: 6px;
    	border: 1px solid #ccc;
    	-webkit-border-radius: 2px;
    	-moz-border-radius: 2px;
    	border-radius: 2px;
    }
    .drop_down li:last-of-type {
    	margin: 0;
    }
    .drop_down li:hover {
    	color: #59514c;
    }
    .drop_down li.active {
    	color: #e96d51;
    	font-weight: 400;
    }
    .drop_down li.active:before {
    	background: #e96d51;
    	border-color: #e96d51;
    }
    .button.active {
    	background: #e96d51;
    }
    .button i {
    	position: relative;
    	display: inline-block;
    	background: #f9f6f0;
    	width: 17px;
    	height: 17px;
    	margin-right: 8px;
    	top: 3px;
    }
    .button i:before, .button i:after {
    	content: '';
    	position: absolute;
    	display: block;
    	background: #c3bdb8;
    }
    #ToGrid i:before, #ToGrid i:after {
    	width: 100%;
    	height: 3px;
    	top: 7px;
    }
    #ToGrid i:after {
    	width: 3px;
    	height: 100%;
    	top: 0;
    	left: 7px;
    }
    #ToList i:before, #ToList i:after {
    	width: 100%;
    	height: 4px;
    	top: 3px;
    }
    #ToList i:after {
    	top: 10px;
    }
    .button.active i:before, .button.active i:after {
    	background: #e96d51;
    }
    /* FAIL ELEMENT */
    
    #Parks {
    	position: relative;
    }
    .fail_element {
    	position: absolute;
    	opacity: 0;
    	top: 100px;
    	text-align: center;
    	width: 50%;
    	left: 25%;
    	line-height: 1.4;
    	font-weight: 300;
    }
    .fail .fail_element {
    	opacity: 1;
    }
    /* LIST VIEW STYLES */
    
    #Parks.list .list_header {
    	height: 38px;
    	line-height: 38px;
    	background: #f0ebe5;
    	text-align: right;
    	color: #59514c;
    	font-size: 16px;
    	-webkit-border-radius: 3px;
    	-moz-border-radius: 3px;
    	border-radius: 3px;
    }
    #Parks.list .list_header .meta {
    	line-height: 38px;
    	border: 0 none;
    }
    #Parks.list .meta.name {
    	float: left;
    	text-align: left;
    	width: auto;
    	border-left: 0 none;
    }
    #Parks.list .list_header .meta.name {
    	padding-left: 15px;
    }
    #Parks.list .list_header .meta span {
    	position: relative;
    	display: inline-block;
    	width: 24px;
    	height: 24px;
    	margin: 7px 0 0;
    	cursor: pointer;
    	-webkit-border-radius: 3px;
    	-moz-border-radius: 3px;
    	border-radius: 3px;
    }
    #Parks.list .list_header .meta span:after {
    	content: '';
    	position: absolute;
    	top: 9px;
    	left: 7px;
    	border: 5px solid transparent;
    }
    #Parks.list .list_header .meta span.asc:after {
    	border-top: 7px solid #c3bdb8;
    }
    #Parks.list .list_header .meta span.desc:after {
    	top: 4px;
    	border-bottom: 7px solid #c3bdb8;
    }
    #Parks.list .list_header .meta span:hover {
    	background: #c3bdb8;
    }
    #Parks.list .list_header .meta span.asc:hover:after {
    	border-top-color: #f0ebe5;
    }
    #Parks.list .list_header .meta span.desc:hover:after {
    	border-bottom-color: #f0ebe5;
    }
    #Parks.list .list_header .meta span.active.asc:after {
    	border-top-color: #e96d51;
    }
    #Parks.list .list_header .meta span.active.desc:after {
    	border-bottom-color: #e96d51;
    }
    #Parks.list .list_header .meta .middle {
    	display: inline-block;
    	vertical-align: middle;
    	margin-bottom: 15px;
    }
    #Parks.list .meta {
    	display: inline-block;
    	width: 150px;
    	font-size: 16px;
    	text-align: center;
    	line-height: 100px;
    	border-left: 1px solid #d7d7d7;
    	height: 100%;
    	vertical-align: top;
    }
    #Parks.list .mix {
    	display: none;
    	opacity: 0;
    	padding: 18px 0 14px;
    	border-bottom: 1px solid #d7d7d7;
    	text-align: right;
    	height: 99px;
    	width: 100%;
    	line-height: 99px;
    	background: #f9f6f0;
    	vertical-align: top;
    	font-weight: 300;
    }
    #Parks.list .mix .meta * {
    	line-height: 1;
    }
    #Parks.list .mix .meta p, #Parks.list .mix .meta ul {
    	display: inline-block;
    	vertical-align: middle;
    	list-style: none;
    }
    #Parks.list .mix .meta li {
    	margin-bottom: 5px;
    	padding: 2px 0;
    	font-size: 16px !important;
    }
    #Parks.list .img_wrapper {
    	display: inline-block;
    	width: 150px;
    	height: 90px;
    	vertical-align: top;
    	margin-left: 20px;
    	margin-right: 20px;
    }
    #Parks.list .titles {
    	display: inline-block;
    	vertical-align: top;
    }
    #Parks.list .titles h2 {
    	font-weight: 700;
    	font-size: 18px !important;
    	text-transform: uppercase;
    	color: #E96D51;
    	letter-spacing: 2px;
    	margin-bottom: 3px;
    	line-height: 1.2 !important;
    }
    #Parks.list .titles p {
    	text-indent: -2px;
    }
    /* GRID VIEW STYLES */
    
    #Parks.grid {
    	text-align: justify;
    }
    #Parks.grid .list_header, #Parks.grid .meta {
    	display: none;
    }
    #Parks.grid .meta.name {
    	position: absolute;
    	width: 100%;
    	height: 100%;
    	top: 0;
    	display: block;
    }
    #Parks.grid .mix {
    	display: none;
    	opacity: 0;
    	position: relative;
    	width: 48.5%;
    	padding-top: 26%;
    	margin-bottom: 3%;
    }
    #Parks.grid .img_wrapper {
    	position: absolute;
    	width: 100%;
    	height: 100%;
    	background: #000;
    }
    #Parks.grid .titles {
    	position: relative;
    	width: 90%;
    	max-width: 380px;
    	height: auto;
    	margin-top: 75%;
    	margin: 53.5% auto 0;
    	top: -70px;
    	z-index: 1;
    	padding: 10px 0;
    	background: #fff;
    	background: rgba(255,255,255,.8);
    	text-align: center;
    }
    #Parks.grid .titles h2 {
    	font-size: 18px !important;
    	font-weight: 700;
    	text-transform: uppercase;
    	height: 20px;
    	line-height: 20px;
    	color: #E96D51;
    	letter-spacing: 2px;
    	margin-bottom: 3px;
    }
    #Parks.grid .titles p {
    	font-weight: 300;
    	text-indent: -2px;
    }
     @media (max-width: 500px) {
    #Parks.grid .mix {
    	width: 100%;
    	padding-top: 53%;
    }
    .drop_down {
    	display: none;
    }
     @media (max-width: 1000px) {
     #Parks.list .meta {
     width: 150px;
    }
     #Parks.list .titles {
     width: 150px;
    }
     @media (max-width: 840px) {
     #Parks.list .meta.region, #Parks.list .meta.categoryB {
     display: none;
    }
     @media (max-width: 540px) {
     #Parks.list .meta.area {
     display: none;
    }
    
    ・<body></body>内にコードを記述。
      <div class="controls just">
        <div class="group" id="Sorts">
          <div class="button active" id="ToList"> <i></i>詳細 </div>
          <div class="button" id="ToGrid"> <i></i>画像 </div>
        </div>
        <div class="group" id="Filters">
          <div class="drop_down wf"> <span class="anim150">カテゴリA</span>
            <ul class="anim250">
              <li class="active" data-filter="all" data-dimension="categoryA">All</li>
              <li data-filter="A11111" data-dimension="categoryA">A11111</li>
              <li data-filter="A22222" data-dimension="categoryA">A22222</li>
              <li data-filter="A33333" data-dimension="categoryA">A33333</li>
              <li data-filter="A44444" data-dimension="categoryA">A44444</li>
            </ul>
          </div>
          <div class="drop_down wf"> <span class="anim150">カテゴリB</span>
            <ul class="anim250">
              <li class="active" data-filter="all" data-dimension="categoryB">All</li>
              <li data-filter="B11111" data-dimension="categoryB">B11111</li>
              <li data-filter="B22222" data-dimension="categoryB">B22222</li>
              <li data-filter="B33333" data-dimension="categoryB">B33333</li>
              <li data-filter="B44444" data-dimension="categoryB">B44444</li>
            </ul>
          </div>
        </div>
      </div>
      <ul id="Parks" class="just">
        <div class="list_header">
          <div class="meta name active desc" id="SortByName">
            <div class="middle"> 品名 </div>
            <span class="sort anim150 asc active" data-sort="data-name" data-order="desc"></span> <span class="sort anim150 desc" data-sort="data-name" data-order="asc"></span> </div>
          <div class="meta categoryA"> カテゴリA </div>
          <div class="meta categoryB"> カテゴリB </div>
          <div class="meta area" id="SortByArea">
            <div class="middle"> 価格 </div>
            <span class="sort anim150 asc" data-sort="data-area" data-order="asc"></span> <span class="sort anim150 desc" data-sort="data-area" data-order="desc"></span> </div>
        </div>
        <div class="fail_element anim250"> 申し訳ありませんが、一致する条件を見つけることができませんでした。 </div>
        <li class="mix A33333 B11111 B22222 B33333 B44444" data-name="商品C" data-area="2467">
          <div class="meta name">
            <div class="img_wrapper"> <img src="images/1.jpg" onload="imgLoaded(this)"/> </div>
            <div class="titles">
              <h2>商品C</h2>
              <p><em>Subtitle</em></p>
            </div>
          </div>
          <div class="meta categoryA">
            <p>A33333</p>
          </div>
          <div class="meta categoryB">
            <ul>
              <li>B11111</li>
              <li>B22222</li>
              <li>B33333</li>
              <li>B44444</li>
            </ul>
          </div>
          <div class="meta area">
            <p>2,467円</p>
          </div>
        </li>
        <li class="mix A22222 B22222" data-name="商品A" data-area="5958">
          <div class="meta name">
            <div class="img_wrapper"> <img src="images/2.jpg" onload="imgLoaded(this)"/> </div>
            <div class="titles">
              <h2>商品A</h2>
              <p><em>Subtitle</em></p>
            </div>
          </div>
          <div class="meta categoryA">
            <p>A22222</p>
          </div>
          <div class="meta categoryB">
            <ul>
              <li>B22222</li>
            </ul>
          </div>
          <div class="meta area">
            <p>5,958円</p>
          </div>
        </li>
        <li class="mix A44444 B11111 B33333" data-name="商品E" data-area="86956">
          <div class="meta name">
            <div class="img_wrapper"> <img src="images/3.jpg" onload="imgLoaded(this)"/> </div>
            <div class="titles">
              <h2>商品E</h2>
              <p><em>Subtitle</em></p>
            </div>
          </div>
          <div class="meta categoryA">
            <p>A44444</p>
          </div>
          <div class="meta categoryB">
            <ul>
              <li>B11111</li>
              <li>B33333</li>
            </ul>
          </div>
          <div class="meta area">
            <p>86,956円</p>
          </div>
        </li>
        <li class="mix A11111 B11111 B22222 B33333" data-name="商品D" data-area="9324">
          <div class="meta name">
            <div class="img_wrapper"> <img src="images/4.jpg" onload="imgLoaded(this)"/> </div>
            <div class="titles">
              <h2>商品D</h2>
              <p><em>Subtitle</em></p>
            </div>
          </div>
          <div class="meta categoryA">
            <p>A11111</p>
          </div>
          <div class="meta categoryB">
            <ul>
              <li>B11111</li>
              <li>B22222</li>
              <li>B33333</li>
            </ul>
          </div>
          <div class="meta area">
            <p>9,324円</p>
          </div>
        </li>
        <li class="mix A11111 B11111 B33333" data-name="商品F" data-area="25486">
          <div class="meta name">
            <div class="img_wrapper"> <img src="images/5.jpg" onload="imgLoaded(this)"/> </div>
            <div class="titles">
              <h2>商品F</h2>
              <p><em>Subtitle</em></p>
            </div>
          </div>
          <div class="meta categoryA">
            <p>A11111</p>
          </div>
          <div class="meta categoryB">
            <ul>
              <li>B11111</li>
              <li>B33333</li>
            </ul>
          </div>
          <div class="meta area">
            <p>25,486円</p>
          </div>
        </li>
        <li class="mix A22222 B11111 B33333" data-name="商品B" data-area="57698">
          <div class="meta name">
            <div class="img_wrapper"> <img src="images/6.jpg" onload="imgLoaded(this)"/> </div>
            <div class="titles">
              <h2>商品B</h2>
              <p><em>Subtitle</em></p>
            </div>
          </div>
          <div class="meta categoryA">
            <p>A22222</p>
          </div>
          <div class="meta categoryB">
            <ul>
              <li>B11111</li>
              <li>B33333</li>
            </ul>
          </div>
          <div class="meta area">
            <p>57,698円</p>
          </div>
        </li>
      </ul>
    </div>
    

    サンプルのhtmlコード

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="utf-8" />
    <title>MixItUp</title>
    <link rel="stylesheet" type="text/css" href="css/mixitup.css"/>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.mixitup.js"></script>
    </head>
    
    <body>
    <div id="container">
      <div class="controls just">
        <div class="group" id="Sorts">
          <div class="button active" id="ToList"> <i></i>詳細 </div>
          <div class="button" id="ToGrid"> <i></i>画像 </div>
        </div>
        <div class="group" id="Filters">
          <div class="drop_down wf"> <span class="anim150">カテゴリA</span>
            <ul class="anim250">
              <li class="active" data-filter="all" data-dimension="categoryA">All</li>
              <li data-filter="A11111" data-dimension="categoryA">A11111</li>
              <li data-filter="A22222" data-dimension="categoryA">A22222</li>
              <li data-filter="A33333" data-dimension="categoryA">A33333</li>
              <li data-filter="A44444" data-dimension="categoryA">A44444</li>
            </ul>
          </div>
          <div class="drop_down wf"> <span class="anim150">カテゴリB</span>
            <ul class="anim250">
              <li class="active" data-filter="all" data-dimension="categoryB">All</li>
              <li data-filter="B11111" data-dimension="categoryB">B11111</li>
              <li data-filter="B22222" data-dimension="categoryB">B22222</li>
              <li data-filter="B33333" data-dimension="categoryB">B33333</li>
              <li data-filter="B44444" data-dimension="categoryB">B44444</li>
            </ul>
          </div>
        </div>
      </div>
      <ul id="Parks" class="just">
        <div class="list_header">
          <div class="meta name active desc" id="SortByName">
            <div class="middle"> 品名 </div>
            <span class="sort anim150 asc active" data-sort="data-name" data-order="desc"></span> <span class="sort anim150 desc" data-sort="data-name" data-order="asc"></span> </div>
          <div class="meta categoryA"> カテゴリA </div>
          <div class="meta categoryB"> カテゴリB </div>
          <div class="meta area" id="SortByArea">
            <div class="middle"> 価格 </div>
            <span class="sort anim150 asc" data-sort="data-area" data-order="asc"></span> <span class="sort anim150 desc" data-sort="data-area" data-order="desc"></span> </div>
        </div>
        <div class="fail_element anim250"> 申し訳ありませんが、一致する条件を見つけることができませんでした。 </div>
        <li class="mix A33333 B11111 B22222 B33333 B44444" data-name="商品C" data-area="2467">
          <div class="meta name">
            <div class="img_wrapper"> <img src="images/1.jpg" onload="imgLoaded(this)"/> </div>
            <div class="titles">
              <h2>商品C</h2>
              <p><em>Subtitle</em></p>
            </div>
          </div>
          <div class="meta categoryA">
            <p>A33333</p>
          </div>
          <div class="meta categoryB">
            <ul>
              <li>B11111</li>
              <li>B22222</li>
              <li>B33333</li>
              <li>B44444</li>
            </ul>
          </div>
          <div class="meta area">
            <p>2,467円</p>
          </div>
        </li>
        <li class="mix A22222 B22222" data-name="商品A" data-area="5958">
          <div class="meta name">
            <div class="img_wrapper"> <img src="images/2.jpg" onload="imgLoaded(this)"/> </div>
            <div class="titles">
              <h2>商品A</h2>
              <p><em>Subtitle</em></p>
            </div>
          </div>
          <div class="meta categoryA">
            <p>A22222</p>
          </div>
          <div class="meta categoryB">
            <ul>
              <li>B22222</li>
            </ul>
          </div>
          <div class="meta area">
            <p>5,958円</p>
          </div>
        </li>
        <li class="mix A44444 B11111 B33333" data-name="商品E" data-area="86956">
          <div class="meta name">
            <div class="img_wrapper"> <img src="images/3.jpg" onload="imgLoaded(this)"/> </div>
            <div class="titles">
              <h2>商品E</h2>
              <p><em>Subtitle</em></p>
            </div>
          </div>
          <div class="meta categoryA">
            <p>A44444</p>
          </div>
          <div class="meta categoryB">
            <ul>
              <li>B11111</li>
              <li>B33333</li>
            </ul>
          </div>
          <div class="meta area">
            <p>86,956円</p>
          </div>
        </li>
        <li class="mix A11111 B11111 B22222 B33333" data-name="商品D" data-area="9324">
          <div class="meta name">
            <div class="img_wrapper"> <img src="images/4.jpg" onload="imgLoaded(this)"/> </div>
            <div class="titles">
              <h2>商品D</h2>
              <p><em>Subtitle</em></p>
            </div>
          </div>
          <div class="meta categoryA">
            <p>A11111</p>
          </div>
          <div class="meta categoryB">
            <ul>
              <li>B11111</li>
              <li>B22222</li>
              <li>B33333</li>
            </ul>
          </div>
          <div class="meta area">
            <p>9,324円</p>
          </div>
        </li>
        <li class="mix A11111 B11111 B33333" data-name="商品F" data-area="25486">
          <div class="meta name">
            <div class="img_wrapper"> <img src="images/5.jpg" onload="imgLoaded(this)"/> </div>
            <div class="titles">
              <h2>商品F</h2>
              <p><em>Subtitle</em></p>
            </div>
          </div>
          <div class="meta categoryA">
            <p>A11111</p>
          </div>
          <div class="meta categoryB">
            <ul>
              <li>B11111</li>
              <li>B33333</li>
            </ul>
          </div>
          <div class="meta area">
            <p>25,486円</p>
          </div>
        </li>
        <li class="mix A22222 B11111 B33333" data-name="商品B" data-area="57698">
          <div class="meta name">
            <div class="img_wrapper"> <img src="images/6.jpg" onload="imgLoaded(this)"/> </div>
            <div class="titles">
              <h2>商品B</h2>
              <p><em>Subtitle</em></p>
            </div>
          </div>
          <div class="meta categoryA">
            <p>A22222</p>
          </div>
          <div class="meta categoryB">
            <ul>
              <li>B11111</li>
              <li>B33333</li>
            </ul>
          </div>
          <div class="meta area">
            <p>57,698円</p>
          </div>
        </li>
      </ul>
    </div>
    
    </body>
    </html>
  4. ファイル1式をサーバーにアップロードして設置完了。
    サンプル