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

サンプルページはこちら

sampleLp.aspx

CSSはこちら*

ahLp.css

HTMLはこちら*

ahLpFmt.aspx

* 右クリックメニューからリンク先を保存してください。拡張子のaspxはhtmlに変更して下さい。
ディレクトリ構成はこちら

カラム

カラムクラス名

看板カラム

1カラム

2カラム

2カラムボタン付

3カラム

4カラム

6カラム

ユーティリティー

ボタン

フォント

カラー

余白

角丸・その他

テーブル

ブレークポイント

タイトル

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

2カラム看板用

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

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

1カラム【E1】

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

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

標準のｈ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_center

ahf_fbox_left

通常
通常

通常

ahf_fmiddle
ahf_fmiddle

ahf_fmiddle

通常

ahf_gap20

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（商品棚）

LPフォーマット

カラム

ユーティリティー

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

1列 テキストのみ

SP_1列 テキストのみ

SP_1列 左画像

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

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

2カラム 看板用

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

1カラム 【E1】

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

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

標準のｈ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 2カラム 横並び・SP 1カラム 縦並び左側が上 【E2-4】

見出しです 見出しです

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】

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

カラム クラス名

フォント

フォント サイズ

テキスト揃え

フォント スタイル

カラー

余白

ユーティリティー

角丸

その他

1列テキストのみ

SP_1列テキストのみ

SP_1列左画像

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

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

2カラム看板用

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

1カラム【E1】

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

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

標準のｈ2見出し【EH2】

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

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

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

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

見出しです見出しです

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

見出しです見出しです

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

見出しです見出しです

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

見出しです見出しです

見出しです見出しです

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

見出しです見出しです

見出しです見出しです

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】

見出しです見出しです

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】

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

カラムクラス名

フォントサイズ

フォントスタイル