ホームページテンプレート・スタイルシートでデザイン

ホームページテンプレートでワンランク上のウェブデザイン

ホームページを作成したことありますか？
自分で頑張って作成した方は多いことと思います。
で、その出来栄えには納得できましたか？
そしてそのホームページは満足のいく効果がありましたか？

きっと首を横に振る方が圧倒的に多いのではないでしょうか？

そんなあなたが上の質問に対して首を縦に振ることができるようなホームページはいったいどんなものなのでしょうか？

ホームページの良し悪しの判断基準

ホームページの良し悪しの判断基準は大抵以下の2つのポイントに絞られるでしょう。

１）カッコいい、またはキレイ!!
２）アクセスがある、売り上げがある!!

ホームページを自分で作ったことのある人の多くは何らかのホームページ作成ソフトを購入して作成することが多いと思います。そのソフトウェアには大抵、「ワープロのように」とか「HTMLなんか知らなくても」とか「初心者でもカンタン」なんてキャッチコピーがついていたりします。

そうしてそんなキャッチコピーのホームページ作成ソフトを購入し、はじめてホームページを作成した人の多くはこのように思います。

なんか納得いかない!!
なんか素人っぽい!!
ちょっとダサい!!
素敵なホームページって思えない!!

そして、せっかく苦労して作成したのにそれほど効果も無いという結果が待ち受けていたりします。

自分でホームページを作成するワケ

あなたの作成したホームページが趣味のホームページはそれでもよいでしょう。しかしながら多くの方が自分のお店や会社のホームページを作成しようと考えています。自営業の方などは忙しい仕事の合間に頑張って作成しようとしていることでしょう。

ホームページ制作業者に頼んだら高そうだし…
どの業者に頼んだらいいかわからないし…
ワープロや表計算ソフトはそれなりに使いこなせるからホームページ作成ソフトくらい…
ソフトの値段も手ごろだし…
マニュアル本も色々販売されてるし…

こんな理由でホームページ作成ソフトを購入し、マニュアル本も購入し、頑張るのです。それだけ頑張って、時間をかけてやっと出来上がったホームページですが…

なんか納得いかない!!
なんか素人っぽい!!
ちょっとダサい!!
素敵なホームページって思えない!!

多くの方がここで挫折したり、あるいは妥協してそれほど効果の無いホームページを公開したままにしてしまいます。また、なかには「めんどくせえ!!」とホームページ制作業者に依頼してしまう方もいるでしょう。

それでは何のためにホームページ作成ソフトを購入し、時間をかけて頑張ったのかわかりません。

ホームページ作成ソフトで作ったホームページ

先にも書きましたが多くのホームページソフトには大抵、「ワープロのように」とか「HTMLなんか知らなくても」とか「初心者でもカンタン」なんてキャッチコピーがついています。それらのホームページ作成ソフトの編集画面は確かにワープロのようです。でもワープロで作成する文書とは明らかにちがうものがあります。

それはレイアウトです。

ワープロの文書は何ページ作成しても1つのファイルです。最終的には主に印刷して利用するためホームページのようにメニュー部分などはありません。背景色をつけたりすることもめったにありません。

ホームページには必ずメニューの部分があります。ページ全体のレイアウトを考えるときにそのメニュー部分をどのようにするか、どんなボタンにするかで全体の雰囲気は大きく変わります。

配色のバランスやボタンの大きさ、配置はホームページの作成において重要なポイントです。メインのコンテンツの部分はほとんど文章だったり、表を入れたりあるいは写真を貼ったりとワープロの作業とそれほど変わりません。

このように全体のレイアウトや、メニューの配置がうまくいかないことが、ホームページをダサくしてしまう原因となります。つまり、レイアウトやメニュー部分の構成がしっかりしていればあとは文章を書いたり写真を貼ったりするだけの作業になります。ワープロと同じような作業ですね。

しかしながらこの全体のデザイン、レイアウトが初心者の人にとっては大きなハードルとなります。どんなに頑張っても限界があります。

