パーツ集

見出し2（spanあり：HTMLとして編集してください。）

見出し2

見出し3

見出し4

見出し5
見出し6

段落です。

ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。 ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。

段落です。テキスト小です。「高度な設定」に「small」を入力してください。
ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。

表

レスポンシブ時の表のブレイクは廃止し、スクロールさせる形でスタイリングしています。

レスポンシブ時、表はページの幅なりに縮んで表示されます。
細かい表、大きな表は高度な設定の追加CSSクラスに「scroll」を追加することでスクロールに変更できます。

スクロールさせた場合

※幅750px未満で確認してください。横スクロールバーが表示されます。

ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
表の挿入（スタイル：デフォルト）
ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
表の挿入（スタイル：ストライプ）
ここにテキストが入ります。ここにテキストが入ります。
ここにテキストが入ります。ここにテキストが入ります。
ここにテキストが入ります。ここにテキストが入ります。
ここにテキストが入ります。ここにテキストが入ります。
表の挿入（ヘッダーON）
表見出し表見出し表見出し
ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
表の挿入（HTMLとして編集 → ビジュアル編集）
表見出しここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
表見出し表見出しここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
表見出し
表見出し		ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。		ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
カスタムHTMLでソースを記述する必要があるパターン

セルの結合、セルの背景色の設定を行う場合の例です。

お客様 弊　社 設計・
工事会社
①構想段階 ・バイオマスボイラー導入検討のため弊社に相談 ●
・基本データのご提供による事業生の簡易シミュレーションを実施 ●
　→導入に踏み込むかどうかの判断 ●
・導入を前提に基本設計・事業計画を弊社にご依頼 ●
②基本設計・事業計画策定 ・ ●
・ ● ●
・ ● ● ●
③補助申請・工事・引渡し ・ ● ●
・ ● ●
④運用 ・ ●
・ ●
・稼働データ分析にもとづく運用改善提案 ●
本件は、バイオマスボイラーを単独で導入する場合です。地域熱供給網や熱電供給の場合は、内容が異なります。

レスポンシブ対応（セルをブレイク）

表組みを解除し、縦並びに表示する場合は、高度な設定で追加 CSS クラスに「break」を指定してください。
※幅750px未満で確認してください。

表見出しここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
表見出し表見出しここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
表見出し
表見出し		ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。		ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。

アンカー1

該当するブロックを選択し、「高度な設定」の「HTMLアンカー」に入力。

ボックス

「カラム」を挿入後「高度な設定」に指定のclassを追加 → カラム内で段落等を編集してください。

これは段落です。ここにテキストが入ります。

これは段落です。ここにテキストが入ります。これは段落です。ここにテキストが入ります。
これは段落です。ここにテキストが入ります。

これは段落です。ここにテキストが入ります。

これは段落です。ここにテキストが入ります。

これは段落です。ここにテキストが入ります。これは段落です。ここにテキストが入ります。
これは段落です。ここにテキストが入ります。

これは段落です。ここにテキストが入ります。

これは段落です。ここにテキストが入ります。

これは段落です。ここにテキストが入ります。これは段落です。ここにテキストが入ります。
これは段落です。ここにテキストが入ります。

これは段落です。ここにテキストが入ります。これは段落です。ここにテキストが入ります。
これは段落です。ここにテキストが入ります。

これは段落です。ここにテキストが入ります。

リスト

リスト（ulタグ）

  • ここにテキストが入ります。ここにテキストが入ります。
    • ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
      • ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
  • ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
    ここにテキストが入ります。ここにテキストが入ります。
  • ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。

番号リスト（olタグ）

  1. ここにテキストが入ります。ここにテキストが入ります。
  2. ここにテキストが入ります。ここにテキストが入ります。
    1. ここにテキストが入ります。ここにテキストが入ります。
    2. ここにテキストが入ります。ここにテキストが入ります。
  3. ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。

定義リスト（dlタグ）

定義リスト
ここにテキストが入ります。ここにテキストが入ります。
定義リスト定義リスト定義リスト
ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
定義リスト
定義リスト
ここにテキストが入ります。ここにテキストが入ります。
ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。

会社情報で使用している特別なスタイル

カラム（100%）で囲い、テキストのセンタリングclassを指定（text-center）。
dlには専用のclass（company-info）を指定。
更に、見出しの文字数が3文字（dt_3em）と5文字（dt_5em）との2パターンのclassを用意することで、見出し文字列が均等貼り付けされるスタイルにした。（注：Safariには非対応）
また、標準的な左寄せかつ7文字（dt_7em）のパターンも用意した。

所在地
東京都千代田区外神田5-5-10 O.Kビル 6階
創立
2015年
代表者
梶山 恵司
従業員数
13名
資本金
2,500万円
建設業許可
東京都知事許可（般-1）第150298号
資格
１級管工事施工管理技士
エネルギー管理士
技術士（電気電子部門）建築設備士
工学会設備士
2級ボイラー技士
第三種電気主任技術者
第一種電気工事士
第二種電気工事士
2級電気工事施工管理技士

画像の配置の基本

リサイズを掛けない画像

画像サイズ「大」「中」「小」の変更は無視され、カラム幅に対して横幅100%で配置されます。

リサイズを掛けた画像

画像の寸法を変更した際に適用されます。

画像の配置（カラム）

見出し3

ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。

見出し3

ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。

見出し3

ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。

キャプション（中央がデフォルト）

背景画像あり特殊カラム

HTMLソースでの編集となります。

h2見出し

これは段落です。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。これは段落です。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。これは段落です。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。これは段落です。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。これは段落です。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。これは段落です。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。

サムネイル付リスト

2分割 サムネイル付きリスト

見出しはh3を設定

h3見出し

ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。

h3見出し

ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。

3分割 サムネイル付きリスト

見出しはh4を設定

h4見出し

ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。

h4見出し

ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。

h4見出し

ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。

4分割 サムネイル付きリスト

親カラムに「text-small」を設定
見出しはh5を設定

h5見出し

ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。

h5見出し

ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。

h5見出し

ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。

h5見出し

ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。