logo

テンプレートサイト > カテゴリー4
mv mv

<> html


<div class="slide_container">
  <ul class="slide-wrapper index_slick">
    <?php
    $args = [
      'post_type' => 'topics',
      'paged' => $paged,
      'order' => 'ASC',
    ];
    $my_query = new WP_Query( $args );
    ?>
    <?php if ($my_query->have_posts()): ?>
    <?php while ($my_query->have_posts()) : $my_query->the_post(); ?>
    <li class="slide">
      <div class="slide-inner"> <a href="<?php the_field('topics_url'); ?>">
        <?php
        $image = wp_get_attachment_image_src( get_field( 'topics_img' ), 'full' );
        ?>
        <img src="<?php echo $image[0]; ?>" alt="<?php echo get_the_title(get_field('topics_img')); ?>">
        <h2>
          <?php the_title(); ?>
        </h2>
        <p>
          <?php the_field('topics_txt'); ?>
        </p>
        </a> </div>
    </li>
    <?php endwhile; ?>
    <?php endif; wp_reset_postdata(); ?>
  </ul>
</div>

# scss

【　slick.css　】をダウンロード

以下はstyle.scss内のslick用scss


/*----------------------- slick -----------------------*/
.slide_container {
  position: relative;
  overflow: hidden;
  padding: 0 0 30px;
  margin: 0 auto;

  .slick-list {
    .slick-slide {
      float: left;
      height: 100%;
      min-height: 1px;

      &.slick-active {
        opacity: 1;
      }

      &:not(.slick-active) {
        opacity: 0.4;
      }

      h2 {
        color: #000;
        font-size: clamp(18px, 2vw, 20px);
        line-height: 1.5;
        margin: 10px 0;
        font-weight: 500;
      }

      img {
        height: auto;
        width: 100%;
      }

      p {
        color: #000;
        font-size: clamp(12px, 1.6vw, 16px);
        line-height: 1.5;
      }
    }
  }

  .slick-next {
    background: url(assets/images/slide_next.png)no-repeat center/100% auto!important;
  }
  .slick-prev {
    background: url(assets/images/slide_prev.png)no-repeat center/100% auto!important;
  }
  .slick-next:hover, .slick-prev:hover {
		opacity: 0.6;
  }
}

{} js

【　slick.js　】をダウンロード

#section_A

#section_A_sec_1.inner

<> html


  <section id="section_A" class="js-index__area">
    <h2 class="section_tit">#section_A</h2>
    <div id="section_A_sec_1" class="inner">
      <h3 class="section_tit">#section_A_sec_1<span class="green_txt">.inner</span></h3>
    </div>
  </section>

# scss


  /*----------------------- section_A -----------------------*/
  #section_A {
    background: #F5F5F5;

    .inner {
      padding: 25px;
      background: #FFF;

      p,
      .bg_black p {
        font-size: clamp(16px, 2vw, 20px);
        font-weight: 700;
        font-family: 'Open Sans';
      }
    }
  }

#section_B

#section_B_sec_1.inner

<> html


  <section id="section_B" class="js-index__area">
    <h2 class="section_tit">#section_B</h2>
    <div id="section_B_sec_1" class="inner">
      <h3 class="section_tit">#section_B_sec_1<span class="green_txt">.inner</span> </h3>
    </div>
  </section>

# scss


  /*----------------------- section_B -----------------------*/
  #section_B {
    background: #000;

    .inner {
      padding: 25px;
      background: transparent;
      border: solid 1px #333;

      h3,
      p {
        font-size: clamp(16px, 2vw, 20px);
        font-weight: 700;
        font-family: 'Open Sans';
      }
    }
  }

#section_C

#section_C_sec_1

images

タイトル

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

<> html


  <h2 class="section_tit">#section_C</h2>
  <div id="section_C_sec_1" class="flex_box js-index__area">
    <div class="left_box"> <img src="<?php echo get_template_directory_uri(); ?>/assets/images/images1.png" alt="images"> </div>
    <div class="right_box">
      <h2>タイトル</h2>
      <p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
    </div>
  </div>