HTMLは難しいのか？

ホームページ作成ソフトには「HTMLなんて知らなくても…」なんて書いてあったりしますが、そんなことはありません。ある程度のレベル以上のホームページを作成しようと思えば最低限の知識は必要です。

まずはHTMLを見てみましょう。あなたの作成したホームページのHTMLソースをご覧になって見ましょう。もし作成したことが無ければどこかのホームページのHTMLソースを見てみるとよいでしょう。

こんなのわからん…

と、いうのが最初の感想でしょう。では、今ご覧の、このページのHTMLソースはいかがでしょうか？ずいぶん簡潔だとは思いませんか？ま、確かにこんなレイアウトのホームページですから…では右のようなホームページのHTMLはどうでしょう？

全ては表示できていませんが右のスクロールバーを見るとわかるようにほぼ全体が見えています。そしてこのページのHTMLもシンプルであることに気付くことでしょう。

あなたがホームページ作成ソフトで作ったホームページのHTMLはもっとアルファベットの記述が多くボリュームもあったと思います。よく見るとおそらく「<td>」とか「<span class="…>」とか「<font color="…>」等の記述にあふれていると思います。ソフトウェアによっては<tr><td>が次々と出てきます。

そんなに色々とHTMLを書き出しているのに出来上がりは「ダサい…」

何故なのでしょう…ただ1つわかったことはシンプルなHTMLでもダサくないホームページを作ることは出来るということですね。そして、そのHTMLがとてもカンタンな記述のみで書かれていることにも気付くでしょう。

簡単なHTMLでもカッコいいホームページができるの？

では、もう一度右のホームページのHTMLソースを見てみましょう。今度は全部ご覧ください。

別ウィンドウが開きます。ちょっと見てみましょう。

HTMLソースを見てみる

そうかそうか!!こんなHTMLならカッコよくなるんだ…コピーして…ペースト…ハイ出来上がり
さてどんな出来栄えでしょうか？

ダメです!!こんなのダサすぎます!!

そうですね。これではダメですね。HTMLソースの13行目あたりに以下の記述があります。

<link href="../style/main.css" rel="stylesheet" type="text/css" />

この記述によるとひとつ上の階層にある「style」というフォルダの「main.css」とリンクするように書かれていますが、そこには「main.css」はありません。そこに「main.css」というファイルとその「main.css」に書かれている内容に必要な画像ファイルがあると右上のように表示されます。

「main.css」が何かというと、それがスタイルシートのファイルです。このページのデザインは全てこのスタイルシートのファイルで行っています。ですからそのファイルとのリンクが切れているこのページは何もデザインされていないページになってしまっています。

つまりカンタンなHTMLでもホームページは出来ますが、カッコいいデザインにするにはスタイルシートでレイアウトすることが必要というわけです。逆を言えばスタイルシートのファイルでデザインが出来ていればカンタンなHTMLでホームページを作ることが出来るというわけです。

簡潔なHTMLが必要なワケ

ところで、何故こんなに簡潔なHTMLにこだわるかというとそれには理由があります。

検索エンジン対策に効果的

検索エンジンはHTMLの記述を元に検索対象の内容を読み込みます。そのとき当然HTMLの文法に沿ってそのページに書かれている内容、重要なことなどを理解します。余計なHTMLがあればあるほど嫌われやすく、また文法的に誤りがあれば正当な評価さえしてくれない可能性があります。

ホームページの更新を簡素化

以前まではテーブルレイアウトが主流であり、HTMLソースには複雑な<trや><td>が多数存在し、HTMLを見ただけではどのようにレイアウトしているかがわかりづらかったものです。

しかしながら現在の主流はHTML自体にはそのページの中身を記述するのみにし、レイアウトは全てスタイルシートで行うようになってきました。デザインと内容を分けることで複雑なHTMLを簡潔に出来るようになり、サイトの運営、更新作業がスムーズに、簡素化することが可能になりました。

