コンテンツにスキップ
Science Tokyo
デザインシステム

記事リスト／Entry list

日付情報（投稿日や開催日）を構成要素に含み、時間軸で見せるコンポーネントです。

<ul class="c-entryList">
  <li class="c-entryList__item">
    <a href="/" class="c-entryList__link">
      <div class="c-entryList__date">
        <time class="c-entryList__dateTime" datetime="2024-12-31">
          2024年12月31日
        </time>
      </div>
      <div class="c-entryList__body">
        <div class="c-entryList__text">
          エントリータイトル
          情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った時、詩が生れて、
        </div>
        <div class="c-entryList__tags">
          <span class="c-label">
            <span class="c-label__text">カテゴリ</span>
          </span>
          <span class="c-label">
            <span class="c-label__text">カテゴリ</span>
          </span>
          <span class="c-label">
            <span class="c-label__text">カテゴリ</span>
          </span>
        </div>
        <svg class="c-entryList__icon icon" aria-hidden="true" role="img">
          <use xlink:href="/assets/img/sprite.svg#chevron_right"></use>
        </svg>
      </div>
    </a>
  </li>
  <li class="c-entryList__item">
    <a href="/" class="c-entryList__link">
      <div class="c-entryList__date">
        <time class="c-entryList__dateTime" datetime="2024-12-31">
          2024年12月31日
        </time>
      </div>
      <div class="c-entryList__body">
        <div class="c-entryList__text">
          リンクテキスト「自然界はどのようにしてできているのだろう?」という基本的な原理への興味や関心をモチベーションに、法則や論理を探究するのが理学です。「自然界はどのようにして
        </div>
        <div class="c-entryList__tags">
          <span class="c-label">
            <span class="c-label__text">カテゴリ</span>
          </span>
          <span class="c-label">
            <span class="c-label__text">カテゴリ</span>
          </span>
          <span class="c-label">
            <span class="c-label__text">カテゴリ</span>
          </span>
        </div>
        <svg class="c-entryList__icon icon" aria-hidden="true" role="img">
          <use xlink:href="/assets/img/sprite.svg#chevron_right"></use>
        </svg>
      </div>
    </a>
  </li>
  <li class="c-entryList__item">
    <a href="/" class="c-entryList__link">
      <div class="c-entryList__date">
        <time class="c-entryList__dateTime" datetime="2024-12-31">
          2024年12月31日
        </time>
      </div>
      <div class="c-entryList__body">
        <div class="c-entryList__text">
          エントリータイトル
          情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。とかくに人の世は住みにくい。意地を通せば窮屈だ。
          とかくに人の世は住みにくい。意地を通せば窮屈だ。
          どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。とかくに人の世は住みにくい。意地を通せば窮屈だ。
          とかくに人の世は住みにくい。意地を通せば窮屈だ。
        </div>
        <div class="c-entryList__tags">
          <span class="c-label">
            <span class="c-label__text">カテゴリ</span>
          </span>
          <span class="c-label">
            <span class="c-label__text">カテゴリ</span>
          </span>
          <span class="c-label">
            <span class="c-label__text">カテゴリ</span>
          </span>
        </div>
        <svg class="c-entryList__icon icon" aria-hidden="true" role="img">
          <use xlink:href="/assets/img/sprite.svg#chevron_right"></use>
        </svg>
      </div>
    </a>
  </li>
</ul>

英語表示

