フレームワーク部品 [onepg-base.css]

CSSクラス一覧.

div.grid-row：グリッド行要素
div.grid-col-1：グリッド列要素幅1/12
div.grid-col-2：グリッド列要素幅2/12
div.grid-col-3：グリッド列要素幅3/12
div.grid-col-4：グリッド列要素幅4/12
div.grid-col-5：グリッド列要素幅5/12
div.grid-col-6：グリッド列要素幅6/12
div.grid-col-7：グリッド列要素幅7/12
div.grid-col-8：グリッド列要素幅8/12
div.grid-col-9：グリッド列要素幅9/12
div.grid-col-10：グリッド列要素幅10/12
div.grid-col-11：グリッド列要素幅11/12
div.grid-col-12：グリッド列要素幅12/12
div.item-head：グリッドセル内の項目ヘッダ要素
div.item-body：グリッドセル内の項目ボディ要素
div.table：テーブルを囲む要素
.align-left：テキスト左寄せ
.align-center：テキスト中央寄せ
.align-right：テキスト右寄せ
.danger：警告色で表示（削除ボタンなど）
a.button：リンク（<a>）をボタン風に表示

ページ全体レイアウト.

<header> と <footer> は上部と下部に固定表示する。
<main> は <header> と <footer> 以外の残りの高さを全て使用して表示する。
<section> はページ左右余白とセクション間上下余白を設ける。上下余白を無くしたい場合は <section> を使わないこと。

［例］
<body>
  <header>
    <section>固定ヘッダー</section>
  </header>
  <main>
    <section>メインコンテンツ</section>
  </main>
  <footer>
    <section>固定フッター</section>
  </footer>
</body>

グリッドレイアウト（列12分割）.

ページの横幅を12等分して要素を自由に配置できるレイアウト手法を用いる。
行要素は div.grid-row で指定し、行ごとに列幅を指定する。
列要素は div.grid-col-1 ～ div.grid-col-12 で指定し、末尾の数値が列幅を表す。
列幅は 1 から 12 までの値を使用し、合計が 12 になるよう指定する。
列幅は通常12等分した幅だが、スマートフォンサイズでは全幅に変更され、列が縦並び（行）に変更される。
列内は通常横並び配置だが、タブレットサイズでは縦並びに変更される。

［例１］
<div class="grid-row">
  <div class="grid-col-3">全幅の1/4幅</div>
  <div class="grid-col-3">全幅の1/4幅</div>
  <div class="grid-col-3">全幅の1/4幅</div>
  <div class="grid-col-3">全幅の1/4幅</div>
</div>
［例２］幅は統一されていなくてもよい
<div class="grid-row">
  <div class="grid-col-6">全幅の1/2幅</div>
  <div class="grid-col-4">全幅の1/3幅</div>
  <div class="grid-col-2">全幅の1/6幅</div>
</div>

フォーム入力要素スタイル.

テキストボックス、セレクトボックス、テキストエリアなどのフォーム入力要素のスタイルを統一する。
通常時、フォーカス時、非活性時のスタイルを統一する。
フォーム入力要素と対になるラベルのスタイルを統一する。
ラベル要素は div.item-head で囲み、フォーム入力要素は div.item-body で囲むことで、高さ調節およびページサイズに応じた並び方向の切り替えスタイルが適用される。
```
［例］
<div class="item-head"><label>項目名</label></div>
 <div class="item-body"><input type="text"></div>
```
チェックボックス、ラジオボタンは要素と値名称を <label> で囲む。
```
［例］<div class="item-body"><label><input type="checkbox">値名称</label></div>
```

テーブルスタイル.

<table> のスタイルを統一する。
テーブルは１行ごとにストライプ表示する。
<table> を div.table で囲むことでスタイルが適用される。
```
［例］
<div class="table"><table>...省略...</table></div>
```
<th> は<thead>、<tr> は<tbody> で囲むことでスタイルが適用される。

<tbody> は１個、複数個のどちらでもよい。

［１個 例］<table>...省略...<tbody><tr></tr><tr></tr><tr></tr><tr></tr></tbody></table>
［複数個 例］<table>...省略...<tbody><tr></tr><tr></tr></tbody><tbody><tr></tr><tr></tr></tbody></table>

ユーティリティスタイル.

