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

先ほど紹介したホームページはどうやってレイアウトしているのでしょう。
もう、想像がついていると思いますが、CSS(スタイルシート)でレイアウトしています。もしもCSSを使わないでこのようなレイアウトをしようと思ったらいくつものテーブル(表)を作ってその中に内容を当てはめていくことになります。するとたちまちHTMLは分かりづらく、複雑になっていってしまいます。

スタイルシート(CSS)を見てみよう

CSSを見てみるそれではCSS(スタイルシート)何が書かれているかちょっと見てみましょう。右をご覧ください。クリックすると拡大できます。右側のスクロールバーを見るとわかるようにもっともっと書かれています。

CSSでレイアウトしたことのない人には何のことやらさっぱりわかりませんね。このCSSによって上で紹介したホームページはレイアウトされています。このようにCSSでレイアウトをすべて行うことによりHTMLは中身の文章だったり画像ファイルを貼り付ける記述だったり、リンクの記述だったりを書いていくだけになります。

ほかのページもちょっと見てみよう

ほかのページも見てみよう 左のページのHTML
ほかのページも見てみよう 左のページのHTML

ほかのページも見てみましょう。HTMLソースを見るととてもシンプルです。もうお気づきかもしれませんが上で紹介しているページはここで販売するテンプレートのマニュアルサイトです。HTMLソースをよく見ると「>」とか「"」などなぞの文字が書かれていますがこれは特殊文字で「>」や「"」をHTMLで記述するとこうなるためです。HTMLの記述方法を解説するために多用していますのでなぞの文章に見えますが、あなたがホームページを作成するときにはこんな文字はほとんど使わないでしょうからあなたが作成する場合はもっと日本語だらけになります。

このようにCSSでレイアウトされたホームページのHTMLはとてもシンプルで初心者でもHTMLのタグを見ながらホームページの作成をしたり更新をしたりすることが可能です。そのことはあなたが少しずつHTMLを理解していくことの手助けをしてくれます。

CSSでレイアウトされたホームページは検索エンジン対策にも

そして、何よりCSSでレイアウトされたホームページは検索エンジン対策にも有効です。というよりもホームページはCSSでレイアウトするのが標準とされていますし、訪れてくれた人のことも考えればHTMLはシンプル簡潔であるべきです。結果として検索エンジンにも理解されやすいホームページとなっているだけなのです。

次のページ…CSSを編集してデザインを変更する