2008/08/26 更新
ホームページの基礎知識
TOP > あ行 > HTMLとCSS
HTMLとCSS
基礎知識でも紹介したように、
HTML(エイチティエムエル、HyperText Markup Language)はウェブサイトの基本です。
HTMLはマークアップ言語ですが、プログラミング言語のように複雑ではありませんので、
比較的簡単に短時間で理解することができると思います。
HTMLさえ完全に理解してしまえば、
テキストエディタでサクサクとウェブサイトが作れるでしょうし、
ウェブオーサリングソフトを使っていても困ることは少ないでしょう。
また、CGIとPHPでも表示部分はHTMLなので簡単なカスタマイズはできるようになります。
ぜひHTMLをマスターしてください。ここでは簡単な紹介をします。
具体的なテクニックについてはFAQを、
HTML言語についてさらに詳しくはリンク集のサイトを参考にしてください。
基本的な雛形は下記の通りです。
内容をカッコ付きの決められた開始タグと終了タグで囲むことでマークアップしています。
また、文書の先頭にはDOCTYPE宣言(ドキュメントタイプ宣言)の記述が必要です。
DOCTYPE宣言とは、使用しているHTMLのバージョンを宣言するものです。
バージョンにより微妙に定義されたタグが異なるのでそれを示しますが、
使用できるタグが限られるので、宣言しないのもありです。
そして、それをそのままtest.htmlとして保存すればブラウザでウェブサイトとして表示されます。
ちなみに、ウェブ上にあるほとんどのページは、
ブラウザで「ソースを表示」すると、HTMLソースを見ることができるので、
これを参考にすることもできます。ただし著作権やモラルの問題があるので注意してください。
<![CDATA[<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type"content="text/html; charset=Shift_JIS">
<meta name="keywords"content="キーワード1,キーワード2">
<meta name="description"content="サイト概要">
<title>タイトル</title>
</head>
<body>
<p>本文</p>
</body>
</html>]]>
- HTML 3.2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
- HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
- HTML 4.01 Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- HTML 4.01 Frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
CSS(Cascading Style Sheets)とは、HTMLの装飾(色などのデザイン)を指示するものです。
HTMLでは様々なタグがあり、それによって装飾を指示できますが、
CSSを利用することでより簡単に指示することができます。
なので、HTMLとCSSのセットでウェブサイトを作るのが定番です。
例えば<b>タグに囲まれた部分を赤字にしたい場合、
HTMLでは<b>タグが登場するたびに<b><font color="red">などと
記述する必要がありますが、CSSを利用すれば「<b>タグは赤字」という感じで、
一回の記述で全ての<b>タグに指示することができ、
さらに複数のページに反映させることもできます。
CSSの使い方は、htmlの<head>タグの中で、
<![CDATA[<style type="text/css">
<!--
b { color: red; }
-->
</style>]]>
と、記述する方法と、htmlの<head>タグの中で、
<link rel="stylesheet" type="text/css" href="test.css">
と、記述して、「.css」という拡張子のCSSファイルを作成して、
.cssに、b { color: red; }と記述する方法があります。
後者の方法だと複数のページにも簡単に反映させることができます。
All text is available under the terms of the GNU Free Documentation License.
ホームページの基礎知識
by LEMON STUDIO