コンポーネント集

その他18 

<div class="other-18">
    <section class="other-18__layout-container">
        <h2 class="other-18__heading">サイドバーあり</h2>
        <div class="other-18__layout-sidebar">
            <div class="other-18__content-container">
                <div class="grid">
                    <div class="card__container">
                        <div class="card">
                            <div class="card__thumb"><img src="https://picsum.photos/id/237/400/400" /></div>
                            <div class="card__body">
                                <div class="card__title">項目1</div>
                                <div class="card__text">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</div>
                            </div>
                        </div>
                    </div>
                    <div class="card__container">
                        <div class="card">
                            <div class="card__thumb"><img src="https://picsum.photos/id/237/400/400" /></div>
                            <div class="card__body">
                                <div class="card__title">項目2</div>
                                <div class="card__text">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</div>
                            </div>
                        </div>
                    </div>
                    <div class="card__container">
                        <div class="card">
                            <div class="card__thumb"><img src="https://picsum.photos/id/237/400/400" /></div>
                            <div class="card__body">
                                <div class="card__title">項目3</div>
                                <div class="card__text">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</div>
                            </div>
                        </div>
                    </div>
                    <div class="card__container">
                        <div class="card">
                            <div class="card__thumb"><img src="https://picsum.photos/id/237/400/400" /></div>
                            <div class="card__body">
                                <div class="card__title">項目4</div>
                                <div class="card__text">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</div>
                            </div>
                        </div>
                    </div>
                    <div class="card__container">
                        <div class="card">
                            <div class="card__thumb"><img src="https://picsum.photos/id/237/400/400" /></div>
                            <div class="card__body">
                                <div class="card__title">項目5</div>
                                <div class="card__text">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="other-18__sidebar-container">
                <div class="other-18__sidebar">サイドバー</div>
            </div>
        </div>
    </section>
    <section class="other-18__layout-container">
        <h2 class="other-18__heading">サイドバーなし</h2>
        <div class="other-18__layout-single">
            <div class="grid">
                <div class="card__container">
                    <div class="card">
                        <div class="card__thumb"><img src="https://picsum.photos/id/237/400/400" /></div>
                        <div class="card__body">
                            <div class="card__title">項目1</div>
                            <div class="card__text">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</div>
                        </div>
                    </div>
                </div>
                <div class="card__container">
                    <div class="card">
                        <div class="card__thumb"><img src="https://picsum.photos/id/237/400/400" /></div>
                        <div class="card__body">
                            <div class="card__title">項目2</div>
                            <div class="card__text">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</div>
                        </div>
                    </div>
                </div>
                <div class="card__container">
                    <div class="card">
                        <div class="card__thumb"><img src="https://picsum.photos/id/237/400/400" /></div>
                        <div class="card__body">
                            <div class="card__title">項目3</div>
                            <div class="card__text">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</div>
                        </div>
                    </div>
                </div>
                <div class="card__container">
                    <div class="card">
                        <div class="card__thumb"><img src="https://picsum.photos/id/237/400/400" /></div>
                        <div class="card__body">
                            <div class="card__title">項目4</div>
                            <div class="card__text">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</div>
                        </div>
                    </div>
                </div>
                <div class="card__container">
                    <div class="card">
                        <div class="card__thumb"><img src="https://picsum.photos/id/237/400/400" /></div>
                        <div class="card__body">
                            <div class="card__title">項目5</div>
                            <div class="card__text">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
 
.other-18
  section.other-18__layout-container
    h2.other-18__heading サイドバーあり
    .other-18__layout-sidebar
      .other-18__content-container
        .grid
          - for (var i = 0; i < 5; i++)
            .card__container
              .card
                .card__thumb
                  img(src='https://picsum.photos/id/237/400/400')
                .card__body
                  .card__title 項目#{i + 1}
                  .card__text テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
      .other-18__sidebar-container
        .other-18__sidebar サイドバー

  section.other-18__layout-container
    h2.other-18__heading サイドバーなし
    .other-18__layout-single
      .grid
        - for (var i = 0; i < 5; i++)
          .card__container
            .card
              .card__thumb
                img(src='https://picsum.photos/id/237/400/400')
              .card__body
                .card__title 項目#{i + 1}
                .card__text テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
 
{
  "text": "テキストが入ります。テキストが入ります。テキストが入ります。"
}
  • Content: 
    $BLOCK_NAME: '.other-18';
$GRID_BLOCK_NAME: '.grid';
$CARD_BLOCK_NAME: '.card';

// 変数
$w_tablet: 769px;

#{ $BLOCK_NAME } {
  position: relative;
  container-type: inline-size;

  &__heading {
    font-weight: bold;
    font-size: 2em;
  }

  &__layout-container {
    max-width: 1020px;
    margin: 0 auto;
    & + & {
      margin-top: 90px;
    }
  }

  &__layout-sidebar {
    display: grid;
    grid-template-columns: repeat(1, 100%);
    gap: 20px;
    // ページレイアウトのほうはcontainerよりもmediaを使った方が、ターゲットデバイスが明確になって分かりやすい？
    @container (min-width: #{ ($w_tablet + 1px) }) {
      grid-template-columns: 1fr 280px;
    }
  }

  &__content-container {
    container-type: inline-size;
  }

  &__sidebar-container {
    container-type: inline-size;
  }

  &__sidebar {
    background: #0f0;
    width: 100%;
    max-width: 480px;
    margin: auto;
    // @container (min-width: 768px) {
    // }
  }

  .grid {
    display: grid;
    grid-template-columns: repeat(1, 100%);
    gap: 20px;
    @container (min-width: 600px) {
      grid-template-columns: repeat(2, 1fr);
    }
    @container (min-width: 900px) {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  .card {
    &__container {
      container-type: inline-size;
    }

    display: flex;
    gap: 20px;
    flex-direction: column;
    background: #eee;
    padding: 20px;
    @container (min-width: 480px) {
      flex-direction: row;
    }

    &__thumb {
      max-width: 200px;
      aspect-ratio: 1 / 1;
      margin: 0 auto;
    }

    &__title {
      font-weight: bold;
      font-size: 1.2em;
    }
  }

  &__layout-single {
    container-type: inline-size;
  }
}
  • URL: /components/raw/other18/other18.scss
  • Filesystem Path: src/components/others/1_20/other18/other18.scss
  • Size: 1.7 KB