さて、前にも出てきたHTML文をもう一度見せるよ。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja-JP"> <head> <link rel="stylesheet" href="default.css" type="text/css"> <link rel="prev" href="index.html"> <link rev="made" href="mailto:mai_tukamoto@infoseek.jp"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>タイトルバーに表示されるタイトル</title> </head> <body> <h1>でっかいタイトル</h1><br> </body> </html> |
そんじゃ、まずは１行目から。
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
と、思われるかもしれない。 これは……。
どの仕様のHTMLで書かれているのかを明示するものだ……というだけで、 なくてもいい（ないとHTMLチェックで怒られるが）。 つまり、意味など気にせず、HTMLの最初には必ずこれを書くと、 覚えればいいだけ。コピペでおｋ。 次、２行目
|
<html lang="ja-JP"> |
これの 『<html>』 ってところは必須。
わかっとっても書くのがHTML。 そのhtmlの中に、 『lang="ja-JP"』 がある。
さて、次は３行目。
|
<head> |
ヘッド。ヘッダ部分の記述をする。 ヘッダってなんぞよ？まぁ、深い意味は気にするな。 このヘッダ部分では、この文書全体に関する指定などを書く。 その指定が４行目以降。 次、空白を抜かして４行目。
|
<link rel="stylesheet" href="default.css" type="text/css"> |
これは、『スタイルシートの設定』というものですよ。 スタイルシートのファイルは『default.css』って名前ですよ。 え、スタイルシートってなんだよ？？ ………言うなれば、このタグ（タグってのは<>で囲まれたやつのこと）のレイアウトは こうですよ〜 と定義している文章の集まり。 このページを例で言うと、ほら、背景黒いやん。 こうゆうのをスタイルシートで設定してるんよ。
| background-color: #000000; |
↑みたいな感じのやつを書いていくわけ。 この例で言うと、「バックグラウンドのカラーは#000000（黒色）よ！」と言っている。 まぁ、今は考える必要なし。 この４行目の文章がなくても、HTMLチェックしても１００点取れます。 次、５行目。
|
<link rel="prev" href="index.html"> |
これもなくていいんだけど、しかもHTMLチェックでは点数も引かれないけど、 でも、エラーが出ます。 こいつは「前のページどこっすか」という意味。 index.htmlからこのページにリンクがあり、飛んできた場合はこう書く。 ほかにもあるので書いておく。
|
START ：開始ページ |
次、６行目です。
|
<link rev="made" href="mailto:mai_tukamoto@infoseek.jp"> |
なにやらメールアドレスが書いてあります。 HTML作者を明示するためにあるようです。書かなくても減点はないけどエラーです。 ↑のメールアドレスは筆者のです。 まぁ、適当でいいんじゃない？aaa@hotmail.co.jpでもいいんじゃねーかと思うｗ 次、空白抜かして７行目です。
|
<meta http-equiv="Content-Style-Type" content="text/css"> |
まぁ、筆者の癖というところが多いが、なくていい。
実は、前に書いた『スタイルシート』というのがあったと思う。 これはdefault.cssというファイルにレイアウトをどうするかを記述してあるが、 実はHTML内で書くことも可能なのだ。 ↓こんな感じで
|
<style type="text/css"> <!-- H2 { color:red } .body { margin-left:30 } --> </style> |
こんな感じのをHTML文章内（titleの下辺り）に書けば、 タグの『H2』は文字色が赤くなり、 bodyクラスの場合はさらに左30ポイント分の空白を設ける ……という感じの設定ができる。（↑の文の意味は気にしなくてもおｋ） これを文章内に書くと、 <meta http-equiv="Content-Style-Type" content="text/css"> がないとエラーになるのだ。
大体タグのstyleなんて使っちゃったら、HTMLを増やすたびに styleなんちゃらを書く必要が出てきて、だるい。そしてHTML文章全体が雑になるお。 次、８行目。
|
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> |
またまた長いのが……。
現在日本語で書かれているHTMLの多くには、文字コードとして 『JIS』、『Shift JIS』、『EUC』 が利用されている。（『UTF-8』もあるかも？ まぁ、HTMLがどのコードで書かれているのかを明示するために、 このタグを書かなきゃならんわけだ。 基本的に↑の『Shift_JIS』か『EUC-JP』でいいと思われる。 （自分のフォルダではShift_JISでいいかもしれないが、 どこかサイトにＵＰしてネットから見た場合、文字化けする 可能性がある。そのときはEUC-JPかも） もし書いて、完成したものが文字化けした場合はここを変えると直るかも。 ほかの種類はこちら↓
|
<META http-equiv="Content-Type" content="text/html; charset=ISO-2022-JP"> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Type" content="text/html; charset=EUC-JP"> <META http-equiv="Content-Type" content="text/html; charset=UTF-8"> |
たぶん、『Shift_JIS』と『EUC-JP』のどっちかだと思うんだよねぇ…（何が 次、９行目。
|
<title>タイトルバーに表示されるタイトル</title> |
うん、タイトルだよ。 ↓の一番上の部分のこと。
あと、もう１つ説明しなければいけないのがある。 それは…… 『</title>』 のところ。 スラッシュ（/）があるかと思う。これは、「このタグはここまで有効だよ」の意味。 つまり、 <title> から </title> に囲まれた部分が タイトルとして出るよ。 の意味。 囲まれてる『タイトルバーに表示されるタイトル』がちゃんと出てるっしょ？ 次、１０行目。
|
</head> |
タイトルのところで言った通り、今度は「ヘッダはここまでだよ」を表している。 ３行目の <head> から </head> までがヘッダだったということ。 まとめると、ヘッダには……。 ・link なんちゃら ・meta なんちゃら ・title のタグが設定されていた。 headはこれらを書く場所のことだったんだねー。へー。
|
まとめ その１ 「１行目から８行目までが、コピペでおｋ」 まとめ その２ 「９行目のtitleってところで、サイトのタイトルをつける」 まとめ その３ 「１０行目もコピペでおｋ」 |
どうだろう。これまでの説明のうち、
といっても、スタイルシートのファイル名が違ったり、 index.htmlとか違ったり、メアドが違ったり、文字化けしたり、 そんなことがあれば変更が必要だが、 １回自分で設定してしまえば、それ以降、HTML文を作るにあたっては 全部コピペでおｋなのだ。 次へ(HTML文の説明２（肝心な中身部分）) 前へ(まずはコピペ) 目次へ 別館TOPに戻る
ブログに戻る
