ブロックの印

MITATE が変えるのは、印を付けた場所の文字だけです。印のない部分には手を入れません。

訴求を差し替えるブロック

<section data-mitate-block="hero">
  <p data-mitate-field="eyebrow">いちばん人気のコース</p>
  <h1 data-mitate-field="title">速さも、おトクも。</h1>
  <p data-mitate-field="sub">……</p>
  <ul data-mitate-field="points">
    <li>……</li>
  </ul>
</section>

• data-mitate-block="hero" を付けた要素の中で、data-mitate-field を付けた要素の文字を変えます。
• eyebrow（小見出し）・title（見出し）・sub（説明）は文字を入れ替えます。見出しの改行は <br> になります。
• points の印は ul などの一覧の要素に付けます。中身は <li> の並びに入れ替えます。
• 印を付けなかった項目は変えません。
• 文字は文字として入れ、HTML としては差し込みません。

差し替えたブロックには data-mitate-variant="関心の key"（例：speed）が付き、標準の表示に戻すと外れます。CSS で見た目を変えたいときに使えます。

プランを出す場所

<div data-mitate-plan hidden></div>

最初は hidden にしておくと、プランを組み立てたときだけ表示されます。中身は次の要素で組み立てます。

クラス	中身
mitate-plan-lines	コース・オプション・割引・特典の一覧（ul）
mitate-plan-text ／ mitate-plan-sub	各行の内容と、その理由
mitate-plan-total	期間の合計と、請求が別の割引（dl）
mitate-plan-missing	まだ分からない条件

プランを出したあと、この要素には data-mitate-plan-ready が付きます。

読んでいる場所・操作の文

• data-mitate-section="料金"：読んでいる場所を数えるときのセクションの名前です。付けなければ、セクションの見出し（h1〜h3）を使います。
• data-mitate-act="料金シミュレーターを開いた"：押したときに判定に渡す文です。付けなければ、ボタンやリンクの文字から「『料金表』を押した」のような文を作ります。

読ませない場所

<div data-mitate-ignore>……</div>

この中は、操作も文字も読みません。会員情報の表示や、お客様のチャットの画面に付けてください。入力欄（input・textarea・select）の値は、印がなくても読みません。

一覧は タグの属性の一覧 にもあります。