閲覧者にも優しい

テーブルレイアウトで複雑な記述の多いHTMLファイルとスタイルシートでレイアウトしたHTMLファイルではそのファイルサイズは当然大きな差があります。通信回線の高速化が進んだとはいえ少しでもその負担を軽減することは大切なことといえるでしょう。

HTML記述ミスが発見しやすい

ホームページ作成ソフトでホームページを作成しているとうっかりしているとそのソフトウェアの書き出すHTMLは数百行にもなってしまいます。そのとき何らかのミスがあり表示がおかしいとしてもどこがおかしいのか探すのは至難の業です。

スタイルシートでデザインしていれば単純なHTMLからミスを見つけるのはたやすく、ミスも大抵単純なタグの閉じ忘れといったものが多いでしょう。

スタイルシートには何が書かれている？

さて、スタイルシートでレイアウトするとHTMLを簡単にでき、様々なメリットがあることはわかりましたね。では、スタイルシートには何が書かれているでしょうか？

一応日本語でコメントが入れていますが、ちょっと見ただけでは何のことが書かれているか良くわかりませんね。こんなことがこのファイルには1000行余りにわたって書かれています。

基本的にはこのファイルは編集することはありません。ある程度理解が出来るようになってきたら編集することもあると思いますが…まずはこういう感じで書かれているということだけ見ておきましょう。不用意にいじるとレイアウトが崩れてしまいますので。

ホームページを見てみよう

さて、こんなスタイルシートでデザインしたホームページがどんなものかもう少し見てみましょう。

いかがでしょうか？よくご覧になるとわかりますが、HTMLの記述方法が詳しく書かれていますね。この記述方法に基づいていけば上のようなレイアウトのホームページが出来上がります。どのページもきちんとレイアウトされていますがかかれているHTMLだけで見るとすべてこんな感じのページです。それを全てスタイルシートでレイアウトしているだけなのです。

デザインの変更

ここまでの説明でHTMLファイルとスタイルシートのファイルについては理解できましたね。ホームページの内容はHTMLファイルに記述し、デザインはスタイルシートファイルに記述するんでしたね。

ということはスタイルシートのファイルを書き換えるとデザインが変更できるということです。ここで一応確認のため解説しておきますが、スタイルシートのファイルは基本的に1つのデザインに対してひとつあればよいのです。大抵のサイトの場合、デザインのパターンは1つでしょうから、スタイルシートのファイルはひとつあればよいのです。

例えば上のテンプレートでは「main.css」というスタイルシートのファイルを「style」フォルダに入れています。そうすると各HTMLファイルには以下のように書かれていきます。

<link href="style/main.css" rel="stylesheet" type="text/css" />
って書いたり（一番上の階層）

<link href="../style/main.css" rel="stylesheet" type="text/css" />
って書いたり（2番目の階層）

<link href="../../style/main.css" rel="stylesheet" type="text/css" />
って書いたり…（3番目の階層）

フォルダの階層に注意してよくご覧ください。赤い文字の部分です。このように1つのスタイルシートのファイルでサイト全体のデザインを管理していますから、スタイルシートを変更すればサイトのデザインが変えられます。

これらのページのHTMLは全て同じです。

スタイルシートのファイルの文字の色や背景色の部分を変更し、メニューボタンや見出しの背景画像の色調を変更しているだけです。ですからHTMLファイルには一切手を加えないでデザインを一気に変更することも可能です。

さて、ここまでの話は概ね理解できていますか？理解できていれば、次にスタイルシートのファイルの編集について少し書きましょう。ここまでの話が理解できていない人はもう一度最初からよく読んでノートやメモを取りながらきちんと理解しましょうね。

スタイルシート「main.css」を編集する

スタイルシートのファイル「main.css」の編集は注意が必要です。レイアウトについて記述しているところを不用意に書き換えてしまうとデザインが大きく崩れてしまうことがあります。必ずもとのファイルをバックアップしてから作業をしましょう。

