## 料金プラン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をお読み下さい。