記事コンテンツ／Article contents

画像とテキスト（キャッチコピー、文章、インタビュー形式の文章）、リンクを組み合わせたコンポーネントです。


<div class="c-articleContents">
  <div class="grid grid--justifyCenter grid--dirRowReverse">
    <div class="grid__col grid__col--span6 sm:grid__col--span8">
      <div class="c-articleContents__body">
        <p class="c-paragraph c-paragraph--copyM c-articleContents__copy">
          キャッチコピーが入ります。キャッチコピーが入ります。キャッチコピーが入ります。
        </p>
        <p class="c-paragraph c-articleContents__text">
          テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
        </p>
        <p class="c-paragraph c-articleContents__link">
          <a href="/" class="c-link c-utilityLink">
            リンクテキスト
            <svg
              class="c-link__icon c-link__icon--right icon"
              aria-hidden="true"
              role="img"
            >
              <use xlink:href="/assets/img/sprite.svg#chevron_right"></use>
            </svg>
          </a>
        </p>
        <p class="c-paragraph c-articleContents__link">
          <a href="/" class="c-link c-utilityLink">
            リンクテキスト
            <svg
              class="c-link__icon c-link__icon--right icon"
              aria-hidden="true"
              role="img"
            >
              <use xlink:href="/assets/img/sprite.svg#chevron_right"></use>
            </svg>
          </a>
        </p>
      </div>
    </div>
    <div class="grid__col grid__col--span6 sm:grid__col--span8">
      <div class="c-articleContents__image">
        <figure class="c-image c-image--fullWidth">
          <img
            src="/images/sample.webp"
            width="720"
            height="600"
            alt=""
          />
          <figcaption class="c-image__caption">©Gazou N Caption</figcaption>
        </figure>
      </div>
    </div>
  </div>
</div>

原則

構成要素（キャッチコピー、画像、本文、リンクテキスト）は必要に応じて表示・非表示を選択します。
画像を利用する場合、配置の左右とサイズの大小をそれぞれ指定します。
sm時の画像サイズは、大小の選択に関わらず、コンポーネント内で全幅に表示します。

パターン

画像位置の変更

画像の位置を左右どちらかに変更することができます。


<div class="c-articleContents">
  <div class="grid grid--justifyCenter grid--dirRow">
    <div class="grid__col grid__col--span6 sm:grid__col--span8">
      <div class="c-articleContents__body">
        <p class="c-paragraph c-paragraph--copyM c-articleContents__copy">
          キャッチコピーが入ります。キャッチコピーが入ります。キャッチコピーが入ります。
        </p>
        <p class="c-paragraph c-articleContents__text">
          テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
        </p>
        <p class="c-paragraph c-articleContents__link">
          <a href="/" class="c-link c-utilityLink">
            リンクテキスト
            <svg
              class="c-link__icon c-link__icon--right icon"
              aria-hidden="true"
              role="img"
            >
              <use xlink:href="/assets/img/sprite.svg#chevron_right"></use>
            </svg>
          </a>
        </p>
        <p class="c-paragraph c-articleContents__link">
          <a href="/" class="c-link c-utilityLink">
            リンクテキスト
            <svg
              class="c-link__icon c-link__icon--right icon"
              aria-hidden="true"
              role="img"
            >
              <use xlink:href="/assets/img/sprite.svg#chevron_right"></use>
            </svg>
          </a>
        </p>
      </div>
    </div>
    <div class="grid__col grid__col--span6 sm:grid__col--span8">
      <div class="c-articleContents__image">
        <figure class="c-image c-image--fullWidth">
          <img
            src="/images/sample.webp"
            width="720"
            height="600"
            alt=""
          />
          <figcaption class="c-image__caption">©Gazou N Caption</figcaption>
        </figure>
      </div>
    </div>
  </div>
</div>

画像サイズの変更

画像の表示サイズを小さくすることができます。