/*ここから「h3」の見出し*/
#main-box h3 {
font-size: 0.9em;
color: #333333;
background-image: url(image/h3/h3_bg.gif);
background-repeat: no-repeat;
height: 20px;
margin-top: 15px;
margin-right: 10px;
margin-bottom: 5px;
margin-left: 10px;
padding-top: 15px;
padding-right: 15px;
padding-left: 35px;
}
* html #main-box h3 {
height: 35px;
}
/*h3の見出しの背景画像*/
#main-box h3.h3_1 {
background-image: url(image/h3/h3_1.gif);
color: #333366;
}

と、こんな風に書かれている部分があったりします。赤い文字の部分はフォントの大きさだったり色、背景画像のファイル名ですからあなたのホームページにあわせて変更しても大丈夫です。ただしフォントのサイズはあまり大きくしたりするとレイアウトが崩れたりしますのでほどほどに。

「margin」や「padding」はいじらない方が無難でしょう。レイアウトが崩れます。変な隙間が出たりします。ですからきっと編集するとすれば「色」に関する記述の部分がほとんどでしょう。

背景画像の編集

このテンプレートのレイアウトには背景画像をいくつか使用しています。例えば

これは見出し部分の背景画像です。HTMLで
<h2 id="company">会社概要・支社のご案内</h2>
なんて記述すると

のように表示されます。

のように文字の入っていないものも用意していますので、あなたが持っている画像編集ソフトなどで文字を入れるとよいでしょう。詳しくはマニュアルで。

また、メニューの部分もこんな画像を背景に使っています。

文字の入っていない

なんていうのもあります。これらもあなたのサイトにあうように文字を入れたりしましょう。

ところでこのメニューの背景画像はなぜ2段になっているかというと、そのメニュー部分にマウスが乗ってときに背景画像の表示位置を変更しています。そうするとマウスが乗ると「シャキーン」と色が変わって表示されます。

これらの背景画像は画像のサイズさえ間違わなければあなたのまったくオリジナルの画像を作成して利用することも出来ます。

ダサいホームページとさようなら…

さて、いかがですか？これまでホームページ作成ソフトに頼り切って作成してきたホームページとはおさらばしますか？スタイルシートでレイアウトしたホームページで検索エンジンにやさしく、閲覧者にやさしく、そしてあなた自身にもやさしいホームページ運営にチャレンジしてみませんか？

これまでHTMLソースから極力目を背けてきた人にとっては少々抵抗があるかもしれません。しかしながら自分でホームページを作成し、運営しようと思ったら最低限のHTMLの知識は必要です。そこを避けていてはワンランク上のホームページ運営は出来ません。

上のような30ページほどのHTML記述マニュアルで、必要な記述方法は全て解説しています。あなたはそれに基づいて書いていくだけです。また。ミスが少なく効率的なホームページ作成手順もPDF形式で添付していますから、じっくりと取り組めるでしょう。

これでもうあなたはダサいホームページとはおさらば出来るでしょう。

HTMLを理解することにまだ抵抗ありますか？

もしあなたが、HTMLを理解することを、シンプルなHTMLでホームページを作成することをためらうのならそれは仕方ありません。ホームページの作成、運営には様々な手段があります。ソフトウェアと「あーでもない、こーでもない」と格闘しながら作成してもよいでしょう。制作会社にまる投げもよいでしょう。

このテンプレートはこれまでソフトウェアを利用したりしてホームページを作成、運営してきた方、

しかあし!!
なんか納得いかない!!
なんか素人っぽい!!
ちょっとダサい!!
素敵なホームページって思えない!!

という方のために考え、作成しています。そしてそういう経験をした方が、少しHTMLを覚えておいた方がいいのかな？とか、何とか自分ですっきりしたホームページを作ってやろうと思ったときに手助けになるであろうテンプレートです。

絶対HTMLなんかこれっぽっちも覚えてやるもんか!!

と、考えておられる方には不向きなテンプレートです。

