◆第三章◆ＨＴＭＬタグの種類[基本]

★区切り線★

• ページの内容が変わるときなどに区切り線を使って見やすくします。タグは、＜Ｈｒ＞で属性でいろいろな変化をつけます。
  

  説明	属性	こう書くと	こうなる
  基本的な区切り線。	なし	＜Ｈｒ＞
  太さを変えます。	Ｓｉｚｅ	＜Ｈｒ　Ｓｉｚｅ＝"４"＞
  長さを変えます。	Ｗｉｄｔｈ	＜Ｈｒ　Ｗｉｄｔｈ＝"７０％"＞
  配置位置を指定します。	Ａｌｉｇｎ	＜Ｈｒ　Ｗｉｄｔｈ＝"６０"　Ａｌｉｇｎ＝"ｒｉｇｈｔ"＞
  色を変えます。	Ｃｏｌｏｒ	＜Ｈｒ　Ｃｏｌｏｒ＝"＃ｆｆ９９９９"＞
  平面的にします。	Ｎｏｓｈａｄｅ	＜Ｈｒ　Ｎｏｓｈａｄｅ　Ｓｉｚｅ＝"４"＞

• Ｗｉｄｔｈのサイズ指定は、単位を何も指定しないで書くか、％を使います。

  ※％は、多用しすぎると、どこのウィンドウに対して何％なのかが分かりにくくなってしまいますので注意しましょう。

  ※最新のブラウザでは、＜Ｈｒ＞のＷｉｄｔｈ属性の属性値は単位を指定しないで記述すると正しく表示されません。＜Ｈｒ＞のＣｏｌｏｒ 属性もスタイルシートを使わないと色は変わりません。

• 実際ＨＴＭＬ文書を書くときは、いろいろなタグを組み合わせる場合が多いです。
  そこで、注意したいのがタグの包囲関係です。（詳しくはこちらを参照）

• 下記に、ここまでで紹介したタグを使ってＨＴＭＬ文書を書いてみます。

  ＨＴＭＬ文書
  ＜Ｈｔｍｌ＞ 　＜Ｈｅａｄ＞ 　　＜Ｔｉｔｌｅ＞ブラウザタイトル＜／Ｔｉｔｌｅ＞ 　＜／Ｈｅａｄ＞ ＜Ｂｏｄｙ＞ 　＜Ｄｉｖ　Ａｌｉｇｎ＝"ｃｅｎｔｅｒ"＞ 　　＜Ｆｏｎｔ　Ｓｉｚｅ＝"４"　Ｃｏｌｏｅｒ＝"＃ｆｆ３３３３"＞＜Ｂ＞なるほど！！＜／Ｂ＞＜／Ｆｏｎｔ＞ 　　＜Ｂ＞ホームページ作成＜／Ｂ＞ 　　　　＜Ｈｒ　Ｗｉｄｔｈ＝"８０％"　Ｓｉｚｅ＝"４"　Ｃｏｌｏｒ＝"＃００ｆｆ００"＞ 　　＜Ｐ＞ 　　　＜Ｆｏｎｔ　Ｓｉｚｅ＝"４"＞ここは＜Ｆｏｎｔ　Ｃｏｌｏｒ＝"＃ｆｆ００００"＞ホームページ作成＜/Ｆｏｎｔ＞について 　　　＜Ｂｒ＞解り難い部分を解り易く紹介しています。＜/Ｆｏｎｔ＞ 　　＜/Ｐ＞ 　　　＜Ｄｉｖ　Ａｌｉｇｎ＝"ｌｅｆｔ"＞ 　　　　・このサンプルを理解できれば、後は色々と応用できるはずです。＜Ｂｒ＞ 　　　　・ここのブラウザ表示は、＜Ｂｏｄｙ＞〜＜/Ｂｏｄｙ＞の間に書かれている部分です。 　　　＜／Ｄｉｖ＞ 　＜/Ｄｉｖ＞ ＜／Ｂｏｄｙ＞ ＜／Ｈｔｍｌ＞
  ブラウザ表示
  なるほど！！ホームページ作成 ここはホームページ作成について 解り難い部分を解り易く紹介しています。 ・このサンプルを理解できれば、後は色々と応用できるはずです。 ・ここのブラウザ表示は、＜Ｂｏｄｙ＞〜＜/Ｂｏｄｙ＞の間に書かれている部分です。

★他サイトにリンクするには★

★自サイト内へリンクするには★

相対パスでの指定方法は以下の通りです。

• 同じフォルダにあるファイルにリンクする場合
  ＜Ａ　Ｈｒｅｆ＝"ファイル名"＞となります。
• 1つ下のフォルダにあるファイルにリンクする場合
  ＜Ａ　Ｈｒｅｆ＝"フォルダ名/ファイル名"＞になります。
