バナー／Banner

画像のみで構成されたリンクバナーを表示するコンポーネントです。


<div class="c-banner">
  <div class="grid grid--cols1 sm:grid--cols1">
    <div class="grid__col">
      <div class="c-banner__item">
        <a href="/" class="c-banner__link">
          <div class="c-image">
            <picture>
              <img
                src="/images/sample.webp"
                width="1600"
                height="900"
                alt="バナー画像"
              />
            </picture>
          </div>
        </a>
      </div>
    </div>
  </div>
</div>

原則

1カラムから4カラムまで選択可能です。
sm時は1カラムで、複数カラムの場合は縦積みで表示します。
Science TokyoのWebサイトでは、基本的には、アイキャッチ等にテキスト表現を積極的に入れることを推奨しておりません。ビジュアルガイドラインで推奨対応を確認ください。
Science TokyoのWebサイトでは、スクリーンリーダー利用者に向けた代替テキスト（alt）も意識して設定してください。ウェブアクセシビリティサポートブックで推奨対応を確認ください。

パターン

カラム指定

カラム数を指定することが可能です。

2カラム

<div class="c-banner">
  <div class="grid grid--cols2 sm:grid--cols1">
    <div class="grid__col">
      <div class="c-banner__item">
        <a href="/" class="c-banner__link">
          <div class="c-image">
            <picture>
              <img
                src="/images/sample.webp"
                width="1600"
                height="900"
                alt="バナー画像"
              />
            </picture>
          </div>
        </a>
      </div>
    </div>
    <div class="grid__col">
      <div class="c-banner__item">
        <a href="/" class="c-banner__link">
          <div class="c-image">
            <picture>
              <img
                src="/images/sample.webp"
                width="1600"
                height="900"
                alt="バナー画像"
              />
            </picture>
          </div>
        </a>
      </div>
    </div>
  </div>
</div>

3カラム

<div class="c-banner">
  <div class="grid grid--cols3 sm:grid--cols1">
    <div class="grid__col">
      <div class="c-banner__item">
        <a href="/" class="c-banner__link">
          <div class="c-image">
            <picture>
              <img
                src="/images/sample.webp"
                width="1600"
                height="900"
                alt="バナー画像"
              />
            </picture>
          </div>
        </a>
      </div>
    </div>
    <div class="grid__col">
      <div class="c-banner__item">
        <a href="/" class="c-banner__link">
          <div class="c-image">
            <picture>
              <img
                src="/images/sample.webp"
                width="1600"
                height="900"
                alt="バナー画像"
              />
            </picture>
          </div>
        </a>
      </div>
    </div>
    <div class="grid__col">
      <div class="c-banner__item">
        <a href="/" class="c-banner__link">
          <div class="c-image">
            <picture>
              <img
                src="/images/sample.webp"
                width="1600"
                height="900"
                alt="バナー画像"
              />
            </picture>
          </div>
        </a>
      </div>
    </div>
  </div>
</div>

4カラム

<div class="c-banner">
  <div class="grid grid--cols4 sm:grid--cols1">
    <div class="grid__col">
      <div class="c-banner__item">
        <a href="/" class="c-banner__link">
          <div class="c-image">
            <picture>
              <img
                src="/images/sample.webp"
                width="1600"
                height="900"
                alt="バナー画像"
              />
            </picture>
          </div>
        </a>
      </div>
    </div>

    <div class="grid__col">
      <div class="c-banner__item">
        <a href="/" class="c-banner__link">
          <div class="c-image">
            <picture>
              <img
                src="/images/sample.webp"
                width="1600"
                height="900"
                alt="バナー画像"
              />
            </picture>
          </div>
        </a>
      </div>
    </div>

    <div class="grid__col">
      <div class="c-banner__item">
        <a href="/" class="c-banner__link">
          <div class="c-image">
            <picture>
              <img
                src="/images/sample.webp"
                width="1600"
                height="900"
                alt="バナー画像"
              />
            </picture>
          </div>
        </a>
      </div>
    </div>

    <div class="grid__col">
      <div class="c-banner__item">
        <a href="/" class="c-banner__link">
          <div class="c-image">
            <picture>
              <img
                src="/images/sample.webp"
                width="1600"
                height="900"
                alt="バナー画像"
              />
            </picture>
          </div>
        </a>
      </div>
    </div>
  </div>
</div>