本当にカンタン？HTMLって…

ソフトウェアでホームページを作成していてもHTMLをまったく見ないことは無かったでしょう。表は<table>とか<p>は段落とか、リンクは<a href="…とか何となく目にはしていることでしょう。
ただソフトウェアの書き出すHTMLの複雑さに辟易しているだけなのではないでしょうか？

右のホームページのHTMLはたったこれだけでしたね。

難しそうですか？

よく見るとほとんどがメニュー部分のリンクの記述です。「<a href="…」という記述ですね。あとは画像の貼り付けの記述「<img src="…」といった記述。そのほかは「<dlv>」や「<li>」や「<p>」の記述ばかりです。

だってスタイルシートが無ければこんなダサいホームページなんですから。

カンタンか難しいかの判断は個々で異なりますので、なんともいえませんが、このHTMLを理解することがハードルが高いと感じるかどうかです。

ホームページテンプレートセット

このテンプレートセットには以下のものが含まれています。

テンプレートセット

基本の枠組みだけでほとんど何も書かれていないHTMLファイル（テンプレート）とスタイルシートのセットです。全部で5種類の色調です。

マニュアル＆サンプルページ

HTMLの記述方法を詳しく解説したページとマニュアルPDFで解説しているサンプルサイトのパッケージです。こちらも5種類のテンプレートセットにあわせて5つのパターンを用意しました。

マニュアルPDF

テンプレートセットの使い方や、効率的なミスの少ないホームページ作成手順を解説しています。

ホームページのテンプレートは様々なところで配布、販売されています。個人が趣味で配布している無料テンプレートや海外作成の英語のテンプレートなど、どれがよいのか迷ってしまいます。

残念ながら個人が趣味で配布しているテンプレートはやはり個人の趣味の範囲を超えることはなかなか出来ません。会社やお店のホームページには少々無理があります。

海外作成の英語のテンプレートは見た目も派手で、なんだかかっこいいテンプレートが揃っています。しかしながらマニュアルが乏しかったりするのと、日本語で作成するといきなり野暮ったくなったりします。

また中には、古い制作手法であるテーブルレイアウトのものであったり、ブラウザによっては表示が乱れたりするものまであります。

あなたの会社やお店にあったホームページのテンプレート、あなたのスキルに合ったテンプレートであることはもちろんですが、ユーザーにもやさしく、効果の出るホームページを作成することが出来るものを選ぶことが大切です。

もう少しこのテンプレートを見てみよう

もう少しこのテンプレートのスクリーンショットを見てみましょうか。

これらのページのHTMLは全てこんな感じです。
HTMLサンプル1 HTMLサンプル2

効果のあるホームページの作成、運営を目指すのならこの程度のHTMLを理解できるようになることを目指しましょう。

自分にHTMLを身につけることは可能だろうか？

これまでソフトウェアに頼ってホームページを作成してきた方には、こう思われる方も多いでしょう。しかしながらHTMLをある程度身につけると逆にソフトウェアの使い方を身につけることの方が難しく感じます。

私がはじめてホームページを作成したのはもうかれこれ10年以上前のことです。当時私はパソコンは嫌いでした。Windowsが出たばかりの頃です。大学では情報処理の単位を落とし、ある職場ではすぐ動かなくなるマッキントッシュに近づかないようし、パソコンなんて全然必要ないと思っていました。

当時私は飲食店を経営しておりました。観光地でもあったので広告の媒体としてホームページがイイなんていう話がちらほらではじめたころです。私のお店にも営業マンが来ました。「ホームページはいかが？」まったくの素人の私は「これからは必要だろうなぁ」と漠然と思いましたが制作費、運営費が100万円という。すぐには契約なんて出来る金額ではありません。

そのセールスマンには後日また、ということで私は知人のコンピューターにちょっと詳しい奴にその話をしました。彼曰く

「100万円払うなら自分でパソコン買って自分で作ってみたら？Windowsはカンタンだよぉ。」

