異なる画面サイズのコンテナのフォーマット

イントロダクション

このチュートリアルでは、Oracle JETヘルパー・クラスを使用して様々な画面サイズをサポートするようにOracle JET Webアプリケーションをカスタマイズする方法を学習します。

Oracle JETヘルパー・クラスを使用して、様々な画面サイズの条件を設定できます。フレックス・レイアウトでは、コンテナ内のアイテムはコンテナ・スペースを埋めるために増減します。Oracle JETは、小画面サイズ、中画面サイズ、大画面サイズおよび超大画面サイズ用のスタイル・クラスを提供します。コンテンツに割り当てられる最小画面幅は、選択した画面サイズに対してコンテンツで使用する1から12の論理列数を指定することで設定できます。条件にキーワードonlyを指定する際に画面サイズを選択した場合、条件はその画面サイズにのみ適用されます。画面サイズを選択して大きい画面サイズ条件を省略した場合、条件は選択した画面サイズと、それ以降の大きい画面サイズすべてに適用されます。アプリケーションでヘルパー・クラスを使用することで、テキストおよび要素の表示および配置を制御し、パネルの周りのパディングをカスタマイズし、様々な画面サイズの列を設定できます。

画面サイズは12列に論理的に分割されます

図Screen-sizes.pngの説明

目的

このチュートリアルでは、Oracle JET Webアプリケーションにヘルパー・クラスを追加して、テキストの位置合せの指定、パネルへのパディングの追加、様々な画面サイズの列の設定を行います。

前提条件

タスク1:コンテンツ連携のヘルパー・クラスの追加

div要素内の様々な画面サイズにヘルパー・クラスを指定して、Oracle JET Webアプリケーションのレイアウト内のコンテンツの配置を変更します。

  1. Oracle JETクックブックを開き、メニュー・バーの「フレームワーク」をクリックします。次に、「CSSユーティリティ」をクリックし、「レイアウト」をクリックして、サイドバーの「テキスト終了」デモを選択します。

  2. テキスト終了のOracle JETクックブックのデモで、oj-sm-only-text-align-endスタイル・クラスを実装して、テキスト・コンテンツを小さな画面の末尾に位置づける方法を学習します。小さい画面をデモするには、「電話ポートレート」アイコンをクリックし、「Sign end」のレスポンシブ動作を表示します。

  3. JET_Web_Application/src/ts/viewsディレクトリに移動し、エディタでdashboard.htmlファイルを開きます。

  4. 「アクティビティ」見出しの前にid="activitiesContainer"が含まれるdiv要素を検索し、oj-sm-only-text-align-end Oracle JETレスポンシブ・ヘルパー・スタイル・クラスを追加します。

    <!-- The responsive helper style class aligns the Activities container text to the
 end of the screen when the screen size is small -->
<div id="activitiesContainer" class="oj-flex-item oj-bg-info-30 oj-sm-only-text-align-end">
  <h3 id="activitiesHeader">Activities</h3>

    oj-sm-only-text-align-endスタイル・クラスは、画面サイズが小さい場合にのみ、コンテナ内のコンテンツを画面幅の末尾に揃えます。

  5. dashboard.htmlファイルを保存します。

    コードはcontent-alignment-dDashboard-html.txtのようになります。

タスク2:パディング用のヘルパー・クラスの追加

Oracle JETレスポンシブ・スペース・スタイル・クラスを使用して、コンテンツにパディングを追加します。親div要素にレスポンシブ・スペース・クラスを指定すると、パディングはその親のすべての子div要素に適用されます。

  1. id="parentContainer2"が含まれるdiv要素を検索し、oj-lg-padding-pad-6x Oracle JETレスポンシブ・スペーシング・スタイル・クラスを追加します。

    <!-- The style class is specified in the parent div element -->
<div id="parentContainer2" class="oj-flex oj-flex-item oj-panel oj-bg-danger-30 oj-lg-padding-6x">

  2. dashboard.htmlファイルを保存します。コードはpadding-dDashboard-html.txtのようになります。

タスク3:様々な画面サイズの列の設定

Oracle JET Webアプリケーションで、div要素にサイズ設定スタイル・クラスを指定します。これらのOracle JETスタイル・クラスでは、指定した画面サイズに割り当てられる最小列幅を設定できます。

  1. 「アクティビティ」見出しの前にid="activitiesContainer"が含まれるdiv要素を検索し、様々な画面サイズの最小列数を指定するスタイル・クラスを追加します。

    <!-- The oj-md-4 and oj-sm-12 style classes specify the column width for small and medium screen sizes -->
<div id="activitiesContainer" class="oj-flex-item oj-bg-info-30 oj-sm-only-text-align-end oj-md-4 oj-sm-12">
  <h3 id="activitiesHeader">Activities</h3>

    スタイル・クラスoj-sm-12では、divコンテナ12列が小さい画面に幅広になり、oj-md-4では、中または上の画面サイズの場合にdivコンテナが4列を幅にします。

  2. parentContainer2、activityItemsContainerおよびitemDetailsContainerの値を持つid属性を持つ「アイテムの詳細」見出しを囲むdiv要素を見つけます。次に、次のスタイル・クラスを追加して、様々な画面サイズの最小列幅を指定します。

    <!-- The style class in the div elements specifies the column width for different screen sizes -->
<div id="parentContainer2" class="oj-flex oj-flex-item oj-panel oj-bg-danger-30 oj-lg-padding-6x oj-md-8 oj-sm-12">
  <div id="activityItemsContainer" class="oj-flex-item oj-md-6 oj-sm-12">
  </div>
  <div id="itemDetailsContainer" class="oj-flex-item oj-panel oj-bg-neutral-30 oj-md-6 oj-sm-12">

  3. dashboard.htmlファイルを保存します。コードはfinal-columns-dDashboard-html.txtのようになります。

タスク4: Webアプリケーションの実行

  1. ターミナル・ウィンドウで、JET_Web_Applicationディレクトリに移動し、アプリケーションを実行します。

    $ ojet serve

    Oracle JETツールは、WebアプリケーションをローカルWebブラウザで実行して、ダッシュボードのコンテンツを表示できます。ページを右クリックし、「検査」を選択して開発者ツールのページ・ビューを表示します。次に、「ピクセル5」などの小さな画面サイズを持つデバイスを「ディメンション」ドロップダウン・メニューから選択して、「アクティビティ」リスト・アイテムのコンテンツ配置の変更を確認します。

    小さい画面のレスポンシブ・レイアウト

    図content-alignment.pngの説明

  2. 実行中のWebアプリケーションを表示するブラウザ・ウィンドウまたはタブを閉じます。

  3. 端末ウィンドウでCtrl+Cを押し、プロンプトが表示されたらyと入力してOracle JETツール・バッチ・ジョブを終了します。

その他の学習リソース

docs.oracle.com/learnの他のラボを調べるか、Oracle Learning YouTubeチャネルでさらに無料の学習コンテンツにアクセスします。さらに、education.oracle.com/learning-explorerにアクセスしてOracle Learning Explorerにします。

製品ドキュメントは、Oracleヘルプ・センターを参照してください。