■ タグの要素と属性

タグの中身は要素と属性のふたつに役割が分担されています
要素は命令（宣言）そのもの、属性はその命令(宣言）の内容を具体的に表したものです
なに言ってるかさっぱり解らないと思いますので<table>というタグを例にとってみます
（説明ヘタなんで・・・。）

んでもってこれが上のタグで宣言された内容・・・。

先頭のtableが要素で「ここからテーブル（表）です」という宣言
widthが属性で「このテーブルの幅を指定します」という宣言
80%が属性値で「幅はページ全体の80％に指定します」という宣言
bgcolorが属性で「このテーブルの背景色を指定します」という宣言
yellowが属性値で「背景色はイエローに指定します」という宣言

このように要素・属性・属性値と言った各役割を果たしているのがタグという物です。

■ タグを使う時のお約束

ここで、タグを使用する時に注意しておいたほうが良いと思われる
（まーすけが勝手に思ってる）タグのお約束をご紹介します♪
今の所、まーすけがHPを作成していて、以下の点に注意していれば不都合は無さそうです。

ファイルの拡張子は統一すべし！

HTMLファイルを保存する時は拡張子を必ずHTMLかhtmファイルとして保存しましょう！
拡張子については後ほど解説させていただきます♪
HTMLファイルは必ず<HTML>～</HTML>で囲むべし！

ブラウザが今読み込んでいるファイルがHTMLで書かれている事を認識する為に、
<HTML>～</HTML>のタグで囲みます。

これ、基本中の基本。
<HTML>～</HTML>のタグで
”これは私のHPですよ～♪”って。

言ってみたら選手宣誓みたいなものかな？
<HTML>～</HTML>のタグでブラウザにHP作りを宣言して、
初めてタグという楽しい呪文を使った
HPの世界を創り始める事が出来るのです。
タグは半角英数で記述すべし！

タグを記述する時の入力は半角英数字(ローマ字入力）で行います

ローマ字入力であれば大文字でも小文字でもどちらでもかまいませんが、
後で手直しをする時、見栄えを良くしてメンテナンスしやすくする為に
どちらかに統一したほうがいいと思います。
（ちなみにまーすけは極力大文字で統一しています）
要素と属性はきっちり宣言すべし！

先程もご紹介しましたが、タグの中身は要素と属性に分類されます。
属性を宣言する時は、半角スペースをあけて記述しましょう。
単独で使われるタグ以外は開始タグと終了タグは一対にすべし！

終了タグ</>は忘れる事がある（閉じ忘れ）ので要注意！
単独で使えるタグ以外を終了タグ</>で閉じないで記述しちゃうと・・・。
今、宣言している属性が、いつまでも続いてしまいます。
例えば・・・。

○正しい例
本当はここからここまで赤の文字にして、
ここからは青の太字で記載しようと思ってたのに・・・。

×悪い例

本当はここからここまで赤の文字にして、
ここからは青の太字で記載しようと思ってたのに・・・。
終了タグ</>を忘れちゃったもんだからず～っとこのまんま。
いつまでたっても最初に宣言を行ったタグは効果を発揮しちゃうか、
宣言どおりじゃない文面になってしまったりとか・・・。

いい事はありません（泣）。
なにより見た目も良くないし・・・。
せっかく色々デザインや文面を工夫したHPも台無しになっちゃいますよ♪

ちゃんと終了タグ</>で忘れずにタグを閉じてあげましょう♪
終了タグは正しい位置に記述すべし！

上に書いたついでと言っちゃ何ですが。
種類の異なるタグを同時に使う時、それぞれのタグの位置関係は

正しい順番である事が必要です
ブラウザ側では厳密に解釈せず終了タグさえあれば表示されますが
できるだけ正しい記述を心がけましょう

○正しい例
<FONT size="5"><B>タグは正しく書こう</B></FONT>
×悪い例
<FONT size="5"><B>タグは正しく書こう</FONT></B>
文字化けしないサイト作りを心がけるべし！

色々なサイトを見にいくと、日本語サイトなのに文字化けしてしまう事ってありません？

これはタグの記述が”これは日本語です！”と記述されていない時によく起きるそうです
ブラウザの”ツール”→”エンコード”で対応している言語に選択しなおせばきちんと表示されるんですが、

どうせなら訪問してくれた人の手をわずらわせない様に工夫しときましょ♪
文字化けしないようにHTMLの<head>から</head>のタグの間にしたの一文を追加します。

たったこれだけなんです。

下の一文はまさに”このサイトは日本語で表記しています”と言う魔法の宣言文。

”このサイトは日本語です”と宣言することでブラウザが間違えずに正しく表示してくれるんです。
たったこれだけで訪問してくれた人がちょっとだけ快適にあなたのサイトを見てくれるようになります
ぜひ、お試しを♪

<meta http-equiv="Content-type" content="text/HTML; charset=shift_jis">

使っていけない文字や記号は使うべからず!

インターネットでは使用できない文字や記号があります。
細かい点は色々とあるようですが、まず半角のカタカナが使えないと事を覚えてて下さい。

記号についても機種依存文字と言って、あなたのパソコン上では表示されるものが、
ほかのパソコンや携帯電話などのPDAなどでブラウザを通して見るときちんと表示されません。
どんな機種でもちゃんと見れるように機種依存文字は使わない様にしましょう。

とりあえず、まーすけが知っている範囲ですが、安心して使える記号をご紹介します。

　▼機種依存しない記号▼

、。，．・：；？！゛゜´｀¨＾￣＿ヽヾゝゞ）
〃仝々〆〇ー―‐／＼～∥｜ …‥‘’“”
（）〔〕［］｛｝〈〉《》「」『』【】
＋－±×÷＝≠＜＞≦≧ ∞∴♂♀∠⊥⌒∂∇≡≒≪≫
√∽∝∵∫∬∈∋⊆⊇⊂⊃∪∩∧∨￢⇒⇔∀∃° ′″℃
￥＄￠￡％Å‰＃＆＊＠§☆★○●◎◇◆□■△▲▽▼
※〒→←↑↓〓 ♯♭♪†‡¶◯´｀¨＾

　▼機種依存しない罫線用記号▼

─│┌ ┐┘└├ ┬ ┤┴ ┼ ━┃┏ ┓┛┗┣ ┳ ┫┻
╋┠ ┯ ┨┷ ┿┝ ┰ ┥┸ ╂

■ 拡張子って何さ？

拡張子とは、ファイル名.(ドット)のあとに付けられる3～4文字の文字のことです。
Windowsはファイルの種類をこの拡張子で判断しています。
ワードやエクセルでファイルを作り”名前をつけて保存”
を選択。
すると保存をしたファイル名のおしりに
共通のローマ字が現れます。

それが拡張子。

これは保存されているファイルの形式を表しています
例えばワードなら.doc エクセルなら.xlsテキストなら.txtなどなど・・・。

・・・。

”見えないよ？”って言ってるそこのあなた♪

パソコンの出荷時点では拡張子は表示されない設定になってるんです。

それを早く教えろい　b(－－〆）って声が聞こえてきそうですが・・・(笑)
んじゃ、早速。

拡張子を表示させて見ましょう♪
ちなみに、”もう見えてるよ”って方は、ここの部分は読み飛ばしてもOKです♪

何でもいいので、フォルダ

を開きます。
開いたら、ツールバー（ファイル（F)とか、ヘルプ（H)がある部分ね♪）の
【ツール】をクリック
↓
【フォルダオプション】を選択します。
↓
開いたダイアログボックスの中に【表示】と言うタブがあるのでクリック♪
↓
"詳細設定："と書かれたボックスの中に【登録されているファイルの拡張子は表示しない】と言うチェック項目があるはず。
↓
この項目にチェックが入ってませんか？
そのチェック項目を外した後、【適用】→【OK】の順にクリックすると・・・。

ほーら。

ファイル名の末尾に"ファイル名.***"と拡張子が表示されてるでしょ？
私たちがただ何気なく使用しているファイルはこの拡張子によって区別してるんです。
例えばHTMLファイル（***.htmlもしくは***.htm）を選択すれば自動的にブラウザが起動しますね？
Windowsがこの情報を読み取ってファイルの内容を判断し、そのファイルをダブルクリックしたときに、どのような動作をするかを決めてるんです。

な～んでこんな面倒な設定になってるんでしょ？

それはね♪
誤ってパソコンのシステムを動かしているファイルの拡張子などを変えてしまわないようにする為なんだって。
もしWindowsのフォルダ内にある「***.exe」とか「***.dll」などの拡張子を変えたらパソコンが動かなくなったりします。
くれぐれも注意して下さい。

まーすけは1度やっちまいました(爆)

ファイルの名前を変えたいと思い、そのまま拡張子まで変更してしまい・・・。

ソフトが起動しない！動かなくなっちゃった！壊しちゃった～！どうしよう～(T_T)
と、ひとりでパニくって、大混乱・・・(^_^;)
超！初心者だったまーすけは原因がわからずに修理に出したところ・・・。
”ファイルの拡張子が変更されてるだけですよ”と言う内容の修理結果と
無駄に使ってしまった着払い送料数百円の請求書がむなしく戻って参りました・・・。

皆さんはくれぐれもこんな事にならないことを祈ります(笑)
Webページを作成する時だけ拡張子を表示させるとかすれば安心ですね。

っと言うわけで。
HP作成時にリンクを指定したり画像の表示する時に
拡張子を使う機会が多くなると思いますので、この機会に覚えちゃいましょう♪
（下の表をプリントアウトしておいてもいいかもしれません）

インターネット上で使用されるファイルの主な拡張子
ファイル形式	拡張子	内容
HTML	.HTML(または.htm)	インターネットファイル
GIF	.gif	画像ファイル（”じふ”もしくは”ぎふ”と読む）
JPEG	.jpg	画像ファイル（”じぇーぺぐ”と読む）
BMP	.bmp	画像ファイル（そのまんま”びーえむぴー”と読む）
PNG	.png	画像ファイル（”ぴんぐ”と読む）
MIDI	.mid	MIDIサウンドファイル
Flash Player	.swf	フラッシュムービーファイル
Shockwave	.dcr	ムービーファイル
QuickTime	.mov	ムービーファイル
LZH	.lzh	圧縮ファイル
ZIP	.zip	圧縮ファイル

｜　topへ戻る　｜　前へ戻る　｜次へ　｜

■ タグの要素と属性

■ タグを使う時のお約束

ファイルの拡張子は統一すべし！

HTMLファイルは必ず<HTML>～</HTML>で囲むべし！

これ、基本中の基本。

言ってみたら選手宣誓みたいなものかな？

タグは半角英数で記述すべし！

要素と属性はきっちり宣言すべし！

単独で使われるタグ以外は開始タグと終了タグは一対にすべし！

終了タグは正しい位置に記述すべし！

正しい順番である事が必要です

文字化けしないサイト作りを心がけるべし！

どうせなら訪問してくれた人の手をわずらわせない様に工夫しときましょ♪

使っていけない文字や記号は使うべからず!

■ 拡張子って何さ？