プロが作ったランディングページ制作用コード(HTML、CSS)

BigCenter

背景画像をいっぱいに表示して、その上にテキストを置くブロックです。テキストは中央に配置します。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト


BigLeft

背景画像をいっぱいに表示して、その上にテキストを置くブロックです。テキストは左に配置します。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト


BigRight

背景画像をいっぱいに表示して、その上にテキストを置くブロックです。テキストは右に配置します。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト


BigText

背景画像をいっぱいに表示して、その上にテキストを置くブロックです。文字数が多いタイプです。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

Band

上下のコンテンツを分けたい場合に利用するブロックです。

ImageCenter

画像を中央に配置して、テキストを下に配置するブロックです。

イメージ

タイトル

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト


ImageLeft

画像を左に配置して、テキストを右に配置するブロックです。

イメージ

タイトル

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト


ImageRight

画像を右に配置して、テキストを左に配置するブロックです。

イメージ

タイトル

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト


イメージ

FullImageCenter

画像を中央に配置して、テキストを下に配置するブロックです。画像はいっぱいに表示します。


イメージ

FullImageLeft

画像を左に配置して、テキストを右に配置するブロックです。画像はいっぱいに表示します。


イメージ

FullImageRight

画像を右に配置して、テキストを左に配置するブロックです。画像はいっぱいに表示します。

BandArrow

上下のコンテンツを分けたい場合に利用するブロックです。矢印も付いています。

Inline2

2つ横並びに配置するブロックです。

  • イメージ

    タイトル

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

  • イメージ

    タイトル

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト


Inline2Arrow

2つ横並びに配置するブロックです。矢印も付いています。

  • イメージ

    タイトル

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

  • イメージ

    タイトル

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト


Inline3

3つ横並びに配置するブロックです。

  • イメージ

    タイトル

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

  • イメージ

    タイトル

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

  • イメージ

    タイトル

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト


Inline3Arrow

3つ横並びに配置するブロックです。矢印も付いています。

  • イメージ

    タイトル

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

  • イメージ

    タイトル

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

  • イメージ

    タイトル

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト


Inline4

4つ横並びに配置するブロックです。

  • イメージ

    タイトル

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

  • イメージ

    タイトル

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

  • イメージ

    タイトル

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

  • イメージ

    タイトル

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト


Inline4Arrow

4つ横並びに配置するブロックです。矢印も付いています。

  • イメージ

    タイトル

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

  • イメージ

    タイトル

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

  • イメージ

    タイトル

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

  • イメージ

    タイトル

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト


Inline5

5つ横並びに配置するブロックです。

  • イメージ

    タイトル

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

  • イメージ

    タイトル

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

  • イメージ

    タイトル

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

  • イメージ

    タイトル

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

  • イメージ

    タイトル

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト


Inline5Arrow

5つ横並びに配置するブロックです。矢印も付いています。

  • イメージ

    タイトル

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

  • イメージ

    タイトル

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

  • イメージ

    タイトル

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

  • イメージ

    タイトル

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

  • イメージ

    タイトル

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト


Inline2Circle

2つ横並びに配置するブロックです。画像は円形になります。

  • イメージ

    タイトル

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

  • イメージ

    タイトル

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト


Inline2CircleArrow

2つ横並びに配置するブロックです。画像は円形になります。矢印も付いています。

  • イメージ

    タイトル

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

  • イメージ

    タイトル

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト


Inline3Circle

3つ横並びに配置するブロックです。画像は円形になります。

  • イメージ

    タイトル

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

  • イメージ

    タイトル

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

  • イメージ

    タイトル

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト


Inline3CircleArrow

3つ横並びに配置するブロックです。画像は円形になります。矢印も付いています。

  • イメージ

    タイトル

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

  • イメージ

    タイトル

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

  • イメージ

    タイトル

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト


Inline4Circle

4つ横並びに配置するブロックです。画像は円形になります。

  • イメージ

    タイトル

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

  • イメージ

    タイトル

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

  • イメージ

    タイトル

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

  • イメージ

    タイトル

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト


Inline4CircleArrow

4つ横並びに配置するブロックです。画像は円形になります。矢印も付いています。

  • イメージ

    タイトル

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

  • イメージ

    タイトル

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

  • イメージ

    タイトル

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

  • イメージ

    タイトル

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト


Inline5Circle

5つ横並びに配置するブロックです。画像は円形になります。

  • イメージ

    タイトル

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

  • イメージ

    タイトル

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

  • イメージ

    タイトル

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

  • イメージ

    タイトル

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

  • イメージ

    タイトル

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト


Inline5CircleArrow

5つ横並びに配置するブロックです。画像は円形になります。矢印も付いています。

  • イメージ

    タイトル

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

  • イメージ

    タイトル

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

  • イメージ

    タイトル

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

  • イメージ

    タイトル

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

  • イメージ

    タイトル

    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト


List

リストを表示するブロックです。チェックマークも付いています。

  • テキストテキストテキストテキストテキストテキストテキストテキスト
  • テキストテキストテキストテキストテキストテキストテキストテキスト
  • テキストテキストテキストテキストテキストテキストテキストテキスト
  • テキストテキストテキストテキストテキストテキストテキストテキスト
  • テキストテキストテキストテキストテキストテキストテキストテキスト

こちらのランディングページ用コード(HTML、CSS)は、ダウンロードしてご利用いただけます。
ダウンロードページはこちら。