ホームページ作成ソフトメニュー

料金についてのページを作成する|テーブルタグの基本

ホームページで必須の料金ページ

解りやすい料金体系表を作る

ホームページで実際にお申し込みや問い合わせ、注文などのコンバージョンを得るためには、明確にサービスの料金を掲載した方が良いです。

 

例えば英会話のスクールや、学習塾のホームページで、授業料や入塾金などが明記されていなければ、問い合わせをするのに躊躇するはずです。

 

士業系では行政書士や測量、登記屋さん、建築業(リフォーム、外壁塗装)など、料金を明確に提示できない場合でも、ある程度の概算でサービス料金を掲載する必要があります。

 

概算になる場合は単価を明記すると共に、過去の「見積もり例」などを羅列します。

 

私の場合は、中小企業に対してのホームページ作成提供で、たくさんのサイトを提供していますが、飲食店などでもメニューとして、かなり細かく料金を設定するようアドバイスしています。これは理容、美容関係、整体院、整骨院等でも同じ事が言えます。

 

また、期間限定のサービス特売品などがある場合は、料金ページのトップに掲載して、トップページのコンテンツから、直接リンクで飛ばすようにします。

 

商品画像と価格を見せるためのHTML

商品と価格を見せる一般的な配置の例としては、枠の中に画像を右寄せにして、その左横にサービスと価格を表示させます。あなたのビジネスにあわせて色々工夫してみて下さい。

 

サイト作成ソフトシリウスの場合

シリウスのメインコンテンツの横幅は620PX程度です。商品にもよりますが、バランスよく横幅イッパイに枠を指定して、文章と価格を掲載するには、画像の横幅は250PX程度でまず設定し、後で調節して見て下さい。

 

画像を250PXで、「回り込み指定」した例
画像選択時の設定

 
  • サイズ指定方法・・・・・・・比率固定(横)
  • 画像サイズ横幅・・・・・・・250PX
  • 回り込み・・・・・・・・・・右回り込み
  • 画像ファイルへのリンク・・・別ウインドウ
  • 枠の設定・・・・・・・・・・通常枠

 

例1

料金表

TV用液晶モニター

 

液晶ディスプレイ自体でブルーライトを
低減させるブルーライト低減機能搭載

 

・23.6型ワイド 液晶ディスプレイ
・LCD-AK242EH

 

特別価格・・・24,500円(税込み)

例2

料金表


ナチュラルベジフルスムージー

 

酵素カプセルタイプ

 

生酵素大地の力カプセルは、220種類以上の原材料を使用し、豊富な乳酸菌、発酵成分、ビタミン、ミネラルなどを 1粒のカプセルに凝縮 !!

 

不足しがちな栄養素を、生で摂取するのと同等の栄養価で補えます。

 

1袋価格・・・2,100円(税込み) ・60粒(1粒重量410mg)・1粒内容量250mg

 

最短ホームページテンプレートの場合

最短ホームページテンプレートでは、付属の「ホームページが作れるようになるサイト」のパーツテンプレートから、画像と文字を横に並べるパーツを選択して貼り付けます。

 

最短ホームページテンプレート

 

このパーツを利用した場合は、枠がメインコンテンツの横幅いっぱいで表示されるため、画像の大きさは200PX〜250PXに設定するとテキストとのバランスが良くなります。

 

枠線色背景色も簡単に変更できますので、コンテンツにあった色調に調節して下さい。

 

パーツテンプレートでは画像が左になっていますが、画像を右に配置するHTMLを貼っておきますので、コピーしてご利用下さい。

 

<table width="98%" style="border:1px solid blue;" 
cellspacing="0" align="center">
  <tr>
    <td align="left" valign="top" width="350" style="padding:15px;">
      文章
    </td>
    <td align="center" valign="middle" style="padding:8px;">
      <img src="画像ファイル名" width="150" border="0" alt="">
    </td>
  </tr>
</table>

 

テーブル枠の基本

テーブル枠は、料金表のほかに、学習塾や英会話スクールでは時間割スケジュールなどにも頻繁に利用されます。飲食店ではドリンクメニューにも利用できます。

 

テーブル枠のタグの意味をある程度理解し、使いこなせるようになると色々応用できますし、ホームページ作成が楽しくなりますのでぜひ基本は覚えてください。

 

テーブル枠は「表」とも呼ばれます。シリウスではテーブル生成機能により自動で作成する事ができますが、その原理の基本は理解しておく必要があります。

 

テーブルタグの基本概念

まずザッと下記画像でテーブルタグの概念図を理解し、そのパターンをイメージ出来るようにします。テーブルは表なので、何列何行にするかを、<tr><td>の数で決めるだけです。

 

テーブルの基本

  • <table>・・全体枠の始まりを指示するタグ
  • </table>・・全体枠の終わりを指示するタグ
  • <tr>・・・・行の始まりを指示するタグ
  • </tr>・・・・行の終わりを指示するタグ
  • <td>・・・・列の始まりを指示するタグ
  • </td>・・・・列の終わりを指示するタグ

 