<!-- en -->
<ul class="c-entryList">
  <li class="c-entryList__item">
    <a href="/" class="c-entryList__link">
      <div class="c-entryList__date">
        <time class="c-entryList__dateTime" datetime="2024-12-31">
          December 31, 2024
        </time>
      </div>
      <div class="c-entryList__body">
        <div class="c-entryList__text">
          Entry title text title text title text title text title text title text title text title text title text
        </div>
        <div class="c-entryList__tags">
          <span class="c-label">
            <span class="c-label__text">Category</span>
          </span>
          <span class="c-label">
            <span class="c-label__text">Category</span>
          </span>
          <span class="c-label">
            <span class="c-label__text">Category</span>
          </span>
        </div>
        <svg class="c-entryList__icon icon" aria-hidden="true" role="img">
          <use xlink:href="/assets/img/sprite.svg#chevron_right"></use>
        </svg>
      </div>
    </a>
  </li>
  <li class="c-entryList__item">
    <a href="/" class="c-entryList__link">
      <div class="c-entryList__date">
        <time class="c-entryList__dateTime" datetime="2024-12-31">
          December 31, 2024
        </time>
      </div>
      <div class="c-entryList__body">
        <div class="c-entryList__text">
          Entry title text title text title text title text title text title text title text title text title text
        </div>
        <div class="c-entryList__tags">
          <span class="c-label">
            <span class="c-label__text">Category</span>
          </span>
          <span class="c-label">
            <span class="c-label__text">Category</span>
          </span>
          <span class="c-label">
            <span class="c-label__text">Category</span>
          </span>
        </div>
        <svg class="c-entryList__icon icon" aria-hidden="true" role="img">
          <use xlink:href="/assets/img/sprite.svg#chevron_right"></use>
        </svg>
      </div>
    </a>
  </li>
  <li class="c-entryList__item">
    <a href="/" class="c-entryList__link">
      <div class="c-entryList__date">
        <time class="c-entryList__dateTime" datetime="2024-12-31">
          December 31, 2024
        </time>
      </div>
      <div class="c-entryList__body">
        <div class="c-entryList__text">
          Entry title text title text title text title text title text title text title text title text title text title text title text title text title text title text title text title text title text title text
        </div>
        <div class="c-entryList__tags">
          <span class="c-label">
            <span class="c-label__text">Category</span>
          </span>
          <span class="c-label">
            <span class="c-label__text">Category</span>
          </span>
          <span class="c-label">
            <span class="c-label__text">Category</span>
          </span>
        </div>
        <svg class="c-entryList__icon icon" aria-hidden="true" role="img">
          <use xlink:href="/assets/img/sprite.svg#chevron_right"></use>
        </svg>
      </div>
    </a>
  </li>
</ul>

原則

  • 「デフォルト」タイプは「公開日」「タイトル」「カテゴリー」で構成されています。
    • 基本的には公開日を基準に降順で表示されます。
  • 日付の表記はライティングガイドラインの章（日本語／英語）をご確認ください。
  • 「イベント」タイプは「開催日（大）」「アイキャッチ」「タイトル」「開催日（小）」「時間」「場所」「カテゴリー」で構成されています。
    • イベントの開催開始日を基準に降順で表示されます。
    • 開催日は必ず記載してください。連日の場合は開催開始日と終了日を記載してください。ただし連続しない複数開催日の記載は表現できません。

パターン

イベント

イベント情報を表示する記事リストを利用できます。

