LPフォーマット

ボタン、カラムに領域確認用の背景色classを設定しています。削除もしくは変更してご利用ください。

ナビボタン・リンクボタン

ページ内ナビ

ページ内ナビの矢印は下を向きます。他のボタンをページ内リンクにするときはaタグにクラス名「page_link」を追加してください。

2カラム 看板用

イメージ

看板 - 見出しです 見出しです

PCは横並び縦中央配置です。
SPは縦並びで右側が上に。
ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。

1カラム 【E1】

画像のみ PC・SP 1カラム 【E1】

イメージ

動画埋め込み PC・SP 1カラム 【E1】

PC 動画埋め込み 2カラム 横並び・SP 1カラム 縦並び 右側が上 ボタン付き 【E2-7】

PC 動画埋め込み 2カラム 横並び・SP 1カラム 縦並び 右側が上 ボタン付き 【E2-7】

見出しです 見出しです 見出しです

PCは横並びです。
SPは縦並びで右側が上に。
ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。

詳しくはこちら

標準のｈ2見出し 【EH2】

見出しです 見出しです 見出しです 見出しです

テキスト PC 1カラム SP 1カラム 【E1-2】

ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。

2カラム【E2】

PC・SP 2カラム 横並び固定 【E2-1】

イメージ
イメージ

PC・SP 2カラム 横並び固定 【E2-2】

見出しです 見出しです

ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。

イメージ

PC 2カラム 横並び・SP 1カラム 縦並び 右側が上 【E2-3】

イメージ

見出しです 見出しです

PCは横並びです。
SPは縦並びで右側が上に。
ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。

PC 2カラム 横並び・SP 1カラム 縦並び左側が上 【E2-4】

見出しです 見出しです

PCは横並びです。
SPは縦並びで左側が上に。
ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。

イメージ

PC・SP2カラム 横並び固定 画像上 【E2-5】

イメージ

見出しです 見出しです

ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。

イメージ

見出しです 見出しです

ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。

PC・SP 2カラム 横並び固定 画像下 【E2-6】

見出しです 見出しです

ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。

イメージ

見出しです 見出しです

ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。

イメージ

3カラム【E3】

PC・SP 3カラム 横並び固定 【E3-1】

イメージ
イメージ
イメージ

PC・SP 3カラム 横並び固定 【E3-2】

イメージ

見出しです 見出しです

ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。

イメージ

見出しです 見出しです

ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。

イメージ

見出しです 見出しです

ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。

PC・SP 2カラム（2:1）横並び固定 【E3-3】

見出しです 見出しです

ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。

イメージ

PC・SP 2カラム（1:2）横並び固定 【E3-4】

イメージ

見出しです 見出しです

ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。

PC 3カラム 横並び・SP 1カラム 縦並び 【E3-5（C）】

イメージ

見出しです 見出しです

ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。

イメージ

見出しです 見出しです

ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。

イメージ

見出しです 見出しです

ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。

4カラム 【E4】

PC・SP 4カラム 横並び固定 【E4-1】

イメージ
イメージ
イメージ
イメージ

PC 4カラム・SP 2カラム 【E4-2（B-2）】

イメージ
イメージ
イメージ
イメージ

PC・SP 4カラム 横並び固定 【E4-3】

イメージ

見出しです

ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。

イメージ

見出しです

ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。

イメージ

見出しです

ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。

イメージ

見出しです

ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。

PC 2カラム+2カラム 横並び・SP 2カラム 縦並び 【E4-4（B-1）】

見出しです 見出しです

ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。

イメージ

見出しです 見出しです

ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。

イメージ

PC・SP 4カラム 横並び（3:1）固定 【E4-5】

見出しです 見出しです

ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。

イメージ

PC・SP 4カラム 横並び（1:3）固定 【E4-6】

イメージ

見出しです 見出しです

ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。

6カラム【E6】

PC 2カラム+3カラム（2:1） 横並び・SP 3カラム（2:1） 縦並び 【E6-1（B-3）】

見出しです 見出しです

ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。

イメージ

見出しです 見出しです

ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。

イメージ

PC 2カラム+3カラム（1:2） 横並び・SP 3カラム（1:2） 縦並び 【E6-2】

