レスポンシブな表設計

Oracle Content Managementは、モバイル・デバイスでの行データのスタックを可能にする、段落コンポーネント内のレスポンシブ表のCSSの例を提供します。

レスポンシブな表では、画面サイズに依存しているコンテンツが効果的に表示されるように表を調整します。たとえば、5列の表がwebページ上で水平に表示される場合がありますが、電話で表示すると、データは積み重ねて表示されることがあります。応答表では、正しく動作するためにヘッダー行が必要であることに注意してください。水平および垂直方向に表示されたWebサイト

次のHTMLが生成されました。各表セルには、列ヘッダー・テキストに一致する値とともにデータ・ラベル属性が追加されています。

<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でサイトを開き、「編集」モードに切り替えます。
新しい更新を作成するか、変更する既存の更新を選択します。
ページに新しい段落コンポーネントをドラッグして、表を挿入する場所をクリックするか、表を挿入する既存の段落をクリックします。
リッチ・テキスト・ツールバーで、をクリックし、表プロパティを設定します。必ず最初の行をヘッダーとして選択し、使用される最小画面で効果的に作業するよう表の幅を調整してください。たとえば、電話でサイトを表示する予定がある場合、電話の上に完全に表示するには、767ピクセルというデフォルトの幅が大きすぎる可能性があります。表の幅を300ピクセルなどの小さいサイズに設定したり、幅を100%に設定したりする場合。

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

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

別のテーマからサイトを構築する際に応答性表を使用する場合は、StarterTheme design.cssから使用しているテーマのdesign.cssファイルにコードをコピーする必要があります。

StarterTheme design.cssからコードをコピーするには、Oracle Content Managementのサイド・ナビゲーションで「開発者」をクリックします。
「すべてのテーマを表示」をクリックします。
StarterThemeを選択し、「オープン」をクリックします。
設計をクリックしてフォルダを開き、「デフォルト」をクリックします。
StarterThemeからdesign.cssファイルを選択し、「ダウンロード」をクリックします。
テキスト・エディタでファイルを開き、コメント「表をレスポンシブにレンダリングする方法のCSSの例」から始まるファイルのセクションを特定します。

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

/**
 * 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ファイルを新規リビジョンとして変更したテーマにアップロードします。