• ２つ下のフォルダにあるファイルにリンクする場合
  ＜Ａ　Ｈｒｅｆ＝"フォルダ名/フォルダ名/ファイル名"＞になります。と、ここまではＵＲＬの指定とあまり変わりはありません。 重要なのは次からです。
• 1つ上のフォルダにあるファイルにリンクする場合
  1つ上のフォルダを示す記号「../」を使います。＜Ａ　Ｈｒｅｆ＝"../ファイル名"＞になります。
• ２つ上のフォルダにあるファイルにリンクする場合
  ＜Ａ　Ｈｒｅｆ＝"../../ファイル名"＞になります。

★自サイト内の同じページの特定の場所へ移動（リンク）するには★

★自サイト内の違うページの特定の場所へ移動（リンク）するには★

★＜Ａ＞タグの属性[基本]★

★画像ファイルの種類★

• ＧＩＦファイル

  ファイルの拡張子は .gif です。256色しか扱うことができませんが、ファイルサイズが小さく、透過（背景透明）GIFやアニメーションGIFなど、ホームページに魅力的な機能がサポートされています。CompuServ（現在は AOL に吸収）という米国のパソコン通信会社が定めたフォーマットです。ただし、Unisys社による特許問題によって、GIF を扱えるフリーソフトが少ないのが難点です。

• ＪＰＥＧファイル

  ファイル拡張子は.jpgです。ウェブページに貼り付けられている写真画像などは、ほとんどがJPEG形式です。絵やアイコンなど色数の少ない画像は GIFファイル、写真やCGのように色数の多い画像は JPEGファイルが適しています。

• ＢＭＰファイル

  ファイル拡張子は.bmpです。Windows 標準の画像フォーマットです。「ペイント」などで作成した画像も通常は BMPファイルとして保存されます。しかし、ファイルサイズが無駄に大きく、BMPファイルに対応していないブラウザも多くあることから、ウェブページではあまり使用されません。フリーソフトなどを使いGIFファイルに変換してから貼り付けるのが一般的です。「ペイント」でも変換が可能です。方法としては「名前を付けて保存」でファイルの種類を選ぶだけです。

• ＰＮＧ

  ファイル拡張子は.pngです。GIF画像でUnisysの特許問題があることから、GIFに代わるフォーマットして定められたのがPNG（ピング）です。HTML などの標準化を行っている W3C という団体が規定しました。Internet Explorer 4.0、Netscape Communicator 4.04 以降で対応しています。

• 貼り付ける前に、画像を用意しなければならないのですが、アイコンや壁紙などの画像は素材屋さんで無料で配布しています（厳選リンク集に掲載してます）。 用意した画像は、homepageフォルダの中にimgという名前のフォルダを作りその中にまとめて入れておきましょう。

• ページに画像を配置するには、＜Ｉｍｇ＞タグを使いＳｒｃ属性で画像のファイルを相対パスで指定します。画像は、文字列と同じ扱いなので、例えば、

  こう書くと
  これはここのサイトの＜Ｉｍｇ　Ｓｒｃ＝"ｉｍｇ／ｂａｎａ１．ＧＩＦ"　Ｗｉｄｔｈ＝"８８"　Ｈｅｉｇｈｔ＝"３１"＞バナーになります。
  こうなる
  これはここのサイトのバナーになります。

  となります。
• 画像のwidth (幅)や height(高さ) 属性は省略することも可能ですが、指定しておいた方が表示の体感速度が速くなりますので指定することをおすすめします。サイズが分らない場合は、下記のようにして調べることができます。
  • 画像ファイルをブラウザ（IE）にドラッグ＆ドロップする。
  • ブラウザで画像をマウスの右クリックし、[プロパティ] を実行する。
  • プロパティダイアログの [大きさ] を読み取る。100 x 200 と表示される場合は、width=100 height=200 と指定します。

★＜Ｉｍｇ＞タグの属性[基本]★

説明	属性	こう書くと	こうなる
画像のＵＲＬを指定します。	ＳＲＣ	＜Ｉｍｇ　Ｓｒｃ＝"ｉｍｇ／ｂａｎａ１．ＧＩＦ"　Ｗｉｄｔｈ＝"８８"　Ｈｅｉｇｈｔ＝"３１"＞
画像上にポインタが来ると説明文を表示します。	Ｔｉｔｌｅ	＜Ｉｍｇ　Ｓｒｃ＝"ｉｍｇ／ｂａｎａ１．ＧＩＦ"　Ｔｉｔｌｅ＝”こんなふうになります。"　Ｗｉｄｔｈ＝"８８"　Ｈｅｉｇｈｔ＝"３１"＞
画像が表示されない場合に変わりに文章が表示されます。	Ａｌｔ	＜Ｉｍｇ　Ｓｒｃ＝"ｉｍｇ／ｂａｎａ１．ＧＩＦ"　Ａｌｔ＝"この画像はバナーです"　Ｗｉｄｔｈ＝"８８"　Ｈｅｉｇｈｔ＝"３１"＞