<ul class="c-entryList c-entryList--event">
  <li class="c-entryList__item">
    <a href="" class="c-entryList__link">
      <div class="c-entryList__schedule">
        <time class="c-entryList__scheduleStart" datetime="2025-01-01">
          <span class="c-entryList__scheduleYear">2025年</span>
          1月1日（月）
        </time>
      </div>
      <div class="c-entryList__image">
        <div class="c-image">
          <picture>
            <img src="/images/sample.webp" width="800" height="450" alt="画像のalt" />
          </picture>
        </div>
      </div>
      <div class="c-entryList__data">
        <div class="c-entryList__title">
          リンクテキスト「自然界はどのようにしてできているのだろう?」という
        </div>
        <div class="c-entryList__period">
          <svg class="icon c-entryList__dataIcon" role="img">
            <use xlink:href="/assets/img/sprite.svg#calendar"></use>
          </svg>
          <time class="c-entryList__periodStart" datetime="2025-01-01">
            2025年1月1日（月）
          </time>
        </div>
        <div class="c-entryList__time">
          <svg class="icon c-entryList__dataIcon" role="img">
            <use xlink:href="/assets/img/sprite.svg#clock"></use>
          </svg>
          <time class="c-entryList__timeStart" datetime="12:00">12:00</time>
          <time class="c-entryList__timeEnd" datetime="24:00">24:00</time>
        </div>
        <p class="c-entryList__venue">
          <svg class="icon c-entryList__dataIcon" role="img">
            <use xlink:href="/assets/img/sprite.svg#location"></use>
          </svg>
          [ダミー]大岡山キャンパス
        </p>
        <div class="c-entryList__tags">
          <span class="c-label">
            <span class="c-label__text">カテゴリ</span>
          </span>
          <span class="c-label">
            <span class="c-label__text">カテゴリ</span>
          </span>
          <span class="c-label">
            <span class="c-label__text">カテゴリ</span>
          </span>
        </div>
        <svg class="c-entryList__icon icon" aria-hidden="true" role="img">
          <use xlink:href="/assets/img/sprite.svg#chevron_right"></use>
        </svg>
      </div>
    </a>
  </li>
  <li class="c-entryList__item">
    <a href="" class="c-entryList__link">
      <div class="c-entryList__schedule">
        <time class="c-entryList__scheduleStart" datetime="2025-01-01">
          <span class="c-entryList__scheduleYear">2025年</span>
          1月1日（月）
        </time>
        <time class="c-entryList__scheduleEnd" datetime="2025-12-31">
          <span class="c-entryList__scheduleYear">2025年</span>
          12月31日（火）
        </time>
      </div>
      <div class="c-entryList__image">
        <div class="c-image">
          <picture>
            <img src="/images/sample.webp" width="800" height="450" alt="画像のalt" />
          </picture>
        </div>
      </div>
      <div class="c-entryList__data">
        <div class="c-entryList__title">
          リンクテキスト「自然界はどのようにしてできているのだろう?」という
        </div>
        <div class="c-entryList__period">
          <svg class="icon c-entryList__dataIcon" role="img">
            <use xlink:href="/assets/img/sprite.svg#calendar"></use>
          </svg>
          <time class="c-entryList__periodStart" datetime="2025-01-01">
            2025年1月1日（月）
          </time>
          〜
          <time class="c-entryList__periodEnd" datetime="2025-12-31">
            2025年12月31日（火）
          </time>
        </div>
        <div class="c-entryList__time">
          <svg class="icon c-entryList__dataIcon" role="img">
            <use xlink:href="/assets/img/sprite.svg#clock"></use>
          </svg>
          <time class="c-entryList__timeStart" datetime="12:00">12:00</time>
          <time class="c-entryList__timeEnd" datetime=""></time>
        </div>
        <p class="c-entryList__venue">
          <svg class="icon c-entryList__dataIcon" role="img">
            <use xlink:href="/assets/img/sprite.svg#location"></use>
          </svg>
          [ダミー]大岡山キャンパス
        </p>
        <div class="c-entryList__tags">
          <span class="c-label">
            <span class="c-label__text">カテゴリ</span>
          </span>
          <span class="c-label">
            <span class="c-label__text">カテゴリ</span>
          </span>
          <span class="c-label">
            <span class="c-label__text">カテゴリ</span>
          </span>
        </div>
        <svg class="c-entryList__icon icon" aria-hidden="true" role="img">
          <use xlink:href="/assets/img/sprite.svg#chevron_right"></use>
        </svg>
      </div>
    </a>
  </li>
</ul>

英語表示