次の休日私は生まれてはじめてパソコンを買いに行きました。正直、無謀だとは思いました。電源も入れたことがありません。ダブルクリックって何？マウスって何？フォルダって何？ドラッグって何？とにかく説明書の単語が何もわかりません。

ホームページを作るどころではありません。

それでも毎日仕事の合間を見つけながら少しずつ前に進みました。観光地、すなわち田舎です。ホームページ作成ソフトなんてどこにも売っていません。調べてみるとホームページはHTMLというもので書いていくらしい。

他に方法も無いのでHTMLを一文字ずつ入力しながらはじめてのホームページを作りました。ま、はじめて作ったホームページですからこんな感じのとてもダサいやつでしたが…

それでもダブルクリックすら知らなかった私が、ファイルって何？と思っていた私がパソコンを購入して三ヶ月程度ではじめてのホームページを作ることが出来たのです。それもHTMLを1つずつ入力してです。

こんな私でもHTMLを入力してホームページを作ることが出来たのです。
あなたにそれが出来ない理由がありません。

ホームページ作成ソフトについて

このときソフトウェアに頼らずホームページを作成したことがその後のホームページ作成にもプラスに働いています。HTMLの書き方は基本的には変わりません。それなのにソフトウェアは次から次へとバージョンアップしていきます。

正直、ホームページ作成ソフトの種類やバージョンはホームページのできばえとは関係ありません。大手企業のように色々な仕掛けをサイトに盛り込むのであれば別ですが、中小企業や個人事業主にはそんなもの必要ありません。

数千円のホームページ作成ソフトでホームページを作ったらダサかった。
だから数万円以上もする高価な作成ソフトを購入する。
使いこなせない。
出来たとしてもやっぱりダサい。
なんていう人をよく見ます。

ホームページのできばえはソフトウエアによるものではありません。数万円以上の高機能ソフトを使ってもダサいホームページを作ってしまう人もいれば、メモ帳を使って素敵なホームページを作る人もいます。

くどいですが、ホームページはHTMLで書かれています。ホームページ作成ソフトはその手助けをしてくれるだけです。ダサいホームページを作ってしまう人はHTMLを上手に使えていないのです。

普通の人が「吾輩は猫である」のような小説を書けるワケがありません。どんなに高機能なワープロがあっても書けません。でも、「吾輩は猫である」という小説を参考にしながら「我輩は犬である」という小説なら書けるでしょう。それと同じようなことです。

もちろん小説でそんなことをしてはいけませんが、このテンプレートを入手すれば、これまでホームページ作成ソフトのみに頼ってホームページを作成してきた方にもシンプルなHTMLのホームページを作成することが可能になります。

ホームページテンプレートの入手

さて、このテンプレートセットには以下のものが含まれています。

テンプレートセット

基本の枠組みだけでほとんど何も書かれていないHTMLファイル（テンプレート）とスタイルシートのセットです。全部で5種類の色調です。

マニュアル＆サンプルページ

HTMLの記述方法を詳しく解説したページとマニュアルPDFで解説しているサンプルサイトのパッケージです。こちらも5種類のテンプレートセットにあわせて5つのパターンを用意しました。

マニュアルPDF

テンプレートセットの使い方や、効率的なミスの少ないホームページ作成手順を解説しています。

インターネット上には様々なホームページテンプレートがあります。無料のものも…有料のものも…HTMLなんか覚えなくても…素人でもカンタン…暗号みたいなHTMLは知らなくてイイ。

そんな文句があふれています。

10年以上にわたってホームページ作成にかかわってきた私に言わせてもらえば、HTMLを覚えなくてもホームページは作れます。でも出来るだけです。ワンランク上のサイトは出来ません。とある有料テンプレートで作成したというホームページの文法をチェックしてみました。

マイナス53点でした!!

ある意味これだけ低い点数を取るほうが難しいです。
そういうサイトのHTMLはこんな感じに書かれていたりします。

