H1タイトル

H1タイトル


    <h1 class="h1 block-category-list--header">H1タイトル</h1>
    
メインビジュアル

    <div class="block-category-list--header-img">
    <ul class="js-header-slider">
      <li><img src="/img/usr/dummy/MV_dummy_PC.png" alt="" class="pc-only"><img src="/img/usr/dummy/MV_dummy_SP.png" alt="" class="sp-only"></li>
      <li><img src="/img/usr/dummy/MV_dummy_PC2.png" alt="" class="pc-only"><img src="/img/usr/dummy/MV_dummy_SP2.png" alt="" class="sp-only"></li>
    </ul>
  </div>
    
H2タイトル

H2タイトル


    <h2 class="title-item-list-template--title01">H2タイトル</h2>
    
H3タイトル

H3タイトル


    <h3 class="title-item-list-template--title02">H3タイトル</h3>
    
テキスト

テキスト


    <p class="block-item-list-template--txt">テキスト</p>
    
画像

    <div class="block-item-list-template--image"><img src="/img/usr/dummy/dummy01.png" alt=""></div>
    
リード文

テキスト


    <div class="block-item-list-template--lead">
        <p class="block-item-list-template--txt">テキスト</p>
        </div>
    
タイトル+画像+テキスト

H3タイトル

テキスト


     <div class="block-item-list-template--style01">
        <h3 class="title-item-list-template--title02">H3タイトル</h3>
        <div class="block-item-list-template--image"><img src="/img/usr/dummy/dummy01.png" alt=""></div>
        <p class="block-item-list-template--txt">テキスト</p>
        </div>
        <!-- .block-item-list-template--style01 -->
    
画像+テキスト(左寄せ)
  • テキスト

  • テキスト

  • テキスト

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

  • テキスト
    テキスト


     <div class="block-item-list-template--style02 at-left-justified">
        <ul>
        <!--  ▼ここから▼ -->
        <li>
        <p class="block-item-list-template--txt">テキスト</p>
        <div class="block-item-list-template--image"><a href="#"><img src="/img/usr/dummy/dummy02.png" alt=""></a></div>
        </li>
        <!--  ▲ここまで▲ --> 
        <!--  ▼ここから▼ -->
        <li>
        <p class="block-item-list-template--txt">テキスト</p>
        <div class="block-item-list-template--image"><a href="#"><img src="/img/usr/dummy/dummy02.png" alt=""></a></div>
        </li>
        <!--  ▲ここまで▲ --> 
        <!--  ▼ここから▼ -->
        <li>
        <p class="block-item-list-template--txt">テキスト</p>
        <div class="block-item-list-template--image"><a href="#"><img src="/img/usr/dummy/dummy02.png" alt=""></a></div>
        </li>
        <!--  ▲ここまで▲ --> 
        <!--  ▼ここから▼ -->
        <li>
        <p class="block-item-list-template--txt">テキスト</p>
        <div class="block-item-list-template--image"><a href="#"><img src="/img/usr/dummy/dummy02.png" alt=""></a></div>
        </li>
        <!--  ▲ここまで▲ -->
        </ul>
        </div>
        <!-- .block-item-list-template--style02 -->
    
画像+テキスト(中央寄せ)
  • テキスト

  • テキスト

  • テキスト


     <div class="block-item-list-template--style02">
        <ul>
        <!--  ▼ここから▼ -->
        <li>
        <p class="block-item-list-template--txt">テキスト</p>
        <div class="block-item-list-template--image"><a href="#"><img src="/img/usr/dummy/dummy02.png" alt=""></a></div>
        </li>
        <!--  ▲ここまで▲ --> 
        <!--  ▼ここから▼ -->
        <li>
        <p class="block-item-list-template--txt">テキスト</p>
        <div class="block-item-list-template--image"><a href="#"><img src="/img/usr/dummy/dummy02.png" alt=""></a></div>
        </li>
        <!--  ▲ここまで▲ --> 
        <!--  ▼ここから▼ -->
        <li>
        <p class="block-item-list-template--txt">テキスト</p>
        <div class="block-item-list-template--image"><a href="#"><img src="/img/usr/dummy/dummy02.png" alt=""></a></div>
        </li>
        <!--  ▲ここまで▲ --> 
        </ul>
        </div>
        <!-- .block-item-list-template--style02 -->
    
テキスト 画像

テキスト

テキスト

