=page-title
HTML
=/page-title

=pp
このページでは、設定ファイルの<b>HTML</b>セクションの解説をいたします。
=/pp

=pp
=label
HTMLの設定例:
=/label

=code
//--------------------
// HTML
//--------------------
cfg.html=String.raw`

<div class="knquiz knquiz-reset">
	<div class="knquiz-back"></div>
	<div class="knquiz-front">
		<div class="knquiz-heading">
			<div class="knquiz-title">
クイズに答えて懸賞に<span class="knquiz-inbl">応募しよう!</span>
			</div>
			<div class="knquiz-desc">
電気を作るのには、様々な方法がありますが、<span class="knquiz-highlight">「地上の太陽」と例えられる発電方式は何でしょう？</span>
下の<span class="knquiz-card-icon">?</span>カードの中に、<span class="knquiz-inbl">ヒントが隠れています！</span>
			</div>
		</div><!--/knquiz-heading-->
		<div class="knquiz-body">
			<div class="knquiz-game">
				<div class="cdgrid"></div>
			</div>
		</div><!--/knquiz-body-->
		<div class="knquiz-footer">
			<div class="knquiz-instruction">
答えがわかった方は、下の欄に答えを記入して<span class="knquiz-highlight">「応募する」</span>をクリックして<span class="knquiz-inbl">ください。</span>
			</div>
			<div class="aplform">
				<div class="aplform-form-group">
					<div class="aplform-label">
➤ 「地上の太陽」と例えられる発電方式は何？
					</div>
					<div class="aplform-input-group">
						<input class="aplform-input" type="text" name="answer" placeholder="答えをここに記入"/>
						<div class="aplform-submit" tabindex="0">
							<div class="aplform-submit-back"></div>
							<div class="aplform-submit-label">応募する</div>
						</div>
					</div><!--/aplform-input-group-->
				</div><!--/aplform-form-group-->
			</div><!--/aplform-->
		</div><!--/knquiz-footer-->
	</div><!--/knquiz-front-->
</div><!--/knquiz-->

`;
=/code^
=/pp

=pp
HTML内の「クイズに答えて。。。」や「答えがわかった方は。。。」などの文言は自由に変更できます。
=/pp

=raw
<a id="span"></a>
=/raw

=pp
文言の中で以下のように <b>!@<span>@!</b>...<b>!@</span>@!</b> タグが使用されているケースがあります。
=/pp

=pp
=code
電気を作るのには、様々な方法がありますが、<@span:hl><span class="knquiz-highlight"><@span:>「地上の太陽」と例えられる発電方式は何でしょう？<@span:hl></span><@span:>
下の<@span:hl><span class="knquiz-card-icon"><@span:>?<@span:hl></span><@span:>カードの中に、<@span:hl><span class="knquiz-inbl"><@span:>ヒントが隠れています！<@span:hl></span><@span:>
=/code^
=/pp

=pp
以下にこれらの <b>!@<span>@!</b> タグの役割を説明します。
=/pp

=para-title
<@idx:para:1>. <span class="knquiz-highlight">...</span>
=/para-title^

=pp
このタグで文言を囲むと、その部分が強調されて表示されます。どのように強調されるかはCSSによって決まります。
=/pp

=para-title
<@idx:para>. <span class="knquiz-card-icon">...</span>
=/para-title^

=pp
このタグはヒントカードを表現する「？」にスタイルを付加するのに使用します。どのようなスタイルが付加されるかはCSSによって決まります。
=/pp

=para-title
<@idx:para>. <span class="knquiz-inbl">...</span>
=/para-title^

=pp
このタグで文言を囲むと、囲まれた文言内での折り返しを防ぐことができます。例えば、次の文を考えてみてください、
=/pp

=pp
=code
春のキャンペーン懸賞へようこそ！ クイズに答えて懸賞に応募しよ
う!
=/code
=/pp

=pp
デイスプレイのサイズによっては、上記のように文が二行に渡る場合があります。文節で折返してくれると読みやすいのですが、運が悪いと「う!」の部分だけが次の行へ渡る場合があります。さてここで、以下のように !@<span class="knquiz-inbl">...</span>@! で「応募しよう!」を囲んだとします。
=/pp

=pp
=code
春のキャンペーン懸賞へようこそ！ クイズに答えて懸賞に<span class="knquiz-inbl">応募しよう!</span>
=/code^
=/pp

=pp
この場合、改行が必要ならば「応募しよう!」の前で改行が起きるので読みやすくなります。
=/pp

=pp
=code
春のキャンペーン懸賞へようこそ！ クイズに答えて懸賞に
応募しよう!
=/code
=/pp