ＨＴＭＬタグ・逆引きリファレンス

ＨＴＭＬタグ・逆引きリファレンス（ドキュメント・レイアウト）

◆コメントを入れる

ブラウザーに表示されないコメントを書き入れます。主に編集時の注意書きとして利用。

◆背景やテキストの色を変える
<body bgcolor="#000000" text="#ffffff">
ホームページの背景色を変更する場合は「body」タグにbgcolor属性を追加します。またテキストの色を変更する場合はtext属性を追加します。上記の例では背景色を黒、テキストを白に指定してます。
他にはlink属性（リンクの色）、alink属性（リンクをクリック中の色）、vlink属性（既に訪問済リンクの色）などもあります。

色の指定は、色の３原色である赤、緑、青のそれぞれを２桁の１６進数で表記します。

#000000
（black） #808080
（gray） #c0c0c0
（silver） #ffffff
（white） #0000ff
（blue） #000080
（navy）

#008080
（teal） #008000
（green） #00ffff
（aqua） #00ff00
（lime） #ffff00
（yellow） #ff0000
（red）

◆背景にイメージを使いたい
<body background="画像ファイル名">
画像ファイル名はＵＲＬで絶対指定したり、同じサーバー内にあるファイルを相対指定します。
画面をスクロールしても背景画像はそのまま固定したい場合は「body」タグにbgproperties=fixedと記述します。
例：<body background="tmp.jpg" bgproperties="fixed">

◆変化の付いた横罫線をひきたい
<hr color="#0000ff" size="8" width="80%" align="right">
▼表示例：

罫線をひくタグ「hr」に「色の指定（青色）」、「線の太さを８ピクセル」、「長さを画面の横幅の８０％」、「右寄せ指定」の属性を追加してます。

◆表（テーブル）を作成したい
<table border="2" width="60%" height="100" align="center"> <tr bgcolor="#c0c0c0"> <td>No</td><td>名前</td><td>特徴</td> </tr> <tr> <td>１</td><td>シロ</td><td>黒い犬です</td> </tr> <tr> <td>２</td><td>クロ</td><td>白い犬です</td> </tr> </table>
▼表示例：

No 名前特徴

１シロ黒い犬です

２クロ白い犬です

テーブルは、まず最初に「table」～「/table」タグで表の領域を確保します。
「table」タグには、border属性を追加し、ピクセル数で表の仕切り線の幅が指定できます。このborder属性を省略すると仕切り線の無いテーブルになります。
例では、テーブルの横幅（width）を６０％、縦幅（height）を１００ピクセル、テーブルの位置を中央寄せで指定してます。

続いて、各行、各列の内容を記述していきますが、行の区切りは「tr」～「/tr」タグ、列の区切りは「td」～「/td」タグを使用します。
例では最初の行の背景色（bgcolor）を銀色（#c0c0c0）に指定してます。

テーブルのなかにテーブルを記述したりしてテーブルタグを駆使すれば凝ったレイアウトも可能ですが、その場合は、HTMLの記述がすごく複雑になりやすいのが難点のど飴です。。。
テーブルは他にもさまざまな属性を指定できますので、興味のある方は色々と調べてみてはどうでしょうか？

◆特殊文字を使いたい

特殊文字ブラウザー上での表示

< <

> >

& &

" "

© ©

® ®

タグ表記に用いられる記号や特殊フォントをブラウザーに表示させたい場合、左側の特殊文字を使えばブラウザー上では右側のように表示されます。【目次】・ホームページの作り方
・ホームページ作成ツールやブログを利用する
・ホームページ用のサーバーを持つ（借りる）
・プロバイダーのサーバースペースを利用する
・レンタルサーバー（ホスティング）を利用する
・ホームページ作成の基本的な流れ
・具体的なＨＴＭＬファイルの作成方法
・ＨＴＭＬタグ・逆引きリファレンス
・作成したＨＴＭＬファイルをサーバーにアップする

ＨＴＭＬタグ・逆引きリファレンス（テキスト・フォント）

◆改行したい

<br>

改行するには改行タグ「br」を記述します。連続して改行する場合は、改行の数だけ改行タグ「br」が必要です。改行タグは終了タグはありません。

◆段落を作りたい

<p>

段落を設定したい場合は「p」タグを記述すれば改行され、さらに一行分のスペースが挿入されます。改行タグを違って、連続して「p」タグを入力しても反映されるのは１つだけです。終了タグは省略可能ですが、<p>～</p>として使うことも可能です。

◆テキストの位置を指定する

<div align="left">テキストの位置を指定する（左）</div>
<div align="center">テキストの位置を指定する（中央）</div>
<div align="right">テキストの位置を指定する（右）</div>

▼表示例：

テキストの位置を指定する（左）

テキストの位置を指定する（中央）

テキストの位置を指定する（右）

「div」タグの属性のalignで位置を指定します。中央寄せは「div」タグ以外にも<center>～</center>でも可能です。

◆見出し文字のサイズを変えたい

<h1>～</h1>
<h2>～</h2>
<h3>～</h3>
<h4>～</h4>
<h5>～</h5>
<h6>～</h6>

「1」～「6」で指定しますが、数字が大きくなるにつれて文字は小さくなります。つまり「h1」が一番文字が大きくなります。ちなみにこのタグ（特にh1）で囲まれた文字は検索に有利になります。