テキスト


     <div class="block-item-list-template--style02">
        <!-- ブロック ここから -->
        <p class="block-item-list-template--txt">テキスト</p>
        <ul>
        <!--  ▼ここから▼ -->
        <li>
        <div class="block-item-list-template--image"><a href="#"><img src="/img/usr/dummy/dummy02.png" alt=""></a></div>
        </li>
        <!--  ▲ここまで▲ --> 
        <!--  ▼ここから▼ -->
        <li>
        <div class="block-item-list-template--image"><a href="#"><img src="/img/usr/dummy/dummy02.png" alt=""></a></div>
        </li>
        <!--  ▲ここまで▲ --> 
        <!--  ▼ここから▼ -->
        <li>
        <div class="block-item-list-template--image"><a href="#"><img src="/img/usr/dummy/dummy02.png" alt=""></a></div>
        </li>
        <!--  ▲ここまで▲ --> 
        <!--  ▼ここから▼ -->
        <li>
        <div class="block-item-list-template--image"><a href="#"><img src="/img/usr/dummy/dummy02.png" alt=""></a></div>
        </li>
        <!--  ▲ここまで▲ -->
        </ul>
        <!-- ブロック ここまで -->
        <!-- ブロック ここから -->
        <p class="block-item-list-template--txt">テキスト</p>
        <ul>
        <!--  ▼ここから▼ -->
        <li>
        <div class="block-item-list-template--image"><a href="#"><img src="/img/usr/dummy/dummy02.png" alt=""></a></div>
        </li>
        <!--  ▲ここまで▲ --> 
        <!--  ▼ここから▼ -->
        <li>
        <div class="block-item-list-template--image"><a href="#"><img src="/img/usr/dummy/dummy02.png" alt=""></a></div>
        </li>
        <!--  ▲ここまで▲ --> 
        <!--  ▼ここから▼ -->
        <li>
        <div class="block-item-list-template--image"><a href="#"><img src="/img/usr/dummy/dummy02.png" alt=""></a></div>
        </li>
        <!--  ▲ここまで▲ --> 
        <!--  ▼ここから▼ -->
        <li>
        <div class="block-item-list-template--image"><a href="#"><img src="/img/usr/dummy/dummy02.png" alt=""></a></div>
        </li>
        <!--  ▲ここまで▲ -->
        </ul>
        <!-- ブロック ここまで -->
        <!-- ブロック ここから -->
        <p class="block-item-list-template--txt">テキスト</p>
        <ul>
        <!--  ▼ここから▼ -->
        <li>
        <div class="block-item-list-template--image"><a href="#"><img src="/img/usr/dummy/dummy02.png" alt=""></a></div>
        </li>
        <!--  ▲ここまで▲ --> 
        <!--  ▼ここから▼ -->
        <li>
        <div class="block-item-list-template--image"><a href="#"><img src="/img/usr/dummy/dummy02.png" alt=""></a></div>
        </li>
        <!--  ▲ここまで▲ --> 
        <!--  ▼ここから▼ -->
        <li>
        <div class="block-item-list-template--image"><a href="#"><img src="/img/usr/dummy/dummy02.png" alt=""></a></div>
        </li>
        <!--  ▲ここまで▲ --> 
        <!--  ▼ここから▼ -->
        <li>
        <div class="block-item-list-template--image"><a href="#"><img src="/img/usr/dummy/dummy02.png" alt=""></a></div>
        </li>
        <!--  ▲ここまで▲ -->
        </ul>
        <!-- ブロック ここまで -->
        </div>
        <!-- .block-item-list-template--style02 -->
    
ランキングスライド

COLOR RANKING人気カラーランキング

テキスト


     <div class="block-item-list-template--style03">
        <div class="block-item-list-template--list-header">
        <h3>COLOR RANKING<strong>人気カラーランキング</strong></h3>
        <p class="block-item-list-template--list-lead">テキスト</p>
        </div>
        <!-- .block-item-list-template--list-header -->
        <div class="block-item-list-template--list-body">
        <ul class="block-item-list-template--list-item">
        <!--  ▼ここから▼ -->
        <li><a href="#">
        <div class="block-item-list-template--list-item-rank rank1">1</div>
        <div class="block-item-list-template--image"><img src="/img/usr/dummy/dummy02.png" alt=""></div>
        <div class="block-item-list-template--list-item-color">色</div>
        </a></li>
        <!--  ▲ここまで▲ --> 
        <!--  ▼ここから▼ -->
        <li><a href="#">
        <div class="block-item-list-template--list-item-rank rank2">2</div>
        <div class="block-item-list-template--image"><img src="/img/usr/dummy/dummy02.png" alt=""></div>
        <div class="block-item-list-template--list-item-color">色</div>
        </a></li>
        <!--  ▲ここまで▲ --> 
        <!--  ▼ここから▼ -->
        <li><a href="#">
        <div class="block-item-list-template--list-item-rank rank3">3</div>
        <div class="block-item-list-template--image"><img src="/img/usr/dummy/dummy02.png" alt=""></div>
        <div class="block-item-list-template--list-item-color">色</div>
        </a></li>
        <!--  ▲ここまで▲ --> 
        <!--  ▼ここから▼ -->
        <li><a href="#">
        <div class="block-item-list-template--list-item-rank rank4">4</div>
        <div class="block-item-list-template--image"><img src="/img/usr/dummy/dummy02.png" alt=""></div>
        <div class="block-item-list-template--list-item-color">色</div>
        </a></li>
        <!--  ▲ここまで▲ --> 
        <!--  ▼ここから▼ -->
        <li><a href="#">
        <div class="block-item-list-template--list-item-rank rank5">5</div>
        <div class="block-item-list-template--image"><img src="/img/usr/dummy/dummy02.png" alt=""></div>
        
        <div class="block-item-list-template--list-item-color">色</div>
        </a></li>
        <!--  ▲ここまで▲ --> 
        <!--  ▼ここから▼ -->
        <li><a href="#">
        <div class="block-item-list-template--list-item-rank rank6">6</div>
        <div class="block-item-list-template--image"><img src="/img/usr/dummy/dummy02.png" alt=""></div>
        <div class="block-item-list-template--list-item-color">色</div>
        </a></li>
        <!--  ▲ここまで▲ -->
        </ul>
        </div>
        </div>
        <!-- .block-item-list-template--style03 -->
    

テキスト

テキスト