★記号リストと番号リスト★

• ＜Ｕｌ＞が記号リストです。
• ＜Ｏｌ＞が番号リストです。
• ＜Ｌｉ＞がリスト項目の数です。

★記号リストの記号を変える★

★番号リストの番号を変える★

※リストの＜/Ｌｉ＞は省略できますが＜Ｐ＞や＜Ｆｏｎｔ＞などのタグをさらに書く場合は終了タグを書きましょう。そうしないとタグの包囲関係が崩れ うまく表示されない場合があります。リストに限らず終了タグが省略可能なタグは全て注意しましょう。

• テーブルは、表を作るときに使用します。ページ全体のレイアウトにも応用することができます。
• まずは、基本的なテーブルです。

こう書くと	こうなる
＜Ｔａｂｌｅ　Ｂｏｒｄｅｒ＝"１"＞ 　＜Ｔｒ＞ 　　＜Ｔｄ＞セル１＜／Ｔｄ＞＜Ｔｄ＞セル２＜／Ｔｄ＞＜Ｔｄ＞セル３＜／Ｔｄ＞ 　＜／Ｔｒ＞ 　＜Ｔｒ＞ 　　＜Ｔｄ＞セル４＜／Ｔｄ＞＜Ｔｄ＞セル５＜／Ｔｄ＞＜Ｔｄ＞セル６＜／Ｔｄ＞ 　＜／Ｔｒ＞ 　＜Ｔｒ＞ 　　＜Ｔｄ＞セル７＜／Ｔｄ＞＜Ｔｄ＞セル８＜／Ｔｄ＞＜Ｔｄ＞セル９＜／Ｔｄ＞ 　＜／Ｔｒ＞ ＜／Ｔａｂｌｅ＞	セル１ セル２ セル３ セル４ セル５ セル６ セル７ セル８ セル９

• ＜Ｔａｂｌｅ＞で、テーブルを定義します。Ｂｏｒｄｅｒ属性で枠線の太さを指定します。０に指定すると枠線は、表示されません。数字を大きくすればより立体的な枠になります。
• ＜Ｔｒ＞で、表の横一行分になります。
• ＜Ｔｄ＞を＜Ｔｒ＞〜＜/Ｔｒ＞の間に一つ挿入することで、一つのセル枠ができます。三つ入れれば、横三枠になります。


• 表で主に使うタグと属性を紹介します

説明	タグ・属性	こう書くと	こうなる
横のセルを結合します。属性値で結合の数を指定します。	＜Ｔｄ＞ 属性 ＣｏｌＳｐａｎ	＜Ｔａｂｌｅ　Ｂｏｒｄｅｒ＝"１"＞ ＜Ｔｒ＞ 　＜Ｔｄ　ＣｏｌＳｐａｎ＝"２"＞セル１＜／Ｔｄ＞ ＜／Ｔｒ＞ ＜Ｔｒ＞ 　＜Ｔｄ＞セル２＜／Ｔｄ＞＜Ｔｄ＞セル３＜／Ｔｄ＞ ＜／Ｔｒ＞ ＜／Ｔａｂｌｅ＞	セル１ セル２ セル３
縦のセルを結合します。属性値で結合の数を指定します。	＜Ｔｄ＞ 属性 ＲｏｗＳｐａｎ	＜Ｔａｂｌｅ　Ｂｏｒｄｅｒ＝"１"＞ ＜Ｔｒ＞ 　＜Ｔｄ　ＲｏｗＳｐａｎ＝"２"＞セル１＜／Ｔｄ＞ 　＜Ｔｄ＞セル２＜／Ｔｄ＞ ＜／Ｔｒ＞ ＜Ｔｒ＞ 　＜Ｔｄ＞セル３＜／Ｔｄ＞ ＜／Ｔｒ＞ ＜／Ｔａｂｌｅ＞	セル１ セル２ セル３
見出しにします。＜Ｔｄ＞と同じ使い方です。	＜Ｔｈ＞	＜Ｔａｂｌｅ　Ｂｏｒｄｅｒ＝"１"＞ ＜Ｔｒ＞ 　＜Ｔｈ＞セル１＜／Ｔｈ＞＜Ｔｈ＞セル２＜／Ｔｈ＞ ＜／Ｔｒ＞ ＜Ｔｒ＞ 　＜Ｔｄ＞セル３＜／Ｔｄ＞＜Ｔｄ＞セル４＜／Ｔｄ＞ ＜／Ｔｒ＞ ＜／Ｔａｂｌｅ＞	セル１ セル２ セル３ セル４

リンクの文字色の設定もできますが、それはスタイルシートを使ってしましょう。