HTMLテンプレートを活用したホームページ作り

ではいったいどうしたらよいのか?
HTMLやCSSを学ぶ時間はない。出来上がりをイメージしようにもなかなか思いつかない。でも手元にホームページビルダーはある。

そんなときはテンプレートを活用してみよう

え?もう試してみたって?
どんなテンプレート?それで出来なかったの?

テンプレートを配布しているサイトはたくさんあります。無料のものも有料のものも様々です。無料のテンプレートでも素敵なテンプレートもあります。有料のものでもなんだこりゃ?というものだったり英語だったり。そして多くのテンプレートに言えるのがどうやって使うんじゃい?というもの。

以下の条件を満たすテンプレートはなかなか見かけません。

もちろんテンプレートですからそのデザインなりレイアウトが自分の好みであるものを探すことにも時間がかかります。自分のイメージに合わない…といろんなサイトをうろうろ。なかなか思うようなテンプレートが見つからずもうあきらめようかと…

ホームページの作成例でもちょっと待ってください。

ホームページのレイアウトの基本は同じなんです。タイトルがあって、メニューがあって、本文があって…違いはそれぞれの色使いだったり各イメージファイルの違いだったり。ほとんどのホームページは上にタイトルがあって右または左側にメニューがあり、本文があります。

その基本さえしっかり出来ていれば、そしてHTMLが簡潔に記述されていれば、あとはそれほど難しいことではありません。ちょっと右のホームページをご覧ください。クリックすると拡大してご覧になれます。

非常に普通のホームページですね。メニューなどわかりやすい位置にあり、文章の行間など読みやすいホームページです。でも初心者の人がここまでレイアウトするのはちょっと大変かもしれません。ホームページビルダーで作成していくととても複雑なHTMLになってしまうでしょう。

このホームページのHTMLはどうなの?

HTMLソースを見てみましょうこのホームページのHTMLはどのようになっているでしょう。ちょっと見てみましょう。

左をご覧ください。クリックで拡大してご覧になれます。どうでしょうか?いたってシンプルです。これですべてです。
もしあなたがこれまでにホームページビルダーなどでホームページを作成したことがあるのならそのときのHTMLソースと比較してみると良いでしょう。その違いは一目瞭然です。もっともっとわけのわからない記述がたくさんあったと思います。

それは仕方のないことです。ソフトウェアでホームページを作成しようとする場合、HTMLを直接編集するのではなく、実際に表示されるような画面で編集していくと必ず不要なHTML記述されてしまいます。

初めてホームページを作ろうとするとき、HTMLのことはわかりません。HTMLの本を見ても「難しそう…」と敬遠してしまいがちです。そこで「ホームページビルダー」等のソフトウェアでホームページを作成します。そうして出来上がったホームページのHTMLを何の気なしに見てみます。するとなにやら意味不明のアルファベットの文字の羅列。

「やっぱりHTMLは難しいなぁ…」

と、思い込みがちです。
上のHTMLはいかがでしたか?

思ったよりもずっとシンプルだったのではないでしょうか?これ以上シンプルには出来ないくらいシンプルです。ごちゃごちゃしたアルファベットの書いてある部分はリンクの記述や画像ファイルの貼り付け部分です。

こんなHTMLであれば初心者のあなたにもきっとHTMLを見ながら編集したりすることが出来るでしょう。HTMLソースを見ながら編集、更新していくことがHTMLを身につける近道でもあります。

そしてHTMLの知識を身につけることが「ホームページビルダー」等のソフトウェアをより活用することにもつながります。それにしてもこんなシンプルなHTMLでどうやってここまでデザインできているのでしょうか?もう想像ついていますね。そうです。スタイルシート(CSS)でデザインしているんです。それではそのスタイルシートについてちょっと解説しておきましょう。

次のページ…ホームページのレイアウト方法