# scss


  #section_C_sec_1 {
    max-width: 1000px;
    margin: 0 auto clamp(35px, 7vw, 70px);
    display: grid;
    grid-template-columns: clamp(200px, 32vw, 480px) 1fr;

    .right_box {
      padding: 0 5% 1%;
      background: #fff;
      align-content: center;
      display: grid;

      h2 {
        color: #000;
        font-size: clamp(18px,2.4vw,28px);
        font-weight: 500;
        margin: 0 0 10px 0;
      }

      p {
        font-size: clamp(10px, 1.4vw, 16px);
        font-weight: 400;
      }
    }
  }

@media screen and (max-width: 640px) {
  #section_C_sec_1 {
    grid-template-columns: 1fr;

    .right_box {
      padding: 5%;

      h2 {
        margin: 0 0 5px 0;
      }
    }
  }
}

#section_C_sec_2

images

タイトル

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

<> html


  <h2 class="section_tit">#section_C</h2>
  <div id="section_C_sec_2" class="flex_box js-index__area">
    <div class="left_box"> <img src="<?php echo get_template_directory_uri(); ?>/assets/images/images1.png" alt="images"> </div>
    <div class="right_box">
      <h2>タイトル</h2>
      <p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
    </div>
  </div>

# scss


  #section_C_sec_2 {
    max-width: 1000px;
    margin: 0 auto clamp(35px, 7vw, 70px);
    display: grid;
    grid-template-columns: clamp(200px, 32vw, 360px) 1fr;

    .right_box {
      padding: 0 5% 1%;
      background: #fff;
      align-content: center;
      display: grid;

      h2 {
        color: #000;
        margin: 0 0 10px 0;
        font-size: clamp(18px,2.4vw,28px);
        font-weight: 500;
      }

      p {
        font-size: clamp(10px, 1.4vw, 16px);
        font-weight: 400;
      }
    }
  }

@media screen and (max-width: 640px) {
  #section_C_sec_2 {
    grid-template-columns: 1fr;

    .right_box {
      padding: 5%;

      h2 {
        margin: 0 0 5px 0;
      }
    }
  }
}

#section_D

#section_D_sec_1

  • images

    タイトル

    ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

  • images

    タイトル

    ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

  • images

    タイトル

    ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

  • images

    タイトル

    ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

<> html

<section_D_sec_1 ～ section_D_sec_3>までは共通ソース


  <ul>
    <li class="grid_box">
      <div class="left_box"><img src="<?php echo get_template_directory_uri(); ?>/assets/images/images1.png" alt="images"></div>
      <div class="right_box">
        <h3>タイトル</h3>
        <p class="txt">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
      </div>
    </li>
    <li class="grid_box">
      <div class="left_box"><img src="<?php echo get_template_directory_uri(); ?>/assets/images/images1.png" alt="images"></div>
      <div class="right_box">
        <h3>タイトル</h3>
        <p class="txt">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
      </div>
    </li>
    <li class="grid_box">
      <div class="left_box"><img src="<?php echo get_template_directory_uri(); ?>/assets/images/images1.png" alt="images"></div>
      <div class="right_box">
        <h3>タイトル</h3>
        <p class="txt">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
      </div>
    </li>
    <li class="grid_box">
      <div class="left_box"><img src="<?php echo get_template_directory_uri(); ?>/assets/images/images1.png" alt="images"></div>
      <div class="right_box">
        <h3>タイトル</h3>
        <p class="txt">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
      </div>
    </li>
  </ul>

