2011年01月21日
WEB制作にかかせないHTMLとCSS
こんにちは西本です。
私が初めてホームページ制作に興味を持ち、
HTMLを触ったのは5～6年前のことです。
最初にやってみたことは、文字のサイズ変更と色変えでした。
当時はHTMLもテーブルタグを理解するのがやっとのレベルでしたが・・・。
今回はホームページ制作に必須な言語である、
HTMLとCSSについてまとめてみました。
■HTML
————————————————————————————–
文字の色を変えたり、文字のサイズを大きくしたり・・と
文字を装飾する言語と思われがちですが、
実際にはWEBページを記述する為のマークアップ言語と呼ばれ、
文書の論理構造や、表示の仕方を記述する言語です。
例えば、
＜ｂ＞この文章は太字で表示されます。＜/ｂ＞
太字を表すbタグは、私達人間から見てみれば太字になっている・・
と一目で分かりますが、コンピューターは理解することができません。
こうやってマークアップをすることにより、この文章が太字として表示されている
ということがコンピューターで理解することが出来るのです。
■CSS
————————————————————————————–
WEBページのレイアウトを定義する言語です。
これまで、WEBページのレイアウトをHTMLで記述されていたのですが
文書の論理構造を記述するという本来のHTMLの目的に反してしまうため
この規格が登場しました。
＜b＞ここは太字です＜/b＞
＜span style=”font-weight:bold”＞ここも太字です＜/span＞
私たち人間から見れば両方ともWEBページ上では太字として反映されていますが
コンピューターが「ここは太字として表示されているんだ」と理解するのは、
＜b＞＜/b＞です。
また、CSSではデザインの編集が容易になります。
たとえば、
＜font color=”red”＞あいうえお＜/font＞＜br＞
＜font color=”red”＞かきくけこ＜/font＞＜br＞
＜font color=”red”＞さしすせそ＜/font＞＜br＞
「文字の色は赤じゃなくて、やっぱり青にしようかな！」と思った時、
redと記載されている箇所を全てblueに変更しなくてはいけません。
上記の例はまだ少ない方ですが、大量の場合は手間がかかってしょうがない・・
ですが、CSSを使うと簡単にデザインが編集できます。
//CSS記述部分
＜style type=”text/css”＞
＜!–
#text{ color:red; }
–＞
＜/style＞
//HTML
＜span id=”text”＞あいうえお＜/span＞＜br＞
＜span id=”text”＞かきくけこ＜/span＞＜br＞
＜span id=”text”＞さしすせそ＜/span＞＜br＞
「文字の色は赤じゃなくて、やっぱり緑にしようかな！」と思った時、
color:redの部分を、color:greenに変更するだけでいいのです。
デザインの変更したいと思った時は、CSSを編集するだけでいいので
コーディングの仕方によっては、HTMLを一切さわらずに
HPをリニューアルすることだって出来ます。
その他、CSSではHTMLでは表現しきれなかった細かなデザインを
表現することができますので、HTMLとCSSは切り離せない関係になっています。
近年ではHTML5やCSS3が登場し、さらにWEBページに改革が起こるのではないでしょうか。
とくにHTML5ではFlashいらずでムービーやゲームが作成できますので、
FLASH未対応のiPhoneやiPadには嬉しい規格ですね。
しかし・・・IEもやっとHTML5対応バージョン(9)が登場したと思ったら
WindowsXPでは使えないようですので、残念です。
【次回予告】
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
いつもご覧いただいてありがとうございます。
次回の更新は何(カ)から中国事業関連についてレポートさせて頂きます。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－