素人の、素人による、素人の為の
ＨＴＭＬ講座
To the beginner, By the beginner, For the beginner.
０、概要
なんか偉そうなタイトルがついていますが、
要はＡｃｔｉｏｎの投稿者と読者さん達に
ＨＴＭＬの初歩の初歩を理解してもらおうというだけのシロモノです。
私もそうでしたが、やはりまったくの初心者には
HTMLの概念自体から知ってもらった方がいいかと思いまして。
投稿しない人も知ってればなかなか役に立つものですから。
無論書いている人間は自分で言っているように素人ですので、
間違いがあった際には指摘していただけると嬉しく思います。
注意
以下の事を実行する前にエクスプローラーの「表示」ないし「ツール」から「フォルダオプション」を呼び出し、「登録されているファイルの拡張子は表示しない」のチェックを外してください。そうでないと拡張子（「.txt」とか「.htm」とかのあれ）がいじれないのでテキストファイルからHTMLファイルを保存する、と言ったことが出来なくなります。
１、ＨＴＭＬの基本構造
まずは以下の図をご覧下さい。
<html>
</html> |
この図はＨＴＭＬファイルの大雑把な構造を示した物です。
黄色い部分（ヘッド）の<title>と</title>に挟まれた部分に
ホームページのタイトル（下のバー等に表示されるアレです）を入れ、
オレンジの部分（ボディ）に本文（ＳＳだの画像だの）を入れます。
そしてその前後（上下）をさらに<html></html>タグ（タグについては後述）で囲んだもの、
つまり赤い部分が一つのHTMLです。
テキスト文書、例えばメモ帳でこの書式を作り、「名前をつけて保存」し、
その時ファイル名を「〜〜.htm」ないし「〜〜.html」（もちろん半角英数字で）と付ければ
それでHTMLは完成します。
（ちなみに、この図をそのままＨＴＭＬにするとこうなります→例文その一）
このHTMLという形にする事によって初めてネットに上げて
皆さんにご覧頂けるようになるわけですね。
極論すれば装飾などはオマケに過ぎず、
この「ネットに上げられるようにする」のがHTMLの
第一目的であると言ってしまってもいいでしょう。
なお、HTMLファイルをネットに上げる場合はファイル名が半角でないと開くことが出来ません。
ご注意ください。
また、言いかえるとＨＴＭＬと言うのは「ＨＰを作る為の書式」です。
我々がＨＰを見る時はサーバー（ＨＰのデータを置いておくコンピューター）の中にアップされたデータを
ブラウザソフト（インターネットエクスプローラーとかネットスケープとか）で表示させてるわけですが
ＨＴＭＬと言うのはこのブラウザソフトにデータを読みこませ、表示させる為の「書式」な訳です。
何の装飾もしていないテキスト文書にこの「書式」を付与する事によって様々な効果を得ることができます。
改行させる為の書式、字を大きく表示させる為の書式、文章をセンタリングして表示させる為の書式、
リンクをつなげる為の書式、画像を表示させる為の書式その他があるわけですね。
そして、この「書式」を「タグ」と呼びます。
２、タグ
前述した様にタグはサーバーの中のデータをブラウザに読み込ませるための「書式」です。
<html>、<head>、<body>などがタグです。
上の図の内<html>、</html>、<head>、</head>、<title>、</title>、<body>、</body>の各タグについては
「こういうものだ」と割り切って下さい。
HTML自体を作るタグなのでいじくってはいけません。
以下にＳＳを書く際に必要であろうと思われる装飾用のタグを列挙します。
なお、タグは基本的に効果を及ぼす場所の前後を挟む物と覚えておいて下さい。
〜〜<br>
（改行）
注：テキスト文書の通常の改行はHTMLには一切反映されません。
行の最後には必ず<br>タグをつけましょう。
<p>〜〜</p>
（段落空け）
<p align="center">〜〜</p>
（センタリング。右に寄せる場合は"center"の代りに"right"と記入）
<font color="red">〜〜</font>
（色の変更）
<font size="6">〜〜</font>
（字のサイズの変更。１〜７まで。Actionの標準は３）
<font face="ＭＳ Ｐ明朝">〜〜</font>
（字体の変更）
<b>〜〜</b>
（強調、太字）
以上のタグを覚えておけばSSを書く程度なら問題ないかと思います。
気をつけなければいけないのは<br>以外のタグは
</p>や</font>などをつけて「閉じる」必要があること、
複数のタグを一つの場所に使う場合は
<font size="6"><strong>〜〜</strong></font>
のように「左右対称」（「入れ子」とも言います）にすること、の二つですね。
なおタグの最初と最後を同じ行に入れる必要は全く有りません。
タグは閉じるまで、複数行にまたがってもいいのです。
では最後に装飾を施したHTMLの一例を挙げておきます。
| <html> <head> <body> <p align="center"><font
size="6"><font color="blue">喜びの歌</font></font></p> <br> <font color="green">※ <p><b>一番</b></p> <p> 晴れたる青空 漂う雲よ<br> 小鳥は歌えり 林に森に<br> 心は爽やか 喜び満ちて<br> 見交わす我らの 明るき笑顔<br> </p> </font>←上の※からここまでが緑色になる <br> <font color="red">＃ <p><b>二番</b></p> <p> 花咲く丘べに 憩える友よ<br> 吹く風爽やか みなぎる陽射し<br> 心は穏やか 幸せ溢れ<br> 響くは我らの 喜びの歌<br> </p> </font>←上の＃からここまでが赤になる </body> </html> |
これを実際にHTMLにしたものはこちら。
さて、ここまでHTMLについて理解する限りの事を書いてきましたが、
初心者の方、理解していただけたでしょうか？
とりあえず普通の投稿SSならこの程度の知識で充分なはずです。
特に装飾を多用する方は是非HTML化しての投稿をお願いしたいと思います。
なお、「タグを打つのが面倒臭い」人はコピー＆ペーストを使うか、
辞書にタグそのものを登録してしまいましょう（笑）。