操作方法
操作方法
簡易レイアウトの実装に必要なコードのご紹介
実装にあたりCSSファイルをぺージへ設定し、追加したいレイアウトのHTMLを挿入する必要がございます。
「CSSファイルの設定」と「HTMLの挿入」の流れについては、下記動画をご覧ください。
なお、CSSファイルのアップロードについて「ドラッグ＆ドロップ」の方法で追加をしておりますが「ファイルを選択してください。」のボタンをクリックして設定をすることも可能ですので、どちらかの方法でご対応ください。
CSSファイルは下記よりダウンロードをお願いいたします。
■ HTMLの挿入に関して
============================================================
パターン@
HTML
<div class="pp-answer">
<p></p>
<section id="pp-list" class="pp-area none-animation">
<div class="pp-area">
<div class="inner">
<ul class="pp-list-cmp01 pp-d-flex pp-fxd-col pp-gapy-50 pp-maxw-350@sp pp-mx-auto@sp">
<li class="pp-item pp-d-flex pp-jc-sb pp-fxw-wrap">
<div class="pp-img pp-w-25% pp-w-100%@sp pp-mb-10@sp"><span class="pp-ofi-100"><img src="https://placehold.jp/500x500.png" alt=""></span></div>
<div class="pp-block-txt pp-w-70% pp-w-100%@sp">
<div class="pp-head pp-fz-18 pp-fw-bold pp-mb-10"><span class="pp-pp-headin pp-fz-24">1</span>テキストが入りますテキストが入ります
</div>
<div class="pp-txt pp-fz-1.1vw">テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</div>
</div>
</li>
<li class="pp-item pp-d-flex pp-jc-sb pp-fxw-wrap">
<div class="pp-img pp-w-25% pp-w-100%@sp pp-mb-10@sp"><span class="pp-ofi-100"><img src="https://placehold.jp/500x500.png" alt=""></span></div>
<div class="block-txt pp-w-70% pp-w-100%@sp">
<div class='pp-head pp-fz-18 pp-fw-bold pp-mb-10'><span class='pp-pp-headin pp-fz-24'>2</span>テキストが入りますテキストが入ります
</div>
<div class="pp-txt">テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</div>
</div>
</li>
</ul>
</div>
</div>
</section>
<p></p>
</div>
パターンA
HTML
<div class='pp-answer'>
<p ></p>
<section class='pp-py-60' id='grid04'>
<div class='inner fead-up mv'></div>
<div class=''>
<div class='inner fead-up mv'>
<div class='pp-fxd-even pp-d-flex pp-fxd-col pp-rgap-40'>
<div class='pp-d-flex pp-fxw-wrap pp-jc-sb pp-ai-c pp-fxd-col@sp pp-bgc-white'>
<div class='pp-w-48% pp-d-contents@sp'>
<div class='pp-pic pp-ofi-70 pp-mb-20@sp fead-cover mv'><img src='https://placehold.jp/500x500.png' alt=''></div>
</div>
<div class='pp-w-48% pp-d-contents@sp'>
<h3 class='pp-fz-24 pp-fw-bold pp-order-n1@sp pp-mb-20'>見出し</h3>
<div class='pp-text'>テキスト準備中テキスト準備中テキスト準備中テキスト準備中テキスト準備中テキスト準備中テキスト準備中テキスト準備中テキスト準備中テキスト準備中
テキスト準備中テキスト準備中テキスト準備中テキスト準備中テキスト準備中テキスト準備中テキスト準備中テキスト準備中テキスト準備中</div>
</div>
</div>
<div class='pp-d-flex pp-fxw-wrap pp-jc-sb pp-ai-c pp-fxd-col@sp pp-bgc-white'>
<div class='pp-w-48% pp-d-contents@sp'>
<div class='pp-pic pp-ofi-70 pp-mb-20@sp fead-cover mv'><img src='https://placehold.jp/500x500.png' alt=''></div>
</div>
<div class='pp-w-48% pp-d-contents@sp'>
<h3 class='pp-fz-24 pp-fw-bold pp-order-n1@sp pp-mb-20'>見出し</h3>
<div class='pp-text'>テキスト準備中テキスト準備中テキスト準備中テキスト準備中テキスト準備中テキスト準備中テキスト準備中テキスト準備中テキスト準備中テキスト準備中
テキスト準備中テキスト準備中テキスト準備中テキスト準備中テキスト準備中テキスト準備中テキスト準備中テキスト準備中テキスト準備中</div>
</div>
</div>
<div class='pp-d-flex pp-fxw-wrap pp-jc-sb pp-ai-c pp-fxd-col@sp pp-bgc-white'>
<div class='pp-w-48% pp-d-contents@sp'>
<div class='pp-pic pp-ofi-70 pp-mb-20@sp fead-cover mv'><img src='https://placehold.jp/500x500.png' alt=''></div>
</div>
<div class='pp-w-48% pp-d-contents@sp'>
<h3 class='pp-fz-24 pp-fw-bold pp-order-n1@sp pp-mb-20'>見出し</h3>
<div class='pp-text'>テキスト準備中テキスト準備中テキスト準備中テキスト準備中テキスト準備中テキスト準備中テキスト準備中テキスト準備中テキスト準備中テキスト準備中
テキスト準備中テキスト準備中テキスト準備中テキスト準備中テキスト準備中テキスト準備中テキスト準備中テキスト準備中テキスト準備中</div>
</div>
</div>
<div class='pp-d-flex pp-fxw-wrap pp-jc-sb pp-ai-c pp-fxd-col@sp pp-bgc-white'>
<div class='pp-w-48% pp-d-contents@sp'>
<div class='pp-pic pp-ofi-70 pp-mb-20@sp fead-cover mv'><img src='https://placehold.jp/500x500.png' alt=''></div>
</div>
<div class='pp-w-48% pp-d-contents@sp'>
<h3 class='pp-fz-24 pp-fw-bold pp-order-n1@sp pp-mb-20'>見出し</h3>
<div class='pp-text'>テキスト準備中テキスト準備中テキスト準備中テキスト準備中テキスト準備中テキスト準備中テキスト準備中テキスト準備中テキスト準備中テキスト準備中
テキスト準備中テキスト準備中テキスト準備中テキスト準備中テキスト準備中テキスト準備中テキスト準備中テキスト準備中テキスト準備中</div>
</div>
</div>
</div>
</div>
</div>
</section>
<p ></p>
</div>
パターンB
HTML
<div class='pp-answer'>
<p ></p>
<section class='pp-py-60' id='absolute'>
<div class='inner fead-up mv'>
<div class='pp-pos-rel pp-p-100 pp-p-70@tb pp-p-30@sp'>
<div class='pp-pa-100 pp-ofi'><img src='https://placehold.jp/500x500.png' alt=''></div>
<div class='pp-tbox pp-c-white pp-pos-rel'>
<h3 class='pp-ta-c pp-fz-24 pp-fw-bold'>見出し</h3>
<div class='pp-text pp-mt-20 pp-ta-c'>テキストテキストテキスト<br >
<br >
テキストテキストテキストテキストテキストテキストテキスト<br >
<br >
テキストテキストテキストテキスト
</div>
</div>
</div>
</div>
</section>
<p ></p>
</div>
