intra-mart Accel Platform UIデザインガイドライン(PC版) 第5版 2015-04-01

6.2.2. 基本的な画面レイアウト別実装例

以下に基本的な画面レイアウト別の実装例を示します。

6.2.2.1. 固定レイアウト(1カラム)

コンテンツエリアの一番外側の div の class 属性の説明です。

  • 一番外側の div の class 属性に imui-form-containerimui-form-container-narrowimui-form-container-wide のいずれかのコンテナクラスを指定します。
1
2
3
<div class="imui-form-container">
   ...
</div>
  • 指定した class により枠の幅 (%) が変わります。(サンプル画像では style=height:300px を指定)
imui–form–container imui–form–container–narrow imui–form–container–wide
width:75% width:60% width:90%
normal narrow wide

コラム

imui-form-container 、 imui-form-container-narrow 、 imui-form-container-wide は、 UIモジュール の 1 つです。
別ドキュメントの CSS Module List の「コンテナ」で説明しています。

6.2.2.2. 左右に分割するレイアウト(2カラム)

コンテンツエリアを左右に分割したい場合の実装例です。

  • Twitter の Bootstrap を利用します。
  • 実装例
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<div class="container-fluid">
  <div class="row-fluid">
    <div class="span2" style="height:400px;">
      <div>sidebar content</div>
    </div>
    <div class="span10" style="height:400px;">
      <div>body content</div>
    </div>
  </div>
</div>
  • 画面
左右に分割するレイアウト(2カラム)