イメージ

見出しです 見出しです

ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。

イメージ

見出しです 見出しです

ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。

2カラム ボタン付き【EB】

PC 2カラム 横並び・SP 1カラム 縦並び 右側が上 ボタン付き 【E2-7】

イメージ

見出しです 見出しです 見出しです

PCは横並びです。
SPは縦並びで右側が上に。
ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。

詳しくはこちら

カラム クラス名

ブレークポイントは768pxです。

共通部分はシステムがUAでデバイスを区別して表示していますのでコンテンツのレイアウトとは一致しません。
PC以外はスマホ用レイアウトが表示されます。
コンテンツは幅768px以下のPCはスマホ用レイアウト、幅769px以上のタブレット等はPC用レイアウトが表示されます。

PC・SP固定

ahf_fitem25

ahf_fitem33

ahf_fitem50

ahf_fitem66

ahf_fitem75

ahf_fite　 or　ahf_fitem100

PC指定・SP100%

ahf_fitem25_pc

ahf_fitem33_pc

ahf_fitem50_pc

ahf_fitem66_pc

ahf_fitem75_pc

PC100%・SP指定

ahf_fitem25_sp

ahf_fitem33_sp

ahf_fitem50_sp

ahf_fitem66_sp

ahf_fitem75_sp

ボックスオプション

ahf_fbox

ahf_fbox

ahf_fbox_center

ahf_fbox_center

ahf_fbox_left

ahf_fbox_left

通常
通常

通常

ahf_fmiddle
ahf_fmiddle

ahf_fmiddle

通常

通常

ahf_gap20

ahf_gap20

ahf_freverse

ahf_freverse

フォント

フォント サイズ

クラス名 文字サイズ
.txt12 12px
.txt14 14px
.txt16 16px
.txt18 18
.txt20 20px
.txt22 22px
.txt24 24px
.txt28 28px
.txt32 32px
.txt36 36px

テキスト揃え

クラス名 スタイル
.txt_left text-align: left;
.txt_center text-align: center;
.txt_right text-align: right;

フォント スタイル

クラス名 スタイル
.txt_normal font-weight: normal;
.txt_bold font-weight: bold;
.indent10 text-indent: -1em; padding-left: 1em;
半角+半角
.indent14 text-indent: -1.4em;padding-left: 1.4em;
全角+半角
.mincho フォントファミリー：明朝体

カラー

テキストクラス名 背景クラス名 線クラス名 カラー
.color_white .bgcolor_white .bdcolor_white ■ #fff;
.color_gray_e .bgcolor_gray_e .bdcolor_gray_e ■ #eee;
.color_gray_d .bgcolor_gray_d .bdcolor_gray_d ■ #ddd;
.color_gray_c .bgcolor_gray_c .bdcolor_gray_c ■ #ccc;
.color_gray_9 .bgcolor_gray_9 .bdcolor_gray_9 ■ #999;
.color_black_6 .bgcolor_black_6 .bdcolor_black_6 ■ #666;
.color_black_4 .bgcolor_black_4 .bdcolor_black_4 ■ #444;
.color_black_3 .bgcolor_black_3 .bdcolor_black_3 ■ #333;
.color_black .bgcolor_black .bdcolor_black ■ #000;
.color_red .bgcolor_red .bdcolor_red ■ #e6160b;
.color_pink .bgcolor_pink .bdcolor_pink ■ #fdd;
.color_navy .bgcolor_navy .bdcolor_navy ■ #4f62ab;
.color_blue .bgcolor_blue .bdcolor_blue ■ #cdf;
.color_green .bgcolor_green .bdcolor_green ■ #fdd54d;
.color_green_l .bgcolor_green_l .bdcolor_green_l ■ #dfd;
.color_yellow .bgcolor_yellow .bdcolor_yellow ■ #fdd54d;

余白