# scss


	#section_D_sec_1 {
    margin: 0 auto clamp(35px, 7vw, 70px);

    ul {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 0 clamp(20px, 4vw, 40px);
      padding: 0 0 clamp(35px, 7vw, 70px);

      li {
        padding: 0 20px;

        &.grid_box {
          display: grid;
          grid-template-columns: clamp(120px,14vw,180px) 1fr;
          border-top: 1px solid #707070;
          padding: 20px 0;

          &:nth-child(n+3) {
            border-bottom: 1px solid #707070;
          }

          .right_box {
            padding: 0 0 0 clamp(20px, 3vw, 35px);

            h3 {
              font-size: clamp(16px, 2vw, 20px);
              font-weight: 500;
            }

            p {
              font-size: clamp(12px, 1.6vw, 16px);
              font-weight: 400;
            }
          }
        }
      }
    }
  }

@media screen and (max-width: 640px) {
  #section_D_sec_1 ul li {
    padding: 0 25px;
    &.grid_box {
      grid-auto-flow: column;
      grid-template-columns: 1fr;
      grid-template-rows: repeat(2, auto);

        .right_box {
        padding: clamp(20px, 3vw, 35px) 0 0 0;
        }
    }
  }
}
@media screen and (max-width: 480px) {
  #section_D_sec_1 ul {
    grid-template-columns: 1fr;

    .grid_box {

      &:last-child {
      border-top: none;
      }
    }
  }
}

#section_D_sec_2

  • images

    タイトル

    ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

  • images

    タイトル

    ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

  • images

    タイトル

    ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

  • images

    タイトル

    ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

<> html

<section_D_sec_1 ～ section_D_sec_3>までは共通ソース

# scss


  #section_D_sec_2 {
    max-width: 1000px;
    margin: 0 auto clamp(35px, 7vw, 70px);

    ul {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: clamp(30px,5vw,80px);
      padding: 0 0 clamp(35px, 7vw, 70px);

      li {
        .img_box {
          margin: 0 0 clamp(10px, 1.5vw, 30px) 0;
        }

        .txt_box {
          h2 {
            margin: 0 0 clamp(5px, 1.1vw, 20px) 0;
            font-size: clamp(18px, 3.2vw, 32px);
            font-weight: 500;
          }

          p {
            font-size: clamp(12px, 1.6vw, 16px);
            font-weight: 400;
          }
        }
      }
    }
  }

@media screen and (max-width: 480px) {
  #section_D #section_D_sec_2 ul {
    grid-template-columns: 1fr;
  }
}

#section_D_sec_3

  • images

    タイトル

    ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

  • images

    タイトル

    ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

  • images

    タイトル

    ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

  • images

    タイトル

    ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

<> html

<section_D_sec_1 ～ section_D_sec_3>までは共通ソース

# scss


  #section_D_sec_3 {
    max-width: 1000px;
    margin: 0 auto clamp(35px, 7vw, 70px);

    ul {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: clamp(25px, 5vw, 50px);
      padding: 0 0 clamp(35px, 7vw, 70px);

      li {
        .img_box {
          margin: 0 0 clamp(10px, 1.1vw, 20px) 0;
        }

        .txt_box {
          h2 {
            margin: 0 0 clamp(1px, 0.6vw, 10px) 0;
            font-size: clamp(18px, 2vw, 20px);
            font-weight: 500;
          }

          p {
            font-size: clamp(12px, 1.6vw, 16px);
            font-weight: 400;
          }
        }
      }
    }
  }

@media screen and (max-width: 640px) {
  #section_D #section_D_sec_3 ul {
    grid-template-columns: repeat(2, 1fr);
  }
}

#section_D_sec_4

images

タイトル

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

ボタンテキストボタンテキストボタンテキスト

<> html


        <div id="section_D_sec_4" class="inner js-index__area">
          <div class="img_box"><img src="<?php echo get_template_directory_uri(); ?>/assets/images/images5.png" alt="images"></div>
          <div class="txt_box">
            <h2>タイトル</h2>
            <p class="txt">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
          </div>
          <div class="btn arrow"><a>ボタンテキストボタンテキストボタンテキスト</a></div>
        </div>

