[Labyrinthe Noir]>[Top]>

HTMLタグ講座

使用テキスト：はじめてのホームページ入門編 HTMLの書き方と使い方 （秀和システム）（amazonで購入）（正誤表）

基本的なタグ

（ページはテキストのセクション番号です）
タグ 意味 オプション 解説 ページ
基本 <HTML> HTML文書であることを宣言     5
<HEAD> ブラウザ内に表示されない文書情報を記述     5
<BODY> ブラウザ内に表示させる文字列やタグを記述。オプションでページの背景や文字色を決めることができる bgcolor background text link vlink alink 解説 5,36
ヘッダ タイトル <TITLE> ブラウザに表示されるタイトル。ブックマーク（お気に入り登録）したときの見出しにもなる     5
概要 <META> HTMLファイルに属性を追加します http-equiv content keywords 解説  
ボディ 段落 <H1>〜<H6> 見出しタグ align 解説 8
<HR> 段落の間に水平線を引く。終了タグなし width size color 解説 23
<P> 行間あり改行。終了タグ省略可 align 解説 20,21
<BR> 行間なし改行。終了タグなし clear 20
<DIV> テキストの行位置を決める align 21
テキスト   タグなし。通常のテキスト文にはタグは必要ない   7
<B> 文字を太字にする   9
<U> 文字にアンダーラインを付ける   12
<I> 文字を斜体にする   11
<FONT> フォントタグ。文字の大きさや色を決める size color face 10,13
<!-- -- > コメント。間に書いた文字は表示されない   17
リスト <UL> 「・」で始まるリストを作ります type 解説 24,25,29,30
<OL> 番号やアルファベットで始まるリストを作ります type start 26-28
<LI> リストに箇条書きします type start 24-30
リンク <A> アンカータグ href name target title 解説 52-57
画像 <IMG> イメージタグ。終了タグなし src border width height align vspace hspace alt 解説 31-35
テーブル <TABLE> テーブルタグ border width height align bgcolor background cellpadding cellspacing bordercolor

解説

事例

 37-47
<CAPTION> テーブルのタイトル align valign 43
<TR> テーブルの行 width height align valign bgcolor 38,44,47
<TD> テーブルのセル width height align valign bgcolor background colspan rowspan 38,41,44-47
<TH> テーブルの見出しとなるセル 39,41,44-47

　背景に黄色をつけたタグが基礎中の基礎です。これらは必ず覚えた方が良いでしょう。
　 これらの他に知っていると便利なタグとしては、<BIG><SMALL><BLOCKQUOTE><SUP><S><TT>などがあります。また、<FORM><INPUT>などで作るフォームという投稿の仕組みがあります。

　参考：とほほのＷＷＷ入門＞HTMLリファレンス

ホームページ作りの基本姿勢

　見やすいページ作り。誰にでも優しいページ作りを目指しましょう。
　 ホームページの目的は、誰かに見てもらうことです。見やすいページ作りはリピーターを作るための基本です。
　 ページを頻繁に、もしくは定期的に見直しましょう。ページの内容が変化することで、ページの作り手の息づかいが感じられるのです。変化の見えないページは、まるで放置された空き家のような印象を与えるため、段々と人が寄りつかなくなってしまいます。
　 更新日や日記をサイト内に置くのは、更新していることをアピールするのに良いことです。季節感のある模様替えもとても良いことです。しかし、更新が滞るとたちまち誰の目にもそれが判ってしまいます。ホームページは生き物ですので、作った後もちゃんと手を掛けてあげましょう。

　 コンテンツの種類は、基本的に動的な物と静的な物の2種類があると良いと思います。
　 動的なコンテンツとは、日々変化するものです。例えば日記や行動記録、近況報告で、ブログや掲示板を使っても良いでしょう。
　 静的なコンテンツとは、辞書や豆知識のようなもので、いつでも参照できる情報のことです。 ゲームや占いのようなお遊びプログラムもあります。
　 特に重要なのが動的なコンテンツです。 これがないと、いつみても変化のないホームページとなってしまい、リピーターがなくなって、忘れられてしまいます。最低でも月1回の更新を目標にし、季節の変化に応じた模様替えを楽しんでみてはいかがでしょうか。

アクセシビリティ

　利用者に優しいホームページ、その指針となるのがアクセシビリティです。
　 個人が作るページの中には、技術や作品を見せることを主体にしていたり、趣味を前面に押し出したページがあります。しかし、それらを受け入れない人もいますし、企業のような公共性の高いサイトでは、そのようなわがままな演出は 利用者に迷惑がかかるだけです。
　 インターネットは個人の部屋の様に自由に飾りつけできますが、ガラス張りで通行人の誰もが目にすることができる、ということを忘れてはいけません。プライベート空間として許されるのは個人サイトの中だけです。しかし、情報を検索して開いたときに、アクセシビリティの悪さによって情報を得る前に来訪者が帰ってしまう（閉じてしまう）ページというのもあるのです。
　 利用者はどんな人か分かりません。年齢や健康状態、アクセスする場所によって受け方が違ってくるのです。
　 やってはいけない、やらないほうが良い事例を挙げますので、作ったページがそれに該当しないように確認してください。配慮の優先度が高い順に並べて置きます。

●：タグ、オプションの解説／★：応用や実例のまとめ

★背景の色と画像について

　ホームページの背景に関する注意事項をまとめました。

　参考：カラーチャート（色見本）

●テーブルと水平線

　テーブルの細かな設定の違いを比較して見てみましょう。
　 <hr>についても記述しています。

★テーブル事例集

　基本的な配置、色分けによる見やすい表の作り方、テーブルの階層化、画像を使用した飾り枠など紹介しています。

●テキスト用タグ一覧

　テキストや段落の表現に関するタブについて一覧でまとめました。
　 <h1> <font><div><center><p><br><blockquote>など。

●アンカー（リンク）

　リンクの仕方について、ディレクトリ構造についてもまとめました。

リンク

素材：まなざしの工房、神楽工房

戻る