レスポンシブ表の設計

Oracle Content Managementでは、段落コンポーネント内にレスポンシブ表のサンプルCSSが用意されており、これを使用することで、モバイル・デバイスでは行データが積み上げられて表示されます。

レスポンシブ表は、画面のサイズに応じて、コンテンツが効果的に表示されるよう表を調整します。たとえば、5列の表は、Webページでは横方向で問題なく表示されますが、スマートフォンで表示した場合には、積み上げた方がデータは見やすくなります。レスポンシブ表が適切に動作するには、ヘッダー行が必要なことに注意してください。横と縦に表示されたWebサイト

生成された次のHTMLでは、表の各セルに、列ヘッダーのテキストと同じ値のdata-label属性が追加されています。

<thead>
    <tr>
        <th scope="col">ACCOUNT</th>
        <th scope="col">DUE DATE</th>
        <th scope="col">AMOUNT</th>
        <th scope="col">MINIMUM</th>
        <th scope="col">PERIOD</th>
    </tr>
</thead>

<tbody>
    <tr>
        <td data-label="ACCOUNT">Visa</td>
        <td data-label="DUE DATE">04/16/2020</td>
        <td data-label="AMOUNT">$3,090</td>
        <td data-label="PERIOD">03/09/2020 - 04/08/2020</td>
    </tr>

各セルにその属性があると、次のCSSルールを適用した場合には、TDがそれぞれの上に積み上げられます。

  .scs-paragraph:not(.scs-paragraph-edit) table td {
    border-bottom: 1px solid #ddd;
    display: block;
    text-align: right;
  }

  .scs-paragraph:not(.scs-paragraph-edit) table td::before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
  }

次のメディア・ルールにより、画面サイズの問合せが行われ、画面サイズが767ピクセル未満の場合にのみ有効になります:

@media screen and (max-width: 767px) {

cssを使用して、挿入された表をレスポンシブにすることができるコード・サンプルは、提供されているStarterThemeのデフォルトのdesign.cssにあります。StarterThemeからサイトを作成する場合、段落スロットに挿入した表は、デフォルトでレスポンシブになります。表を挿入するには:

Oracle Content Managementでサイトを開き、「編集」モードに切り替えます。
新しい更新を作成するか、既存の更新を選択して編集します。
新しい段落コンポーネントをページにドラッグして、表を挿入する場所をクリックするか、表を挿入する既存の段落をクリックします。
リッチ・テキスト・ツールバーで、をクリックして、表プロパティを設定します。ヘッダーには必ず1行目を選択し、使用が予測される最小の画面で効果的に機能するよう、表の幅を調整します。たとえば、スマートフォンでのサイトの表示が予想される場合、デフォルトの幅である767ピクセルは、スマートフォンの画面で完全に表示するには、積み上げられたとしても幅が広すぎます。表の幅を300ピクセルなど、より小さいサイズに設定するか、幅を100%に設定する必要があります。

完了したら、「表示」モードに切り替えて、画面の幅が767ピクセルより狭い表示オプションを選択し、結果をプレビューします。編集モードでは表がレスポンシブに動作しないため、表示モードにする必要があります。

表示モードのサイトのプレビュー

別のテーマからサイトを作成する際にレスポンシブ表を使用する場合は、StarterThemeのdesign.cssから、使用するテーマのdesign.cssファイルにコードをコピーする必要があります。

StarterThemeのdesign.cssからコードをコピーするには、Oracle Content Managementのサイド・ナビゲーションで「開発者」をクリックします。
「すべてのテーマの表示」をクリックします。
StarterThemeを選択し、「開く」をクリックします。
フォルダを開く設計をクリックし、「デフォルト」をクリックします。
StarterThemeからdesign.cssファイルを選択し、「ダウンロード」をクリックします。
テキスト・エディタでファイルを開き、「An example CSS of how to render a table responsively」というコメントで始まるファイルのセクションを探します。

次のコメントまでのコードを選択してコピーします。

/**
 * An example CSS of how to render a table responsively.
 * It enables stacking of row data on mobile devices.
 * Only do this for view mode (not for edit mode).
 *
 * On each cell rendered, it adds a user-defined attribute 
 * 'data-label' with value matching the column header text.
 */
 @media screen and (max-width: 767px) {
  .scs-paragraph:not(.scs-paragraph-edit) table {
    border: 0;
  }

  .scs-paragraph:not(.scs-paragraph-edit) table caption {
    font-size: 1.3em;
  }

  .scs-paragraph:not(.scs-paragraph-edit) table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }

  .scs-paragraph:not(.scs-paragraph-edit) table tr {
    border-bottom: 3px solid #ddd;
    display: block;
    margin-bottom: .625em;
  }

  .scs-paragraph:not(.scs-paragraph-edit) table td {
    border-bottom: 1px solid #ddd;
    display: block;
    text-align: right;
  }

  .scs-paragraph:not(.scs-paragraph-edit) table td::before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
  }

  .scs-paragraph:not(.scs-paragraph-edit) table td:last-child {
    border-bottom: 0;
  }
}

編集するテンプレートのdesign.cssファイルをダウンロードするステップを繰り返し、テンプレートを開いて、コピーしたコードをファイルに貼り付けます。
変更を保存し、編集したdesign.cssファイルを、変更するテーマに新しいリビジョンとしてアップロードします。