ウェブデザイナー募集

ホームページ作成講座 HAC Design

レイアウト　ホームページ作成講座

【レイアウト】　ホームページ作成講座

ホームページのレイアウトとは、ホームページをより見やすくする為に文章や画像を配置することをいいます。このレイアウトが整っていればホームページはみやすくなりますし、訪問者にストレスをあたえません。ここでは簡単なホームページのレイアウトを実際に組んでいく上で大切なことを書いています。

【テーブルでのレイアウト】　ホームページ作成講座

タイトルが入っているイメージ、タイトルバナー。右サイドにあるメニューバー、左にコンテンツです。

なにも難しいレイアウトではありません。

ただ、１年から２年前くらいはこのレイアウトをテーブルというタグを使ってホームページを作るのが主流ともいえました。

ですが、今はテーブルタグでレイアウトをするのはあまりかっこよくありません。

見た目的にはわからないのですが、ソースを表示してみるとすぐにわかります。

検索エンジン対策などをしている人はテーブルタグでのレイアウトは殆どしていません。

では、なにでレイアウトをするかというとCSS（スタイルシート）です。

せっかくホームページ作成講座をするのなら、古いテーブルでのレイアウトではなく、
CSSで学んでいきましょう。

まず、今までテーブルというタグを使ってレイアウトしたホームページのソースを見てみてください。
そのためのテーブルで作った簡単なホームページをご用意しました。
サンプルホームページ

ソースを表示してみてください。
<table><tr><td></td></tr></table>といったタグがテーブルタグです。

もともとテーブルタグというのは表を作る為に使われるものですが、レイアウトに使っている人が数多くいます。

多くのテーブルでレイアウトされたサイトは、横の図のように、
テーブルの中にテーブルがあってさらにテーブルがある。

といったような、タグ的に言うと、箱を開けても箱的な状態です。

つまり、サイトのソースがシンプルではないということです。

ホームページ作成ソフトをつかってこのようなレイアウトをすると、後々レイアウトを編集したいときに何かしらおかしな表示をされてしまうでしょう。

 

サイトのソースがシンプルではないと何がいけないのか？

【検索エンジンロボット的によくない】

【後々サイトの修正が面倒】

【全体のレイアウトを変更したいとき１ページずつなさなければならない】

などです。

いまからホームページを作成しようという人に、テーブルでのレイアウトをお勧めするということは、
新しいパソコンが欲しい人にウィンドウズ95しか対応していないパソコンを教えるようなものです。

【CSS スタイルシートを使おう】　ホームページ作成講座

CSS（スタイルシート）は、ホームページのレイアウトや飾りつけを書くファイルです。

たとえば、<p>タグで囲った文字は１２ｐｘで色はグレー。
<a>タグで囲ったリンクはマウスを乗せると文字がオレンジになる。

といった、色やサイズの指定や、レイアウトをすることができます。

CSSにはHTML内に直接記述していく方法と外部ファイルを読み込むという２つの方法があります。HTML内の<head>内に

<style type="text/css">
<!--
.style1 {color: #FF00FF}
-->
</style>

等といった感じで、直接書き加えるタイプと、同じく<head>内に

<link rel="stylesheet" href="ファイル名.css" type="text/css" />

とリンクしてCSSが書いてある外部ファイルを読み込むといった方法があります。

当サイトでは、外部読み込みのCSSを使っていきます。

たとえば、背景画像を変更したいとき、文字の色を変えたいときなど、外部読み込みのCSSはCSSファイルへのリンクを貼ったHTMLファイルなら、そのCSSファイルの装飾がすべて反映されるため、とても便利です。

内部書き込みの場合、HTMLファイルをすべて開いて一つ一つ編集しなければなりません。

ここでは、なんとなくわかっていただければいいです。
CSSは初心者には多少ややこしく感じます。

そのためにスタイルシートのテンプレートをご用意しました。

CSSについてはCSSリファレンスで掘り下げていますので、更なるレベルアップをしたい人はご覧下さい。

では次のページでテンプレートをダウンロードしてCSSの編集をしてみましょう！

ホームページ作成講座
ホームページ作成講座【HTMLタグ講座】
ホームページ作成講座【ブラウザーで表示してみよう】
ホームページ作成講座【レイアウトをしてみよう】
ホームページ作成講座【無料ホームページのテンプレートを使おう】
ホームページ作成講座【無料テンプレートをカスタマイズしよう】
ホームページ作成講座
HTMLタグ講座
ブラウザで表示
レイアウト
テンプレート
カスタマイズ講座
ホームページ作成講座HOME
ウェブデザインHOME