料金プランRate Plans
エコノミープラン¥50,000 | スタンダードプラン¥100,000おすすめ | プレミアムプラン¥300,000〜 | |
---|---|---|---|
ページ数 | 5ページまで | 10ページまで | 20ページまで |
デザイン案 | 1案を提案 | 2案を提案 | 3案を提案 |
サポート期間 | 1ヶ月間 | 3ヶ月間 | 6ヶ月間 |
エコノミープラン¥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> </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ヶ月間 |
エコノミープラン¥50,000 | スタンダードプラン¥100,000おすすめ | |
---|---|---|
ページ数 | 5ページまで | 10ページまで |
デザイン案 | 1案を提案 | 2案を提案 |
サポート期間 | 1ヶ月間 | 3ヶ月間 |
「bg1」と「bg-pattern1」の2つのclassが指定されており、それぞれstyle.cssで検索すると設定内容がわかります。
「bg1」は背景色と文字色だけ指定されているスタイル。「bg-pattern1」は背景の格子柄のパターン(bg_pattern1.png)の読み込みです。
idはメニューのリンク先の目印です。
メニュー側は、
<a href="#plan">料金プラン</a>
になっています。
トップページ以外からトップページに戻るリンクだと、別ページへのリンクになるので
<a href="index.html#plan">料金プラン</a>
と書きます。
アイコンはFont Awesomeを使用しています。アイコンを変更したい場合はmanual.htmlをお読み下さい。