<table width="100%" height="36" cellspacing="0" cellpadding="0" bgcolor="white" align="center">
<tr valign="middle" align="center">
<td width="150" background="bar2.gif"><span style="font-size:11pt;"><a href="page1.html"><font color=blue><strong>サービス</strong></font></a></span></td>
<td width="150" background="bar2.gif"><span style="font-size:11pt;"><a href="page2.html"><font color=blue><strong>インフォメーション</strong></font></a></span></td>
<td width="150" background="bar2.gif"><span style="font-size:11pt;"><a href="page3.html"><font color=blue><strong>製品情報</strong></font></a></span></td>
<td width="150" background="bar2.gif"><span style="font-size:11pt;"><a href="page4.html"><font color=blue><strong>お問い合わせ</strong></font></a></span></td>
</tr>
</table>

上部のメニュー部分だけでこんなにHTMLが書かれています。これを理解するのは大変です。間違えずに書く事は不可能に近いです。
このテンプレートだと同じようなメニューでしたら以下のようになるでしょう。

<ul>
<li><a href="page1.html" id="h_service" name="h_service">サービス</a></li>
<li><a href="page2.html" id="h_information" name="h_information">インフォメーション</a></li>
<li><a href="page3.html" id="h_products" name="h_products">製品情報</a></li>
<li><a href="page4.html" id="h_contact" name="h_contact">お問い合わせ</a></li>
</ul>

また、このテンプレートはHTML文法チェック済みです。マニュアルどおりに作成していけば、100点満点のサイトを作成することが可能です。（100点がえらいわけではないですが、要はサイトのコンテンツですので。）文法に誤りが多ければ検索エンジンにおいても不利です。あなたのパソコンではきちんと表示されていても他の人のパソコンではレイアウトが大きく崩れる可能性が高いです。

「HTMLを覚えなくていい」「タグなんか知らなくても」という方がはるかに魅力的でカンタンそうに見えることはわかっています。でもあえて言わせていただきます。

最低限のHTMLの知識は必要です。
だって、ホームページはHTMLで書かれてるんだもん…

で、最低限のHTMLの知識ってどの程度なの？
ま、本屋さんで売っている最も薄いHTML辞典の内の一部程度でしょう。だってページのHTMLはこんな感じなんですから…
HTMLサンプル1 HTMLサンプル2

いや、別にHTML辞典をあわてて購入する必要はありません。その程度の情報はネット上にいくらでもありますし、このテンプレートで必要なHTMLの記述方法は全てマニュアルページで解説していますから。

まだ、価格について書いていませんでした。
このテンプレートセットの価格は以下のものがセットになって

テンプレートセット

基本の枠組みだけでほとんど何も書かれていないHTMLファイル（テンプレート）とスタイルシートのセットです。全部で5種類の色調です。

マニュアル＆サンプルページ

HTMLの記述方法を詳しく解説したページとマニュアルPDFで解説しているサンプルサイトのパッケージです。こちらも5種類のテンプレートセットにあわせて5つのパターンを用意しました。

マニュアルPDF

テンプレートセットの使い方や、効率的なミスの少ないホームページ作成手順を解説しています。

ホームページ作成に自信のない方は…

ホームページ作成の経験がそれほど無いためホームページ制作に不安のある方は「1ヵ月間メールサポート付」のパックが安心です。

テンプレートカスタマイズパック

このテンプレートセットには次の五種類の色調のテンプレートが含まれています。

マニュアルの解説をもとにあなたが持っている画像編集ソフトなどで背景画像を編集したり、CSSファイルを編集して背景色やフォントの色の変更が可能。1,000行余りにわたるスタイルシートファイルの編集のポイントなどを解説した色調変更マニュアルをセットにしています。テンプレートをあなたのホームページぴったりの配色に変更できます。

また特典として色調変更無料サービスをセットいたします。

テンプレートの色調変更作業を無料で行います。これであなたのお好みの配色のテンプレートに変身させることが出来ます。