# scss


  #section_D_sec_4 {
    max-width: 1000px;
    padding: 0 0 clamp(30px, 3.5vw, 50px);
    margin: 0 auto clamp(35px, 7vw, 70px);

    .img_box {
      margin: 0 0 clamp(15px,3vw,30px) 0;
    }

    .txt_box {
      margin: 0 0 55px 0;

      h2 {
        font-size: clamp(25px, 3.2vw, 40px);
        margin: 0 0 clamp(5px, 1.1vw, 20px) 0;
        font-weight: 500;
      }

      p {
        font-size: clamp(12px, 1.6vw, 16px);
        font-weight: 400;
      }
    }

		.btn {
		
			a {
      font-size: clamp(11px, 1.3vw, 16px);
      }
			
			&.arrow {
        position: relative;

        a {
          padding: 0 10px 0 0;
        }

        &::after {
          position: absolute;
          content: "";
          top: clamp(20px, 3vw, 30px);
          bottom: 0;
          right: 30px;
          width: 8px;
          height: 8px;
          border-top: 2px solid #fff;
          border-right: 2px solid #fff;
          transform: rotate(45deg);
        }
      }
		}
  }

リンクボタン

ボタンテキストボタンテキスト

<> html


  <div class="btn arrow"><a class="arrow_right">ボタンテキストボタンテキスト</a></div>

# scss

 
  .btn {
    display: flex;
    width: clamp(325px, 35vw, 540px);
    height: clamp(50px, 7vw, 70px);
    border-radius: clamp(25px, 3.5vw, 35px);
    background: #000;
    margin: 0 auto;
    justify-content: center;
    align-items: center;

    a {
      color: #fff;
      text-align: center;
      font-size: clamp(14px, 1.6vw, 16px);
      font-weight: 400;
    }
  }

  .btn.arrow {
    position: relative;

    a {
      padding: 0 10px 0 0;
    }

    &::after {
      position: absolute;
      content: "";
      top: clamp(20px, 3vw, 30px);
      bottom: 0;
      right: 30px;
      width: 8px;
      height: 8px;
      border-top: 2px solid #fff;
      border-right: 2px solid #fff;
      transform: rotate(45deg);
    }
  }

リンクボタン（別タブ）

ボタンテキストボタンテキスト

<> html

 
  <div class="btn blank"><a href="#" target="_blank">ボタンテキストボタンテキスト</a></div>

# scss

 
  .btn {
    display: flex;
    width: clamp(325px, 35vw, 540px);
    height: clamp(50px, 7vw, 70px);
    border-radius: clamp(25px, 3.5vw, 35px);
    background: #000;
    margin: 0 auto;
    justify-content: center;
    align-items: center;

    a {
      color: #fff;
      text-align: center;
      font-size: clamp(14px, 1.6vw, 16px);
      font-weight: 400;
    }
  }

  .btn.blank a {
    position: relative;

    &::after {
      background: url(assets/images/arrow.png) no-repeat center/100% auto;
      position: absolute;
      content: "";
      width: 15.57px;
      height: 13px;
      top: 50%;
      right: -25px;
      opacity: 1;
      transform: translate(0, -50%);
    }
  }

ページ内リンクナビ

<> html

 
  <ul class="nav">
    <li><a class="arrow_down" href="#">リンク1</a></li>
    <li><a class="arrow_down" href="#">リンク2</a></li>
    <li><a class="arrow_down" href="#">リンク3</a></li>
  </ul>

# scss


    ul.nav {
      list-style: none;
      margin: 0;
      padding: clamp(50px, 10vw, 100px) 0 0;
      display: flex;
      justify-content: space-between;

      li {
        width: calc(100% / 3);
        height: clamp(50px, 6vw, 70px);
        font-weight: 500;
        margin: 0;
        padding: 10px 0;
        border-left: 1px solid #A5A5A5;
        position: relative;
        font-size: clamp(14px, 1.8vw, 18px);

        a {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          display: inline-flex;
          justify-content: space-around;
          padding: 0 10px;
          font-size: 18px;

          &.arrow_down::before {
            content: "";
            margin: auto;
            position: absolute;
            top: clamp(30px, 3vw, 42px);
            width: 5px;
            height: 5px;
            border-top: 1px solid #2A2C2C;
            border-right: 1px solid #2A2C2C;
            transform: rotate(135deg);
          }
        }

        &:last-child a {
          border-right: 1px solid #A5A5A5;
        }
      }
    }

