Web制作の基本 ⁄ Web制作の個人事業ファナップ

Web制作のファナップHome > ファナップTOP > Web制作の基本

ここではホームページの制作において、基本的なコーディング方法などをご紹介いたします。
（2006年に旧サイトで掲載していたコンテンツです。）

1.　W3Cに準拠したコーディング確認と修正
2.　CSSを使いこなす
3.　CSSを使いこなす-ステップアップ編

1.W3Cに準拠したコーディング確認と修正
「W3Cの規定に準拠したページのコーディング」というのは、SEO対策だけに必要なわけではなく、作ったページが現在世の中で使われている何種類かのブラウザで同じように表示される為の指標なのです。
しかし今は、現存するブラウザごとに表示の仕方が変わってしまいます。ブラウザ全てが同じようにW3Cに対応しているわけではないのです。
それはブラウザを開発している先の思惑などがあるからかもしれませんが、おそらく将来的には限りなくW3Cの方向性を意識した親和性の高い、次世代ブラウザが出来る（私の希望ですが．．．）はずですので、その時になって慌てないためにも今から対策を考えておくことが必要です。
ではどうすればそのコーディングが出来るようになるのでしょうか？
今から勉強される方へ私からのご提案です！

「Web Accessibility Toolbar 日本語版」を利用することがお奨めです。
これをieのplug-inとしてインストールするだけですぐに使えて、HTML構文やCSSの文法など様々な項目についてチェックしてくれる優れものです。是非導入してみてくださいね無料ですから！
（但しウィンドウズのみ対応。MAC版のツールも別にあります。）
構文チェックをすると、点数で-70点などと表示されます。
かくいう私も当初はその位の点数でした。（笑と汗）
マイナス点をクリアするにはCSS（カスケーディングスタイルシート）を理解し、使いこなすことが要求されます。
これから挑戦しようとする方には、色々と越えなければならないハードルが待ち構えていますが、W3C準拠のコーディングが出来るようになったときには、自分でも驚くほどスキルがUPしていることでしょう。
次はCSSについてお話しさせていただきます。

2.CSSを使いこなす
今度はCSS（カスケーディングスタイルシート）によるページレイアウトについて述べさせて戴きます。
スタイルシート（以下CSSと呼びます）は、ページのレイアウト、いわゆる見栄えを統一化して表示させるための規定で、IE及びNN4以降に対応しています。
HTML制作用ツール（DreamWeaverなど）を使用している方はすでにご存知のことと思いますが、テキストや画像に色、サイズを割り当てると自動でHTMLソースのHEADタグ内に下記のようにCSSが記述されますね。

このようにHEADタグ内に記述してもいいのですが、そうするとどんどんCSSのタグが増えていき、それと共にファイルの容量も増えてしまいます。
出来ればCSSの記述を外部ファイルとして管理した方が良いでしょう。
それにより、HTML内でのアクセス時間も幾分早くなり、CSSの定義を管理しやすくなります。要は一元管理がとても楽に出来るということですね。
さらにCSSファイルをフォント用、画像のレイアウト用、テーブルの定義用などに分けて、わかりやすい管理をお奨めします。

CSSを定義することで、W3Cの規定に準拠できます。
「Web Accessibility Toolbar 日本語版」ではCSSのエラーも確認出来ますし、W3Cでの構文エラーは殆どがCSSを使え！というメッセージですので、CSSを理解することは今後必須ということですね。

3.CSSを使いこなす-ステップアップ編
CSSの重要さを少しでもご理解いただけたでしょうか。CSSの素晴らしさはまだまだあります。
例えば皆さんは、ページレイアウトをする際にテーブルを配置し、そこに部品（画像やテキストなど）をレイアウトしてCSSを定義すると思いますが、CSSだけでテーブルの替わりをさせることが出来るのです。一般的にテーブルの場合よりも、CSSを使ったほうが記述が短く軽く出来ます。
そしてすばらしいことに、CSSで定義したブロック（divタグ）を自由に移動させることが出来るのです！
これは何を意味しているかと言うと、テーブルでレイアウトを組んだ場合は、重要ワードを一番上か左側に配置しなければ、SEO的には期待した効果が出ないのです。
ところがCSSで組んだ場合は、ソース（HTMLソース）の中で自由に位置を変えることが出来ます。（記述の仕方によりますが）
ということは、ページの最上部（BODYタグのすぐ下）に重要ワード（h1タグなど）を記述し、検索エンジンに重要度を知らせる効果が抜群に上がるのです！
しかし！！これは今では検索ロボットからはスパム扱いされる可能性が強いし、実際に私が試した結果効果はありませんでした。（2005年現在）
これは姑息な手段なのでやめましょう！！(^_^;)

テーブルでのレイアウトの場合は、テーブルタグの最後まで読まれてからブラウザが表示し始めます。テーブルの入れ子が多いとそれだけ表示の時間が長くなってしまうのです。それだけ複雑な構造をしているということでしょう。
CSSの場合はブロックごとに分かれている為、読み込む時間も短く済みます。
以上、アバウトな説明ばかりでしたが、WEB制作する上で次世代の規格に対応する為には、今から準備が必要です。

ちなみに私がお世話になっているサイトをご紹介しますね。・・・・・・・・・・・・・・・・・・・・・・・・・・・
※MdNの"CSSによる美しいWebレイアウト”というコーナーです。
解説している方は矢野りんさんという人で、私と同じ田舎の北海道足寄町生まれということでびっくりしました。CSSとは関係ありませんが．．．．。
・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
これまでお話したところを、制作するうえでのアウトラインとしてご理解いただければ幸いです。
Webの技術はめまぐるしく変化、進歩しますので、お互いがんばりましょう！
ただし、何が何でもテーブルは使っちゃダメ！というわけではありません。制作する対象と内容によって、使い分けることが必要となるでしょう。