このセクションでは頻繁に使用される汎用的なスタイルを提供する。
テキスト文字寄せには下記クラスを設定する。
- 左寄せ：.align-left
- 中央寄せ：.align-center
- 右寄せ：.align-right
操作を注意するべき要素に .danger を設定することで警告色で表示する（削除ボタンなどに使用）。
<a> に .button を設定することで見た目をボタン風に表示する。

メッセージ表示／項目ハイライトスタイル.

メッセージ表示エリアのHTMLは下記の形式で固定とする。
```
<section id="_msg"></section>
```
JavaScript フレームワーク部品 PageUtil#setMsg() を呼び出すと、対象項目要素に下記クラスがセットされ、その項目がハイライト表示される。
- 情報（青系背景）： .info-item
- 警告（黄系背景）： .warn-item
- エラー（赤系背景）： .err-item
ハイライト表示する項目は Java フレームワーク部品 Io#putMsg() の引数でメッセージ文言とともに指定する。

定数一覧

すべての定数名は --onepg-base-- から始まります。（例: line-height--all → --onepg-base--line-height--all）

定数名称	定数名（--onepg-base-- 以降）	設定値
全体行高さ	`line-height--all`	`1.5`
セクション左右余白	`spacing--section-lr`	`1.5rem`
セクション間上下余白	`spacing--section-tb`	`1rem`
ヘッダーフッターセクション間上下余白	`spacing--section-tb-header-footer`	`0.5rem`
入力項目高さ	`height--inputitem`	`2rem`
入力項目枠線幅	`border-width--inputitem`	`1px`
入力項目枠内左右余白	`spacing--inputitem-lr`	`0.25rem`
入力項目枠角丸め	`radius--inputitem`	`4px`
ボタン枠角丸め	`radius--button`	`calc(var(--onepg-base--height--inputitem) / 2)`
ボタン枠内左右余白	`spacing--button-lr`	`var(--onepg-base--radius--button)`
項目左右余白	`spacing--item-lr`	`0.25rem`
グリッド行間余白	`spacing--grid-rows`	`0.75rem`
グリッド列間余白	`spacing--grid-cols`	`0.25rem`
背景色	`color--bg`	`#e5e4e6`
ヘッダー・フッター背景色	`color--bg-header-footer`	`#eae5e3`
テーブルストライプ背景色	`color--bg-stripe`	`#dddcd6`
テキスト色	`color--text`	`#2e2930`
非活性テキスト色	`color--text-disabled`	`#9ea1a3`
警告テキスト色	`color--text-danger`	`#e83929`
入力項目背景色	`color--input-bg`	`#f8fbf8`
枠線色	`color--border`	`#c8c2c6`
非活性背景色	`color--input-bg-disabled`	`transparent`
ボタン背景色	`color--button-bg`	`#595857`
危険ボタン色	`color--button-bg-danger`	`#d3381c`
ボタン枠線色	`color--button-border`	`var(--onepg-base--color--border)`
ボタン非活性背景色	`color--button-bg-disabled`	`var(--onepg-base--color--button-border)`
ボタン非活性枠線色	`color--button-border-disabled`	`#dcd6d9`
ボタンテキスト色	`color--button-text`	`#fffffc`
テーブル罫線色	`color--table-border`	`#a89dac`
フォーカス枠線色	`color--focus`	`#2ca9e1`
メッセージ表示エリア左右余白	`spacing--msg-lr`	`0.5rem`
情報メッセージ背景色	`color--info-msg-bg`	`#bce2e8`
警告メッセージ背景色	`color--warn-msg-bg`	`#f8e58c`
エラーメッセージ背景色	`color--err-msg-bg`	`#eebbcb`
情報項目背景色	`color--info-item-bg`	`#bce2e8`
警告項目背景色	`color--warn-item-bg`	`#f8e58c`
エラー項目背景色	`color--err-item-bg`	`#eebbcb`
フォーカス影	`shadow--focus`	`0 0 0 2px var(--onepg-base--color--focus)`
ヘッダー・フッター固定用影	`shadow--header-footer`	`0 2px 4px rgba(0, 0, 0, 0.1)`

CSSDoc

目次

CSSクラス一覧.

ページ全体レイアウト.

グリッドレイアウト（列12分割）.

フォーム入力要素スタイル.

テーブルスタイル.

ユーティリティスタイル.

メッセージ表示／項目ハイライトスタイル.

定数一覧