ページタイトルが入ります
通常の白背景
コピーが入ります。コピーが入ります。コピーが入ります。コピーが入ります。コピーが入ります。
コピーが入ります。コピーが入ります。コピーが入ります。コピーが入ります。コピーが入ります。
グレーの背景
コピーが入ります。コピーが入ります。コピーが入ります。コピーが入ります。コピーが入ります。
コピーが入ります。コピーが入ります。コピーが入ります。コピーが入ります。コピーが入ります。
コンテンツ幅の指定に関して
コンテンツ幅1200px
コンテンツ幅1024px（下層ページ標準幅）
コンテンツ幅960px
2～4列のカラム指定に関して
▼ 2列の場合
1
2
3
4
5
▼ 3列の場合
1
2
3
4
5
▼ 4列の場合
1
2
3
4
5
6
カード型のレイアウトに関して
カード型のレイアウトは、上記カラムのいずれかの中に指定する想定です。
カラム内に指定しない場合は、以下のようにコンテンツ幅いっぱいに広がります。
- テキストが入ります
- 本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト
以下は、3列カラムの中にカード型レイアウトを指定した場合です。
また、指定する画像は、3:2の比率を想定しています。
もし、異なる比率の画像が指定された場合は、画像の中央を基点にcssで3:2の領域で強制的にトリミング表示します。
- 720×480画像の場合（想定している3:2の比率）
- 本文テキスト本文テキスト本文テキスト本文テキスト
- 1000×500画像の場合
- 本文テキスト本文テキスト本文テキスト本文テキスト
- 300×400画像の場合
- 本文テキスト本文テキスト本文テキスト本文テキスト
カード型レイアウトの、単語のみのパターン。
トップページの機能一覧のように利用したいとき。
ああああああああああああああああああ
以下は、4列カラムの中に、単語パターンのカード型レイアウトを指定した場合です。
あいうえおあいうえおあいうえおあいうえおあいうえおあいうえお
かきくけこ
さしすせそ
たちつてと
なにぬねの
カード型レイアウトの、用語説明型パターン。
タイトルと説明文で利用したいとき。
- テキストが入ります
- 本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト
以下は、4列カラムの中に、用語説明型パターンのカード型レイアウトを指定した場合です。
- あああああああああああああ
- あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお
- あああああああ
- あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお
- かかかかかかか
- かきくけこかきくけこかきくけこかきくけこかきくけこかきくけこかきくけこ
- さささささささ
- さしすせそさしすせそさしすせそさしすせそさしすせそさしすせそさしすせそ
- たたたたたたたたたたたたた
- たちつてとたちつてとたちつてと
- ななななななななななな
-
なにぬねのなにぬねのなにぬねのなにぬねのなにぬねのなにぬねのなにぬねの
なにぬねのなにぬねのなにぬねのなにぬねのなにぬねのなにぬねのなにぬねの
画像とテキストのセットレイアウトに関して
▼ コンテンツ幅やカラム幅など、親要素いっぱいに広がるパターン
キャプションが入りますキャプションが入りますキャプションが入ります
本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト
本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト
▼ 画像の最大幅が600pxのパターン
キャプションが入りますキャプションが入りますキャプションが入ります
本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト
本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト
▼ 画像エリアとテキストエリアが同じサイズのパターン
キャプションが入りますキャプションが入りますキャプションが入ります
本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト
本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト
▼ 画像エリアが固定サイズ、テキストエリアが可変サイズのパターン
画像は、横幅が400pxまでのものを指定してください
キャプションが入りますキャプションが入りますキャプションが入ります
本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト
本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト
▼ 以下は、例えば、2列のカラムの中に、親要素いっぱいに広がる画像とテキストセットのレイアウトを配置した場合
キャプションが入りますキャプションが入りますキャプションが入ります
本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト
キャプションが入りますキャプションが入りますキャプションが入ります
本文テキスト本文テキスト本文テキスト
セクションタイトルが入ります（H2）
コピーが入ります。コピーが入ります。コピーが入ります。コピーが入ります。コピーが入ります。
コピーが入ります。コピーが入ります。コピーが入ります。コピーが入ります。コピーが入ります。
見出しが入ります（H3）
本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト
見出しが入ります（H4）
本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト
見出しが入ります（H5）
本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト
見出しが入ります（H6）
本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト本文テキスト
引用ブロック引用ブロック引用ブロック引用ブロック引用ブロック引用ブロック引用ブロック引用ブロック引用ブロック引用ブロック引用ブロック
引用ブロック引用ブロック引用ブロック引用ブロック引用ブロック引用ブロック引用ブロック引用ブロック引用ブロック引用ブロック引用ブロック
※注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト
-
箇条書きリスト箇条書きリスト箇条書きリスト箇条書きリスト箇条書きリスト箇条書きリスト箇条書きリスト箇条書きリスト箇条書きリスト箇条書きリスト箇条書きリスト箇条書きリスト箇条書きリスト箇条書きリスト箇条書きリスト箇条書きリスト箇条書きリスト箇条書きリスト箇条書きリスト箇条書きリスト
- 箇条書きリスト箇条書きリスト箇条書きリスト箇条書きリスト箇条書きリスト箇条書きリスト箇条書きリスト箇条書きリスト箇条書きリスト箇条書きリスト箇条書きリスト
- 箇条書きリスト
- 箇条書きリスト箇条書きリスト箇条書きリスト箇条書きリスト箇条書きリスト箇条書きリスト箇条書きリスト箇条書きリスト箇条書きリスト箇条書きリスト
- 箇条書きリスト
- 箇条書きリスト
-
番号付きリスト番号付きリスト番号付きリスト番号付きリスト番号付きリスト番号付きリスト番号付きリスト番号付きリスト番号付きリスト
- 番号付きリスト番号付きリスト番号付きリスト番号付きリスト番号付きリスト番号付きリスト
- 番号付きリスト番号付きリスト番号付きリスト
- 番号付きリスト番号付きリスト番号付きリスト番号付きリスト番号付きリスト番号付きリスト番号付きリスト番号付きリスト番号付きリスト番号付きリスト
- 番号付きリスト
- 番号付きリスト
テキストリンク
テキストリンク（矢印付き）
▼ 通常のページ遷移のボタン
▼ Hubspotのボタン
▼ スマホ版で、スクロールしないパターンのテーブル
| 見出し | 見出し |
|---|---|
| テキストが入ります |
テキストが入りますテキストが入ります テキストが入りますテキストが入ります テキストが入りますテキストが入ります テキストが入りますテキストが入ります テキストが入りますテキストが入ります テキストが入ります |
| テキストが入ります | テキストが入りますテキストが入りますテキストが入りますテキストが入ります |
| テキストが入ります | テキストが入りますテキストが入りますテキストが入りますテキストが入ります |
▼ スマホ版で、スクロールするパターンのテーブル
| 見出し | 見出し |
|---|---|
| テキストが入ります | テキストが入りますテキストが入ります テキストが入りますテキストが入ります テキストが入りますテキストが入ります テキストが入りますテキストが入ります テキストが入りますテキストが入ります テキストが入ります |
| テキストが入ります | テキストが入りますテキストが入りますテキストが入りますテキストが入ります |
▼ ページ内リンクを作成したいとき
既存にあわせて４個並び。
表示の調整をしたい場合は、クラス名をつけるなどして別途cssで調整してください。