<!-- en -->
<ul class="c-entryList c-entryList--event">
  <li class="c-entryList__item">
    <a href="" class="c-entryList__link">
      <div class="c-entryList__schedule">
        <time class="c-entryList__scheduleStart" datetime="2025-01-01">
          Mon, Jan. 1
          <span class="c-entryList__scheduleYear">2025</span>
        </time>
      </div>
      <div class="c-entryList__image">
        <div class="c-image">
          <picture>
            <img src="/images/sample.webp" width="800" height="450" alt="画像のalt" />
          </picture>
        </div>
      </div>
      <div class="c-entryList__data">
        <div class="c-entryList__title">
          Event title text
        </div>
        <div class="c-entryList__period">
          <svg class="icon c-entryList__dataIcon" role="img">
            <use xlink:href="/assets/img/sprite.svg#calendar"></use>
          </svg>
          <time class="c-entryList__periodStart" datetime="2025-01-01">
            Mon, Jan. 1, 2025
          </time>
        </div>
        <div class="c-entryList__time">
          <svg class="icon c-entryList__dataIcon" role="img">
            <use xlink:href="/assets/img/sprite.svg#clock"></use>
          </svg>
          <time class="c-entryList__timeStart" datetime="12:00">12:00</time>
          <time class="c-entryList__timeEnd" datetime="24:00">24:00</time>
        </div>
        <p class="c-entryList__venue">
          <svg class="icon c-entryList__dataIcon" role="img">
            <use xlink:href="/assets/img/sprite.svg#location"></use>
          </svg>
          XXXX Science Tokyo Ookayama Campus
        </p>
        <div class="c-entryList__tags">
          <span class="c-label">
            <span class="c-label__text">Category</span>
          </span>
          <span class="c-label">
            <span class="c-label__text">Category</span>
          </span>
          <span class="c-label">
            <span class="c-label__text">Category</span>
          </span>
        </div>
        <svg class="c-entryList__icon icon" aria-hidden="true" role="img">
          <use xlink:href="/assets/img/sprite.svg#chevron_right"></use>
        </svg>
      </div>
    </a>
  </li>
  <li class="c-entryList__item">
    <a href="" class="c-entryList__link">
      <div class="c-entryList__schedule">
        <time class="c-entryList__scheduleStart" datetime="2025-01-01">
          Mon, Jan. 1
          <span class="c-entryList__scheduleYear">2025</span>
        </time>
        <time class="c-entryList__scheduleEnd" datetime="2025-12-31">
          Tue, Dec. 31
          <span class="c-entryList__scheduleYear">2025</span>
        </time>
      </div>
      <div class="c-entryList__image">
        <div class="c-image">
          <picture>
            <img src="/images/sample.webp" width="800" height="450" alt="画像のalt" />
          </picture>
        </div>
      </div>
      <div class="c-entryList__data">
        <div class="c-entryList__title">
          Event title text title text title text title text title text title text
        </div>
        <div class="c-entryList__period">
          <svg class="icon c-entryList__dataIcon" role="img">
            <use xlink:href="/assets/img/sprite.svg#calendar"></use>
          </svg>
          <time class="c-entryList__periodStart" datetime="2025-01-01">
            Mon, Jan. 1, 2025
          </time>
          -
          <time class="c-entryList__periodEnd" datetime="2025-12-31">
            Tue, Dec. 31, 2025
          </time>
        </div>
        <div class="c-entryList__time">
          <svg class="icon c-entryList__dataIcon" role="img">
            <use xlink:href="/assets/img/sprite.svg#clock"></use>
          </svg>
          <time class="c-entryList__timeStart" datetime="12:00">12:00</time>
          <time class="c-entryList__timeEnd" datetime=""></time>
        </div>
        <p class="c-entryList__venue">
          <svg class="icon c-entryList__dataIcon" role="img">
            <use xlink:href="/assets/img/sprite.svg#location"></use>
          </svg>
          XXXX Science Tokyo Ookayama Campus
        </p>
        <div class="c-entryList__tags">
          <span class="c-label">
            <span class="c-label__text">Category</span>
          </span>
          <span class="c-label">
            <span class="c-label__text">Category</span>
          </span>
          <span class="c-label">
            <span class="c-label__text">Category</span>
          </span>
        </div>
        <svg class="c-entryList__icon icon" aria-hidden="true" role="img">
          <use xlink:href="/assets/img/sprite.svg#chevron_right"></use>
        </svg>
      </div>
    </a>
  </li>
</ul>