順番にテーブルを作成してきます
ステップ1・・・テーブル枠の基本(1行、1列)
テキスト@

テーブルの基本

テキスト@1列、1行の中に表示されます。テーブル枠の最も基本的な形で、ココから行と列を増やしていく事で、多彩な表が作成できます。

 

<table width="100%" style="border:1px solid #000000">
<tr>
<td>テキスト@</td>
</tr>
</table>

width="100%"・・メインのテーブルの大きさを指定します。
border:1px・・・・枠線の太さを指定します。数字が大きいほど太くなります。
solid #000000・・枠の色を指定する#から下の6桁で色がきまります。

カラーコード表

6桁の色表一覧

 

ステップ2・・・1行の中に2列を作る
テキスト@ テキストA

テーブルの基本

1行(<tr>が1セット)の中に<td>を2セットにする事で2列になりました。後は<td>を増やしていく事で、基本的に何列でも作成可能です。

 

<table width="100%" style="border:2px solid #000000">
<tr>
<td>テキスト@</td>
<td>テキストA</td>

</tr>
</table>

上記例では border2 にして外枠を太くしています。

 

ステップ3・・・2行目を作る
テキスト@ テキストA
テキストB テキストC

テーブルの基本

ステップ2で2列にしたテーブルを、2行にしてみます。</tr>で、いったん1行目を閉じて、2列目を開始するために<tr>新しい行を開始させます。この繰り返しで、行と列を必要なだけ作成できます。

 

<table width="100%" style="border:1px solid #000000">
<tr>
<td>テキスト@</td>
<td>テキストA</td>
</tr>
<tr>
<td>テキストB</td>
<td>テキストC</td>
</tr>
</table>

一回目の<tr>から</tr>をコピーすると簡単です。

 

ステップ4・・・列の幅の割合を変更する
テキスト@ テキストA
テキストB テキストC

テーブルの基本

<td width="150">width="150"は、数字でPX数を指定する事で、その列の横幅を固定できます。

 

<table width="100%" style="border:1px solid #000000">
<tr>
<td width="150">テキスト@</td>
<td>テキストA</td>
</tr>
<tr>
<td>テキストB</td>
<td>テキストC</td>
</tr>
</table>

 

表の左上であるテキスト@の横幅を指定すると、その下の行のテキストBにも枠幅指定の定義が影響します。なので、各列の一番上のみに枠幅の指定をするだけで良い事になります。

 

テーブルについては、作成ソフトを利用する場合に、以上の事だけ理解できていれば十分対応できます。シリウスの場合ではテーブル枠を自動作成できますし、最短ホームページテンプレートの場合はコピペ、貼り付け、でテーブルが作成できます。

 

ただ、上記のように、HTMLタグの基本原理を理解しておくと、ホームページ作成に幅ができ、将来応用する場合に役立ちます。

 

テーブル枠で時間割を表示させた例

7行6列の例

 

フリートーク

14:00-14:45

 

フリートーク

14:00-14:45

 

フリートーク

14:00-14:45

 

フリートーク

14:00-14:45

 

フリートーク

14:00-14:45

 

小学生英会話

10:00-10:45

 

フリートーク

15:00-15:45

 

幼稚園英会話

15:20-16:20

 

フリートーク

15:00-15:45

 

幼稚園英会話

15:20-16:20

 

フリートーク

15:00-15:45

 

小学生英会話

11:00-11:45

 

小学生英会話

16:30-17:15

 

幼稚園英会話

16:20-17:20

 

小学生英会話

16:30-17:15

 

幼稚園英会話

16:20-17:20

 

小学生英会話

16:30-17:15

 

英検対策5級

13:00-14:00

 

小学生英会話

17:30-18:15

 

小学生英会話

17:30-18:15

 

小学生英会話

17:30-18:15

 

小学生英会話

17:30-18:15

 

小学生英会話

17:30-18:15

 

英検対策4級

14:15-15:15

 

小学生英会話

18:30-19:15

 

小学生英会話

18:30-19:15

 

小学生英会話

18:30-19:15

 

小学生英会話

18:30-19:15

 

小学生英会話

18:30-19:15

 

中学生〜大人

英会話

19:30-20:30

 

中学生〜大人

英会話

19:30-20:30

 

中学生〜大人

英会話

19:30-20:30

 

中学生〜大人

英会話

19:30-20:30

 

中学生〜大人

英会話

19:30-20:30

 

 

タグの基本ルール

テーブルタグは<table></table><tr>と</tr><td>と</td>のように、ルールとして必ず開始タグ終了タグで1セットになっている必要があります。この関係が成り立っていないと、ホームページのブラウザ表示が崩れてしまいます。

 

他のタグの例では、<p>段落</p><div>領域</div><a href=リンクURL">リンク</a>なども同じルールですが、タグの基本原理なので、覚えておいて下さい。