◆文字のサイズや色を変えたい

<font color="#0000ff">文字のサイズや色を変えたい</font>
<font color="#ff0000" size="1">文字のサイズや色を変えたい</font>
<font size="+1">文字のサイズや色を変えたい</font>
<font size="-1">文字のサイズや色を変えたい</font>

▼表示例：
文字のサイズや色を変えたい
文字のサイズや色を変えたい
文字のサイズや色を変えたい
文字のサイズや色を変えたい

「font」タグの属性のcolorで色を指定します。サイズは「size」属性で「1～7」で指定します。先ほどの見出し文字のタグと逆で「1」が一番小さく、「7」が一番大きいサイズになります。また、+1、+2や、-1のように相対指定する事も可能です。

◆書体を変えたい

タグ	意味	表示例
<b>～</b>	太文字	表示例
<i>～</i>	斜体	表示例
<s>～</s>	抹消線	~~表示例~~
<tt>～</tt>	等幅	`表示例`
<u>～</u>	下線	表示例
<sup>～</sup>	上付添字	^表示例
<sub>～</sub>	下付添字	_表示例
<big>～</big>	大きめの文字	表示例
<small>～</small>	小さめの文字	表示例
<em>～</em>	強調	表示例
<strong>～</strong>	より強い強調	表示例

ＩＥの場合は「b」と「strong」は太字、「i」と「em」は斜体と同じ効果になってますが、タグの意味自体は違います。「strong」タグで囲んだ文字は検索で上位に表示されるのに極めて有効なので（但し使いすぎると逆効果）「strong」タグはよ～く考えてここぞという時に使用しましょう。

ＨＴＭＬタグ・逆引きリファレンス（リスト・画像・リンク）

◆マーク付リストを作りたい

<ul>
<li>アルミ缶の上にあるみかん
<li type="square">猫とコンドルが寝こんどる
</ul>

▼表示例：

アルミ缶の上にあるみかん
猫とコンドルが寝こんどる

リストの始めと終わりに「ul」タグを置き、この中の各項目の先頭に「li」タグを並べます。また、各項目ごとに自動的に改行されます。
リストのマークを変更したい場合は「type」属性に disk（黒丸）、circle（白丸）、square（黒四角）を指定します。
番号リストで表示したい場合は、「ul」タグの代わりに「ol」タグではさむと、「li」が番号になって表示されます。

◆用語とその定義を箇条書きしたい

<dl>
<dt>恋とは？
<dd>恋はティラミスよりも甘いモノですｗ
</dl>

▼表示例：

恋とは？: 恋はティラミスよりも甘いモノですｗ

「dl」タグは定義型リストで、この中に「dt」タグ（用語）と「dd」タグ（その説明）を並べます。また、各項目ごとに自動的に改行されます。

◆引用した部分が分かるように表示したい

<blockquote>認めたくないものだな、若さゆえの過ちというものを。</blockquote>

▼表示例：

認めたくないものだな、若さゆえの過ちというものを。

引用タグ「blockquote」は、上下１行分のスペースが空き、更に左右もインデント表示になります。

◆画像を表示したい

<img src="hp3.jpg" alt="アイコン">
<img src="http://adgjm.net/home/hp7.jpg" alt="ドラッグ＆ドロップの画像" width="60%" height="100">
<img src="../gazou/cat.gif" alt="猫の画像" border="0">

画像を表示するタグは「img」です。
表示する画像ファイルは「src」属性で指定しますが、絶対パス・相対パス両方で指定できます。

絶対パスは「http://」から始まるURLを使ってファイルの場所を指定する方法です。
相対パスはこのページ（基準となるファイル）から見たリンク先のページをディレクトリ（＝フォルダー）とファイル名で指定します。例えば同じディレクトリ（＝フォルダー）のファイルを指定する場合は、ファイル名のみの記入でＯＫです。一つ上のディレクトリ（＝フォルダー）を指す場合は「../」を使用します。「test」ディレクトリ（＝フォルダー）の「tmp.jpg」ファイルを指す場合は「test/tmp.jpg」と指定します。

「alt」属性は画像が扱えないブラウザーや画像を表示しない設定にしているブラウザーのために画像の代わりにここに記述したテキストを表示します。
「width」（横幅）、「height」（縦幅）属性を記述すると、画像の表示サイズを比率やピクセル単位で指定できます。
あと、「border」属性で境界線の太さを指定できますが、ここの値を「0」にすると境界線は表示されません。

◆他のページにジャンプ（リンク）したい

<a href="index.htm" title="トップページ">トップページへ</a>
<a href="http://www.yahoo.co.jp" target="_blank">Yahoo!JAPAN</a>

リンクを貼るタグは<a href="リンク先">～</a>です。リンク先は絶対パス・相対パス両方で指定できます。
「title」属性をつけると、ここで記述した文言がリンクにマウスをのせたときに表示されます。
「target="_blank"」をつけると、リンク先を別ウインドウで開きます。

他にも便利なタグはまだまだたくさんあります。
そこで、タグ・マスターを目指す方や、ちょっとしたホームページ修正時のお供としてかかせないのが以下のＨＴＭＬタグ辞書です。

これは、個人的に超お勧めの本で、僕も使い倒してますｗ

次のページへ