marginクラス名 paddingクラス名 スタイル
.mg_at   margin: 0 auto;
.mg0 .pd0 -top,-right,-bottom,-left: 0;
.mg5 .pd5 -top,-right,-bottom,-left: 5px;
.mg10 .pd10 -top,-right,-bottom,-left: 10px;
.mg20 .pd20 -top,-right,-bottom,-left: 20px;
.mg30 .pd30 -top,-right,-bottom,-left: 30px;
.mg40 .pd40 -top,-right,-bottom,-left: 40px;
.mg50 .pd50 -top,-right,-bottom,-left: 50px;
.mg60 .pd60 -top,-right,-bottom,-left: 60px;
     
.mt0 .pt0 -top: 0;
.mt5 .pt5 -top: 5px;
.mt10 .pt10 -top: 10px;
.mt20 .pt20 -top: 20px;
.mt30 .pt30 -top: 30px;
.mt40 .pt40 -top: 40px;
.mt50 .pt50 -top: 50px;
.mt60 .pt60 -top: 60px;
     
.mb0 .pb0 -bottom: 0;
.mb5 .pb5 -bottom: 5px;
.mb10 .pb10 -bottom: 10px;
.mb20 .pb20 -bottom: 20px;
.mb30 .pb30 -bottom: 30px;
.mb40 .pb40 -bottom: 40px;
.mb50 .pb50 -bottom: 50px;
.mb60 .pb60 -bottom: 60px;
     
.mgx5 .pdx5 -right,-left: 5px;
.mgx10 .pdx10 -right,-left: 10px;
.mgy5 .pdy5 -top,-bottom: 5px;
.mgy10 .pdy10 -top,-bottom: 10px;

ユーティリティー

角丸

クラス名 スタイル
.radius0 border-radius: 0;
.radius5 border-radius: 5;
.radius10 border-radius: 10;
.radius20 border-radius: 20;

その他

クラス名 スタイル
.line_h16 line-height: 1.6;
.maxw480 max-width: 480px
.pc_none スマホのみ表示
.sp_none PCのみ表示

テーブル

タイトル.th タイトル.th
タイトル.th テキスト
タイトル.th テキスト
タイトル テキスト
タイトル テキスト

テーブルにクラス名「table01」を設定
<table class="table01">

タイトルは<td>にクラス名「th」を設定
<td class="th">

ブレークポイント

サフィックス スタイル
_pc min-width: 769px
_sp max-width: 768px

対象のクラス名にサフィックスを設定
<p class="mt_pc">

対象クラス
カラム用アイテム（ahf_fitem～）、文字サイズ、
文字揃え、余白、角丸

タイトル .block_fair_title02

タイトル .title02

タイトル .title03

タイトル title04

ディレクトリ構成

ページコード（半角英数字最大8文字）　例）abcdefgh

ファイル種類 パス
html ●abcdefgh.html （●はc,r,e,g等）
css {=path.css=}/usr/ahLp.css
img {=path.img=}/usr/lp/abcdefgh/～.jpg（もしくはpng）

HTML設定例

サイトのメインコンテンツ幅は1200pxですが980pxで制作をお願いします。
一番外側は「<section id="" class="ahf_wrap">」で囲ってください。
間にイベント（商品棚）を設定する場合は各コーナーは別々に囲ってください。
コーナーの各コンテンツは「<article class="ahf_block">」で囲ってください。

    
<!-- コーナー01 -->
<section id="" class="ahf_wrap">
 <article class="ahf_block">
  看板
 </article >
 <article class="ahf_block">
  コンテンツ1-1
 </article >
</section>

<!-- システムの設定で表示します -->
イベント01（商品棚）

<!-- コーナー02 -->
<section id="" class="ahf_wrap">
 <article class="ahf_block">
  コンテンツ2-1
 </article >
 <article class="ahf_block">
  コンテンツ2-2
 </article >
</section>

<!-- システムの設定で表示します -->
イベント02（商品棚）

<!-- コーナー03 -->
<section id="" class="ahf_wrap">
  <article class="ahf_block">
    コンテンツ3-1
  </article >
</section>

<!-- システムの設定で表示します -->
イベント03（商品棚）
https://senoweb.jp/note/displayflex-tip/
イメージ

ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。

イメージ

ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。

イメージ

ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。

イメージ

ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。

イメージ

ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。

イメージ

ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。

イメージ

ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。

絞り込み項目

  • 価格
  • キーワード