@media screen and (max-width: 480px) {
  ul.nav {
    flex-direction: column;

    li {
      width: 100%;
      border-top: 1px solid #A5A5A5;
      border-left: none;

      a {
        justify-content: flex-start;
        align-items: center;
        padding: 0 0 0 12px;

        &.arrow_down::before {
          top: calc(50% - 3.5px);
          right: 18px;
        }
      }

      &:nth-of-type(3) a {
        border-bottom: 1px solid #A5A5A5;
        border-right: none;
      }
    }
  }
}

<> html

【　archive-news.php　】をダウンロード

【　single-news.php　】をダウンロード

# scss

【　news.scss　】をダウンロード

{} js

【　news.js　】をダウンロード

Q&A

ダミーテキストダミーテキスト
ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
ダミーテキストダミーテキスト
ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
ダミーテキストダミーテキスト
ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
ダミーテキストダミーテキスト
ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
ダミーテキストダミーテキスト
ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
ダミーテキストダミーテキスト
ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
ダミーテキストダミーテキスト
ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
ダミーテキストダミーテキスト
ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
ダミーテキストダミーテキスト
ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
ダミーテキストダミーテキスト
ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

<> html


  <div id="Q_A" class="pages">
    <div id="mainvisual">
      <h2>Q&amp;A</h2>
    </div>
    <div class="container">
      <ul class="question">
        <li><a href="#tmp1">Eng日本語混在テスト</a></li>
        <li><a href="#tmp2">ダミーテキストダミーテキスト</a></li>
        <li><a href="#tmp3">ダミーテキストダミーテキスト</a></li>
        <li><a href="#tmp4">ダミーテキストダミーテキスト</a></li>
        <li><a href="#tmp5">ダミーテキストダミーテキスト</a></li>
        <li><a href="#tmp6">ダミーテキストダミーテキスト</a></li>
        <li><a href="#tmp7">ダミーテキストダミーテキスト</a></li>
        <li><a href="#tmp8">ダミーテキストダミーテキスト</a></li>
        <li><a href="#tmp9">ダミーテキストダミーテキスト</a></li>
        <li class="two_digits"><a href="#tmp10">ダミーテキストダミーテキスト</a></li>
      </ul>

      <dl class="answer">
        <dt id="tmp1" class="wrap">ダミーテキストダミーテキスト</dt>
        <dd>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</dd>
        <dt id="tmp2" class="wrap">ダミーテキストダミーテキスト</dt>
        <dd>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</dd>
        <dt id="tmp3" class="wrap">ダミーテキストダミーテキスト</dt>
        <dd>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</dd>
        <dt id="tmp4" class="wrap">ダミーテキストダミーテキスト</dt>
        <dd>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</dd>
        <dt id="tmp5" class="wrap">ダミーテキストダミーテキスト</dt>
        <dd>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</dd>
        <dt id="tmp6" class="wrap">ダミーテキストダミーテキスト</dt>
        <dd>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</dd>
        <dt id="tmp7" class="wrap">ダミーテキストダミーテキスト</dt>
        <dd>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</dd>
        <dt id="tmp8" class="wrap">ダミーテキストダミーテキスト</dt>
        <dd>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</dd>
        <dt id="tmp9" class="wrap">ダミーテキストダミーテキスト</dt>
        <dd>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</dd>
        <dt id="tmp10" class="wrap">ダミーテキストダミーテキスト</dt>
        <dd>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</dd>
      </dl>
    </div>
  </div>

# scss

【　q_a.scss　】をダウンロード

SITE MAP

<> html


