画像／Image

画像を表示するためのコンポーネントです。
画像はコンポーネントとして定義されますが、他のコンポーネント内に挿入して1要素として扱うことも可能です。


<div class="c-image">
  <img src="/images/sample.webp" width="960" height="540" alt="Placeholder Image" />
</div>

原則

使用する画像は以下に従う必要があります。

縦横比

画像の縦横比は16:9を推奨しています。

16:9のサムネイル画像のイメージ画像

ステータス

画像にHoverを設定する場合は、表示領域内で縦横中央を基点に5%拡大されます。


<a href="/">
  <div class="c-image">
    <img src="/images/sample.webp" width="960" height="540" alt="Placeholder Image" />
  </div>
</a>

キャプション

キャプションを設定する場合は、画像の左下に表示させることを標準としています。


<figure class="c-image">
  <img src="/images/sample.webp" width="960" height="540" alt="" />
  <figcaption class="c-image__caption">Placeholder Image</figcaption>
</figure>

パターン

表示サイズ

表示サイズの指定が可能です。

Sサイズ

<figure class="c-image c-image--sizeS">
  <img src="/images/sample.webp" width="960" height="540" alt="" />
  <figcaption class="c-image__caption">Placeholder Image</figcaption>
</figure>

Mサイズ


<figure class="c-image c-image--sizeM">
  <img src="/images/sample.webp" width="960" height="540" alt="" />
  <figcaption class="c-image__caption">Placeholder Image</figcaption>
</figure>

Lサイズ


<figure class="c-image c-image--sizeL">
  <img src="/images/sample.webp" width="960" height="540" alt="" />
  <figcaption class="c-image__caption">Placeholder Image</figcaption>
</figure>

複数表示

複数の画像を並列で表示する場合に、カラム数を指定することが可能です。

2カラム

<div class="c-imageGroup">
  <div class="grid grid--cols2 sm:grid--cols1">
    <div class="grid__col">
      <figure class="c-image">
        <img src="/images/sample.webp" width="960" height="540" alt="" />
        <figcaption class="c-image__caption">Placeholder Image</figcaption>
      </figure>
    </div>
    <div class="grid__col">
      <figure class="c-image">
        <img src="/images/sample.webp" width="960" height="540" alt="" />
        <figcaption class="c-image__caption">Placeholder Image</figcaption>
      </figure>
    </div>
  </div>
</div>

3カラム

<div class="c-imageGroup">
  <div class="grid grid--cols3 sm:grid--cols1">
    <div class="grid__col">
      <figure class="c-image">
        <img src="/images/sample.webp" width="960" height="540" alt="" />
        <figcaption class="c-image__caption">Placeholder Image</figcaption>
      </figure>
    </div>
    <div class="grid__col">
      <figure class="c-image">
        <img src="/images/sample.webp" width="960" height="540" alt="" />
        <figcaption class="c-image__caption">Placeholder Image</figcaption>
      </figure>
    </div>
    <div class="grid__col">
      <figure class="c-image">
        <img src="/images/sample.webp" width="960" height="540" alt="" />
        <figcaption class="c-image__caption">Placeholder Image</figcaption>
      </figure>
    </div>
  </div>
</div>

4カラム

<div class="c-imageGroup">
  <div class="grid grid--cols4 sm:grid--cols2">
    <div class="grid__col">
      <figure class="c-image">
        <img src="/images/sample.webp" width="960" height="540" alt="" />
        <figcaption class="c-image__caption">Placeholder Image</figcaption>
      </figure>
    </div>
    <div class="grid__col">
      <figure class="c-image">
        <img src="/images/sample.webp" width="960" height="540" alt="" />
        <figcaption class="c-image__caption">Placeholder Image</figcaption>
      </figure>
    </div>
    <div class="grid__col">
      <figure class="c-image">
        <img src="/images/sample.webp" width="960" height="540" alt="" />
        <figcaption class="c-image__caption">Placeholder Image</figcaption>
      </figure>
    </div>
    <div class="grid__col">
      <figure class="c-image">
        <img src="/images/sample.webp" width="960" height="540" alt="" />
        <figcaption class="c-image__caption">Placeholder Image</figcaption>
      </figure>
    </div>
  </div>
</div>