<div class="c-articleContents">
  <div class="grid grid--justifyCenter grid--dirRowReverse">
    <div class="grid__col grid__col--span8 sm:grid__col--span8">
      <div class="c-articleContents__body">
        <p class="c-paragraph c-paragraph--copyM c-articleContents__copy">
          キャッチコピーが入ります。キャッチコピーが入ります。キャッチコピーが入ります。
        </p>
        <p class="c-paragraph c-articleContents__text">
          テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
        </p>
        <p class="c-paragraph c-articleContents__link">
          <a href="/" class="c-link c-utilityLink">
            リンクテキスト
            <svg
              class="c-link__icon c-link__icon--right icon"
              aria-hidden="true"
              role="img"
            >
              <use xlink:href="/assets/img/sprite.svg#chevron_right"></use>
            </svg>
          </a>
        </p>
        <p class="c-paragraph c-articleContents__link">
          <a href="/" class="c-link c-utilityLink">
            リンクテキスト
            <svg
              class="c-link__icon c-link__icon--right icon"
              aria-hidden="true"
              role="img"
            >
              <use xlink:href="/assets/img/sprite.svg#chevron_right"></use>
            </svg>
          </a>
        </p>
      </div>
    </div>
    <div class="grid__col grid__col--span4 sm:grid__col--span8">
      <div class="c-articleContents__image">
        <figure class="c-image c-image--fullWidth">
          <img
            src="/images/sample.webp"
            width="720"
            height="600"
            alt=""
          />
          <figcaption class="c-image__caption">©Gazou N Caption</figcaption>
        </figure>
      </div>
    </div>
  </div>
</div>

インタビュー

インタビュー記事形式のコンテンツを表示することができます。


<div class="c-articleContents">
  <div class="grid grid--justifyCenter grid--dirRowReverse">
    <div class="grid__col grid__col--span6 sm:grid__col--span8">
      <div class="c-articleContents__body">
        <p class="c-paragraph c-paragraph--copyM c-articleContents__copy">
          キャッチコピーが入りますキャッチコピーが入りますキャッチコピーが入ります。
        </p>
        <div class="c-articleContents__conversations">
          <p class="c-articleContents__conversation">
            <span class="c-articleContents__conversationName">佐藤</span>
            <span class="c-articleContents__conversationText">
              工学は、人類を幸せにするための枠組である「文明」に貢献する学問です。工学院は、機械系、システム制御系、電気電子系、情報通信系、経営工学系の5つの系と、その先の大学院課程からなり、
            </span>
          </p>
          <p class="c-articleContents__conversation">
            <span class="c-articleContents__conversationName">林</span>
            <span class="c-articleContents__conversationText">
              工学は、人類を幸せにするための枠組である「文明」に貢献する学問です。工学院は、機械系、システム制御系、電気電子系、情報通信系、経営工学系の5つの系と、その先の大学院課程からなり、
            </span>
          </p>
          <p class="c-articleContents__conversation">
            <span class="c-articleContents__conversationName">五十嵐</span>
            <span class="c-articleContents__conversationText">
              工学は、人類を幸せにするための枠組である「文明」に貢献する学問です。工学院は、機械系、システム制御系、電気電子系、情報通信系、経営工学系の5つの系と、その先の大学院課程からなり、
            </span>
          </p>
        </div>
        <p class="c-paragraph c-articleContents__link">
          <a target="_blank" href="/" class="c-link c-utilityLink">
            リンクテキスト

            <svg
              class="c-link__icon c-link__icon--external icon"
              role="img"
              aria-label="新しいウインドウで開く"
            >
              <use xlink:href="/assets/img/sprite.svg#new_window"></use>
            </svg>
          </a>
        </p>
        <p class="c-paragraph c-articleContents__link">
          <a href="/" class="c-link c-utilityLink">
            リンクテキスト
            <svg
              class="c-link__icon c-link__icon--right icon"
              aria-hidden="true"
              role="img"
            >
              <use xlink:href="/assets/img/sprite.svg#chevron_right"></use>
            </svg>
          </a>
        </p>
      </div>
    </div>
    <div class="grid__col grid__col--span6 sm:grid__col--span8">
      <div class="c-articleContents__image">
        <figure class="c-image c-image--fullWidth">
          <img
            src="/images/sample.webp"
            width="720"
            height="600"
            alt=""
          />
          <figcaption class="c-image__caption">©Gazou N Caption</figcaption>
        </figure>
      </div>
    </div>
  </div>
</div>