料金プランRate Plans

  エコノミープラン50,000 スタンダードプラン100,000おすすめ プレミアムプラン300,000
ページ数 5ページまで 10ページまで 20ページまで
デザイン案 1案を提案 2案を提案 3案を提案
サポート期間 1ヶ月間 3ヶ月間 6ヶ月間

「料金プラン」ブロックについて

<!--▼▼▼▼▼ここから「料金プラン」-->
<section class="bg1 bg-pattern1" id="plan">

<h2 class="c">料金プラン<span>Rate Plans</span></h2>

<div class="scroll">

<table class="ta1 plan blur">
<tr>
<th>&nbsp;</th>
<th><i class="fa-solid fa-crown"></i>エコノミープラン<span><span class="small">¥</span>50,000</span></th>
<th><i class="fa-solid fa-crown"></i>スタンダードプラン<span><span class="small">¥</span>100,000</span><span class="osusume">おすすめ</span></th>
<th><i class="fa-solid fa-crown"></i>プレミアムプラン<span><span class="small">¥</span>300,000<span class="small">〜</span></span></th>
</tr>
<tr>
<td>ページ数</td>
<td>5ページまで</td>
<td>10ページまで</td>
<td>20ページまで</td>
</tr>
<tr>
<td>デザイン案</td>
<td>1案を提案</td>
<td>2案を提案</td>
<td>3案を提案</td>
</tr>
<tr>
<td>サポート期間</td>
<td>1ヶ月間</td>
<td>3ヶ月間</td>
<td>6ヶ月間</td>
</tr>
</table>

</div>

</section>
<!--▲▲▲▲▲ここまで「料金プラン」-->

各ボックススタイルは

cssフォルダのstyle.cssから「.ta1.plan」でテキスト検索してみて下さい。詳しい解説もあります。

画面幅が狭くなると横スクロールが出ます

小さな端末でもテーブルレイアウトが崩れにくいように横スクロールが出るようになっています。この設定は、style.cssの
.scroll .ta1.plan {width: 700px;}
とその上の行です。画面幅が800px以下になったらテーブル幅を700px固定にし、横スクロールバーを出すという指示です。
スクロールバーが不要なら、ta1の外側の親ボックス(scroll)を削除(↓)すればOKです。以下は画面幅を狭くするのに合わせてテーブル幅も狭くなります。

  エコノミープラン50,000 スタンダードプラン100,000おすすめ プレミアムプラン300,000
ページ数 5ページまで 10ページまで 20ページまで
デザイン案 1案を提案 2案を提案 3案を提案
サポート期間 1ヶ月間 3ヶ月間 6ヶ月間

列は増減OKです

  エコノミープラン50,000 スタンダードプラン100,000おすすめ
ページ数 5ページまで 10ページまで
デザイン案 1案を提案 2案を提案
サポート期間 1ヶ月間 3ヶ月間

<section class="bg1 bg-pattern1" id="plan">について

「bg1」と「bg-pattern1」の2つのclassが指定されており、それぞれstyle.cssで検索すると設定内容がわかります。
「bg1」は背景色と文字色だけ指定されているスタイル。「bg-pattern1」は背景の格子柄のパターン(bg_pattern1.png)の読み込みです。

idはメニューのリンク先の目印です。
メニュー側は、
<a href="#plan">料金プラン</a>
になっています。
トップページ以外からトップページに戻るリンクだと、別ページへのリンクになるので
<a href="index.html#plan">料金プラン</a>
と書きます。

<i class="fa-solid fa-crown"></i>は王冠のアイコンです

アイコンはFont Awesomeを使用しています。アイコンを変更したい場合はmanual.htmlをお読み下さい。