<div id="SITEMAP" class="pages">
  <div id="mainvisual">
    <h2>SITE MAP</h2>
  </div>
  <div class="container">
    <div class="inner">
      <ul class="list">
        <li>
          <h3>タイトル 1</h3>
          <h4>ダミーテキストダミーテキスト</h4>
          <a>ダミーテキストダミーテキスト</a>
          <a>ダミーテキストダミーテキスト</a>
          <h4>ダミーテキストダミーテキスト</h4>
          <a>ダミーテキストダミーテキスト</a>
          <a>ダミーテキストダミーテキスト</a>
          <h4>ダミーテキストダミーテキスト</h4>
          <a>ダミーテキストダミーテキスト</a>
          <a>ダミーテキストダミーテキスト</a>
        </li>
        <li>
          <h3>タイトル 2</h3>
          <a>ダミーテキストダミーテキスト</a>
          <a>ダミーテキストダミーテキスト</a>
          <a>ダミーテキストダミーテキスト</a>
          <a>ダミーテキストダミーテキスト</a>
          <a>ダミーテキストダミーテキスト</a>
        </li>
        <li>
          <h3>タイトル 3</h3>
          <a>ダミーテキストダミーテキスト</a>
          <a>ダミーテキストダミーテキスト</a>
          <a>ダミーテキストダミーテキスト</a>
          <a>ダミーテキストダミーテキスト</a>
          <a>ダミーテキストダミーテキスト</a>
          <a>ダミーテキストダミーテキスト</a>
          <a>ダミーテキストダミーテキスト</a>
          <a>ダミーテキストダミーテキスト</a>
        </li>
        <li>
          <h3>タイトル 4</h3>
          <a>ダミーテキストダミーテキスト</a>
          <a>ダミーテキストダミーテキスト</a>
          <a>ダミーテキストダミーテキスト</a>
          <a>ダミーテキストダミーテキスト</a>
          <a>ダミーテキストダミーテキスト</a>
        </li>
        <li>
          <h3>タイトル 5</h3>
          <a>ダミーテキストダミーテキスト</a>
          <a>ダミーテキストダミーテキスト</a>
          <a>ダミーテキストダミーテキスト</a>
        </li>
        <li>
          <h3>タイトル 6</h3>
          <a>ダミーテキストダミーテキスト</a>
          <a>ダミーテキストダミーテキスト</a>
          <a>ダミーテキストダミーテキスト</a>
          <a>ダミーテキストダミーテキスト</a>
          <a>ダミーテキストダミーテキスト</a>
          <a>ダミーテキストダミーテキスト</a>
          <a>ダミーテキストダミーテキスト</a>
          <a>ダミーテキストダミーテキスト</a>
        </li>
        <li>
          <h3>タイトル 7</h3>
          <a>ダミーテキストダミーテキスト</a>
          <a>ダミーテキストダミーテキスト</a>
          <a>ダミーテキストダミーテキスト</a>
        </li>
        <li>
          <h3>タイトル 8</h3>
          <a>ダミーテキストダミーテキスト</a>
          <a>ダミーテキストダミーテキスト</a>
          <a>ダミーテキストダミーテキスト</a>
          <a>ダミーテキストダミーテキスト</a>
          <a>ダミーテキストダミーテキスト</a>
          <a>ダミーテキストダミーテキスト</a>
          <a>ダミーテキストダミーテキスト</a>
          <a>ダミーテキストダミーテキスト</a>
        </li>
        <li>
          <h3>タイトル 9</h3>
          <a>ダミーテキストダミーテキスト</a>
          <a>ダミーテキストダミーテキスト</a>
          <a>ダミーテキストダミーテキスト</a>
          <a>ダミーテキストダミーテキスト</a>
          <a>ダミーテキストダミーテキスト</a>
        </li>
        <li>
          <h3>タイトル 10</h3>
          <a>ダミーテキストダミーテキスト</a>
          <a>ダミーテキストダミーテキスト</a>
          <a>ダミーテキストダミーテキスト</a>
        </li>
      </ul>
    </div>
  </div>
</div>

# scss

【　q_a.scss　】をダウンロード

お問い合わせ
© 2023 SITE NAME