XHTML（HTML）とCSS

WEB MAGICでテンプレートをダウンロードして解凍すると、

・XHTML（HTML）ファイル
・CSSファイル
・画像を入れるフォルダ

があります。
今日はそれぞれの役割について説明したいと思います

XHTML（HTML）ファイル

XHTML（HTML）ファイルは、「構造」を指定するためのファイルです

タイトル、見出し、文章、図、など、
そのページはどんな情報を記述するのか
ということを記述していくものです。

ホームぺージのソースを開くとタグ、と呼ばれる
<>で囲まれた呪文のような言葉が並んでいますね。
（ソースはそのホームページの画面上で右クリック「ソースを開く」→「このページのソースを表示」で確認してみましょう）

なんだかわからない記述（タグ）がたくさん並んでいますが、
その中に、普通の文章がまぎれているのがわかります。
つまり、文章を修正したかったら、その文字をなおせばよい、
ということはなんとなくわかると思います。

CSSファイル

いわゆる「見栄え」を指定するためのファイルです

CSSはXHTML(HTML)で指定した情報をどのように見せるか、という部分です。

・レイアウトは二段組みで、左にメニューを持ってこよう
・見出しはこの文字サイズでこの色で
・内容はこの幅におさめよう
・このヘッダーにはこの背景を敷こう
・このボックスはこの色で統一しよう

などなどです。

画像フォルダ（imagesフォルダ）

もちろん画像を入れておくフォルダです。そのまんま

もちろん1つ1つの画像を、imagesフォルダに入れずに
XHTML（HTML）ファイルやCSSファイルと並べて置いてしまってもいいのですが、
サイトが大きくなればなるほど、画像が多ければ多いほど、
ごちゃごちゃになってしまいますね。

これはimagesっていう名前じゃなくちゃダメなの？

だめじゃないです。
名前は内容からわかりやすいものが一番。
他には「img」とつける人もいるかなぁと思います。
でも、一番多いのが「images」
なんだろう、この仕事をしている人はほんどがimagesですな。
暗黙の了解に近いのかな


このフォルダ名はなんでもいいのですが、
これはXHTML（HTML）ファイル内で画像のありかを指定する際に重要です。

imagesフォルダの中にいれた｢pict.jpg」という画像は、
XHTML（HTML）ファイル内で画像の指定をするときは

<img src="images/pict.jpg" />

となりますが、imgフォルダに入れれば

<img src="img/pict.jpg" />

です。


以前はHTMLファイルの構造の中に、
「見栄え」の指定を個別に指定していた頃がありました。

その方法は今も使えないわけではありませんが、
50ページのWebサイトでどのページにされていたデザイン指定を変更をしようと思ったら、
50枚のファイルに修正をかける必要がありました。
忍耐ですな。

でも、繰り返しどのページでも使われる「見栄え」の部分の指定を
1枚のCSSファイルにまとめてしまえば、
いざ変更しようと思ったときに50ページ変更をする必要はなく、
まとめてデザイン指定してある箇所をなおせば済むようになったわけです。

このように、それぞれの役割を分けることによって、
サイト全体のデザインを管理がしやすくなるわけですね。

HTML内のソースもすっきりするし、
ブラウザの読み込みも早くなる、
というメリットも生まれます


でも、たぶん慣れていない方や、これまでの方法に慣れてしまっていた方は、
分ける方法を理解して覚えることのほうが
50枚の修正をするよりも大変なのよ！と思う方が
たくさんいらっしゃるのではないかと思うのです。


なので、私が配布しているものに限らず、
基本的な指定は完了しているテンプレートを使って、
必要な部分のみカスタマイズすれば、
一番楽に、難しすぎることを覚えなくてもホームページが作れるのではないかなと思うのです。
今、無料のテンプレート、びっくりするぐらいたくさん配布サイトさんがありますからね～


カスタマイズの方法も本当はそれほど難しくはないのです。
タグの全部を覚える必要もなければ、
CSSの意味を全て理解する必要は全くないのです。

「やりたい」ことを導入していくだけです。
そりゃあ完璧な知識を持った人には及ばないかもしれませんが、
それでもきちんとした見栄えのサイトはちゃんとできあがると私は思っています。

二の足を踏んでいた方も作ってみませんか