０からホームページ作成【基本】　―お小遣い　稼いで　お金持ち―

ホームページのページ情報・主なタグなど基本的な事を紹介していますので、お役立て下さい。

【基本】

ページの情報に関するタグ

ページに関する情報
<meta name="★" content="☆">
☆=author(作成者),copyright(コピーライト),Reply-to(連絡先) content-language(記述言語),build(製作年月日)

使用例
<html> <head> <title>お小遣い稼いでお金持ち</title> <meta name="author" content="santasan"> <meta name="Reply-to" content="http://money.nandenjoho.com/"> <meta name="copyright" content="ja"> <meta name="build" content="2005/07/01"> </head> <body> </body> </html>

ロボット型検索エンジン用のキーワードを設定する
<meta name="★" content="☆">
★=keyword,description
keyword=ページのキーワード,description=検索結果として表示させる文章を入れます

ロボット型検索エンジンの制御方法
non(現在のページ、リンク先ページの両方を検索禁止)、noindex(現在のページのみ検索禁止)、nofollow(リンク先ページの検索禁止)、index(現在のページの検索を許可)、all(全てを検索許可)

使用例
<html> <head> <title>お小遣い稼いでお金持ち</title> <meta name="keyword" content="お小遣い,節約,お金持ち"> <meta name="description" content="インターネットを使ってお金持ちになれるように色々と紹介しています。"> <meta name="robots" content="all"> </head> <body> </body> </html>

コメントの挿入

★=コメントの内容を入れます。
このタグで挟まれたテキストはブラウザには表示されませんからタグの目印やメモ書きとして利用します。
また、同じ意味のタグとして<comment>～～</comment>もあります。

使用例
<html> <head> <title>お小遣い稼いでお金持ち</title> </head> <body> <!--ココから始まり--> <comment>ココから始まり</comment> </body> </html>

ページキャッシュを無効にする
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
通常ブラウザがページを読み込むと、その内容をキャッシュ（一時的に記憶）されますが、それを無効にする事ができます。
ただし、画像などはキャッシュされてしまいます。

使用例
<html> <head> <title>お小遣い稼いでお金持ち</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> </head> <body> </body> </html>

ページを一定時間毎に更新する
<meta http-equiv="refresh" content="★">
★=更新間隔（秒数で指定します。）

文字を書く

基本のフォントサイズを設定する
<basefont size="★">
特に指定しない限り、ページ全体の文字サイズが指定されます。
★=(1～7で設定します。)

基本の文字表示色を設定する
<body text="★">
★=カラーネームまたはカラーコードで文字色が指定されます。

見出し文字を設定する
<h★>～</h★>
★=1～6

見出し文字の位置指定
<h★ align="☆">～</h★>
☆=left(左詰)、center(中央揃え)、right(右詰)

文章を段落する
<div>★</div>
★=段落を形成する文章
<p>★</p>
★=段落を形成する文章
<div>との違いは段落の前後に空白行が一行挿入されます。

使用例
<html> <head> <title>お小遣い稼いでお金持ち</title> </head> <body text="blue"> <basefont size="3"> <div align="center">段落の指定タグです</div> <p align="centerquot>こちらも段落指定のタグです</p> </body> </html>

段落文字の左、右、中央寄せ
<div align="★">～</div>
<p align="★">～</p>
★=left(左詰)、right(右詰)、center(中央揃え)

改行
<br>
終了タグは必要とせず、このタグだけで強制的に改行させます。

自動改行を禁止する
<nobr>★</nobr>
★自動改行を禁止します。

斜体（イタリック）文字
<i>★</i>
★=斜体にする文字

アンダーライン
<u>★</u>
★=アンダーラインを引く文字

取り消し線
<s>★</s>
★=取り消す文字
文字の真ん中に取り消し線を引きます。

この他に同じ機能のタグとして<strike>★</strike>や
削除された事を指定するタグで<del>★</del>等があります。

文字にルビをつける
<ruby>★<rt>☆</rt></ruby>
★=ルビを付ける対象文章
☆=ルビ

（例　お金持ち株式会社）
お金持ち株式会社おかねもちかぶしきがいしゃ

上付き、下付き文字
<sup>★</sup>
<sub>☆</sub>
★=上付き表示の文字
☆=下付き表示の文字
気持ちの表現や数式を表す時に使えば便利ですよね。
（例）
上付き　うれしい²
下付き　 H₂O

強調文字
<strong>★</strong>
★=強調表示する文字
（例）
お小遣い稼いでお金持ち

フォント（書体）スタイル
<font face="★">～</font>
★=書体（フォント）名
<font>タグのface属性は表示する書体を指定するタグです。
閲覧者側のシステムに指定したフォントがインストールされている場合に限り表示されます。
下記のようにいくつかのフォントを指定しておくといいですね。
<font face="HGS創英角ﾎﾟｯﾌﾟ体,HG創英角ｺﾞｼｯｸUB,HGSｺﾞｼｯｸE">～</font>

文字タグ一覧
開始タグ	終了タグ	利用方法	サンプル
<H★>	</H★>	見出し文字サイズの指定　★=1（最大）～6（最小） <H2>見出し２</H2>	見出し２
<FONT>	</FONT>	サイズの指定 1（最小）～7（最大）で指定します。 <FONT SIZE="4">サイズ４</FONT>	サイズ４
		文字の色の指定 <FONT COLOR="red">赤</FONT> 赤でも濃い赤・薄い赤などいろいろな赤があるので、その場合は、コチラのコードで設定します。（例　#FF4955）	赤
		文字の種類の指定 <FONT FACE="HGP創英角ﾎﾟｯﾌﾟ体">お金持ち</FONT> 文字の書体の変更は、コチラを参考にして下さいね。ちなみにサンタさんは、Tahomaを利用しています(^-^)	お金持ち
		まとめて記述可：<FONT SIZE="4" COLOR="red" FACE="MS ゴシック">まとめて</FONT>　→　まとめて
<BASEFONT>		<FONT>で指定しない全体のテキストのフォントサイズを指定。 ★=１（最小）～７（最大） <BASEFONT SIZE="★">
<BIG>	</BIG>	大きいフォント　<BIG>大きい</BIG>	大きい
<SMALL>	</SMALL>	小さいフォント	小さい
<B>	</B>	太字（ボールド）	太字
<I>	</I>	斜体（イタリック）	斜体
<TT>	</TT>	タイプライタテキスト（固定フォント）	`タイプ`
<U>	</U>	下線付き	下線
<S>	</S>	打ち消し線付き	~~打ち消し線~~
<SUB>	</SUB>	サブスクリプト（下付き）テキスト	_サブ
<SUP>	</SUP>	スーパースクリプト（上付き）テキスト	^スーパー
<STRONG>	</STRONG>	もっとも強い強調文字を表す（太字）	最強調
<CITE>	</CITE>	引用文を表す（斜体）	引用
<EM>	</EM>	強調文字を表わす（斜体）	強調
<VAR>	</VAR>	変数を表わす（斜体）	`変数`
<DFN>	</DFN>	定義文を表わす（斜体）	定義
<BR>		改行
<P>	</P>	段落内の表示位置をleftで左寄せ,centerで中央揃え,ｒightで右寄せ <P ALIGN="right">	段落右寄せ
<HR>		水平ライン（罫線）を指定する
		横幅指定　<HR WIDTH="50">
		太さ指定　<HR SIZE="5">
		影無し　　<HR NOSHADE>
		色付き　<HR color="#ff0000">
<PRE>	</PRE>	見た目どおりに表示させる。このタグで囲まれたテキストの前後は１行ずつ改行され、インデントされて表示される	見た目どおり表示
<CENTER>	</CENTER>	センタリング（中央添え） <CENTER>中央に</CENTER>	中央に
<DIV>	</DIV>	テキストの表示位置を変えます。 leftで左寄せ,centerで中央揃え,ｒightで右寄せ <DIV ALIGN="right">文字右寄せ</DIV>	文字右寄せ
		<DIV STYLE="classname">（スタイルシート）
<SPAN>	</SPAN>	指定部分へのスタイルシートの適用 <SPAN>ここだけ指定</SPAN>	ここだけ指定
		<SPAN　STYLE="classname">（スタイルシート）

レイアウト

背景色の指定
<body bgcolor="★">
<body >タグのbgcolor属性で背景色の指定が出来ます。
コチラを参考にして下さいね。

使用例
<html> <head> <title>お小遣い稼いでお金持ち</title> </head> <body bgcolor="#00FF55"> </body> </html>

背景に壁紙などの画像を指定
<body background="★">
★=背景用画像のＵＲＬ（同一ディレクトリにある場合はファイル名のみで指定）

使用例
<html> <head> <title>お小遣い稼いでお金持ち</title> </head> <body background="iruka.gif"> </body> </html>
※上記の場合のサンプルはコチラ

ボタンタグ
<button style="background-color: blue; color: white; font-weight:bold">★</button>
★=ボタンに表示する文字列
（サンプル）

リンク

文字や画像をクリックして移動できる機能をリンクといいます。
ホームページ作りには欠かせない機能（タグ）ですから是非使い方をマスターして下さいね。

リンクの基本
<a href="★">☆</a>
★=リンクするファイルまたはＵＲＬが入ります。
☆=テキスト（文字）や画像が入ります。これがリンクボタンになります。
リンクするファイルが同じディレクトリにある場合はファイル名のみの指定でＯＫですが、別サーバ（サイト）にリンクする時はhttp://～～と全て必要です。

相対パスと絶対パス
相対パスとは、今自分が作業しているファイルから見たリンク先のファイルの位置関係で絶対パスとはインターネット全体から見た
ファイルの住所みたいなものです。
相対パスの指定は同じディレクトリ（フォルダ）内ならファイル名の指定でＯＫですが、ファイル数が多くなり新しいフォルダを作って整理した場合などファイル名だけではリンク先を指定できません

参考
MyHomePage ┣ index.html ┃ aaa.html ┗ okane ┗ bbb.html
index.htmlから見て aaa.htmlへのリンクは、<a href="aaa.html">aaaファイルへ</a>となりますが bbb.htmlへのリンクの場合は、<a href="okane/ｂｂｂ.html">bbbファイルへ</a>となります。今度は、bbb.htmlからindex.htmlにリンクするには、<a href="../index.html">トップページへ</a>となります。

リンク文字色の指定
<body link="★" alink="☆" vlink="■">
★=未リンク状態の文字色（カラーコードまたはカラーネーム）
☆=リンク中状態の文字色（カラーコードまたはカラーネーム）
■=リンク済みの文字色（カラーコードまたはカラーネーム）
カラーコード（カラーネーム）は、コチラを参考にして下さい。

同じページ内でリンク
<a href="#★">☆</a>
<a name="★">■</a>
★=任意のキーワード（アンカー名）
☆=リンクを設定する要素（文字やイメージ）
■=アンカーを設定する要素（文字やイメージ）

使用例
<html> <head> <title>お小遣い稼いでお金持ち</title> </head> <body bgcolor="#FFFFCC"> <a href="#tag">タグを使おう</a> <a href="#java">ジャバスクリプトを使おう</a> <a href="#home">ホームページを作ろう</a> ジャンプしたいところに <a name="tag">タグ使用例</a> <a name="java">ＪＡＶＡ使用例</a> <a name="home">ホームページ作成</a> </body> </html>

任意のページの任意の場所にリンク
<a href="★#☆">～～</a>
★=ジャンプ先のＵＲＬまたはファイル名
☆=アンカー名

使用例
<html> <head> <title>お小遣い稼いでお金持ち</title> </head> <body bgcolor="#FFFFCC"> <a href="tag.htm#tag">タグを使おう</a> <a href="java.htm#java">ジャバスクリプトを使おう</a> <a href="tukurou.htm#home">ホームページを作ろう</a> ジャンプしたいページの指定箇所に <a name="tag">タグ使用例</a> <a name="java">ＪＡＶＡ使用例</a> <a name="home">ホームページ作成</a> </body> </html>

新しいウィンドウを開いてリンク
<a href="★" target="_blank">～</a>
★=リンクするファイルまたはＵＲＬ

リンクを表示するウインドやフレームを指定
基準となるジャンプ先の指定(ヘッダータグ内に記述します)
<base target="★">
それぞれのリンクで指定
<a target="★">
★=ターゲット名（_top,_self,_parent,任意名称）_blankは上記を参照

_top		フレームを解除して表示
_blank		新しくブラウザ画面を立ち上げる
_self		リンクを設定するファイル（作業中）のあるフレームに表示
_parent		今のフレームの親元フレームに表示
任意名称		フレーム分割時Name=""でつけたウィンドウの名前のフレームに表示

メールソフトをたち上げるリンクボタン
<a href="mailto:★">～～</a>
★=送信先のメールアドレスを入れます。

マウスカーソルをのせると説明やヘルプなどが出る
<a href="★" title="☆">～</a>
★=リンクするファイルまたはＵＲＬを入れます。
☆=表示させる説明やヘルプの文章を入れます。
（サンプル）
カーソルをのせてみて下さい。

リンクボタンに画像を使用
<a href="★"><img src="☆"></a>
★=リンク先ファイル名またはＵＲＬ
☆=リンクボタンとして表示させる画像ファイル名
<a href="★"><img src="☆" border="0"></a>
<img>タグのborder属性で0を指定するとリンクボタン外枠の線を非表示にする事ができます。

クリッカブルマップの設定
マップ用画像ファイルの指定とマップの定義
<img src="①" usemap="#②">
マップを定義する
<map name="②">
(リンクの数だけ繰り返します)
<area shape="③" coords="④" href="⑤" alt="⑥"></map>
①=マップに使用する画像ファイル
②=任意のマップ名を指定します
③=クリッカブルマップの形状の指定{default(画像全体),rect(四角形)circle(正円),poly(多角形)}
④=座標値{③の形状がrectの場合、X1,Y1,(左上の座標)X2,Y2(右下の座標)のようにカンマで区切って４つの座標を指定circleの場合、中心X,中心Y,半径のようにカンマで区切って３つの座標を指定}
⑤=リンク先ＵＲＬ
⑥=マウスカーソルが乗った時のテキスト表示

使用例
<html> <head> <title>クリッカブルマップ！</title> </head> <body bgcolor="#008b8b"> <img src="title01.jpg" width=350 height=70 usemap="#mymap"> <map name="mymap"> <area shape="rect" coords="0,0,65,65" href="tag_top.htm" alt="タグ一覧へ！"> <area shape="rect" coords="65,0,150,65" href="hogehoge.html" alt="hogehogeへ！"> <area shape="rect" coords="220,0,320,65" href="rerere.html" alt="rerereへ！"> </map> </body> </html>
使用例のジャンプ先は全て同じです(^_^;)

画像の表示

画像表示の基本タグ
<img src="★">
★=表示させる画像ファイル名（ＵＲＬ）
終了タグが無く単独で使用します。

画像と回りこみテキストとの余白を指定
<img src="★" align="☆" vspace="■" hspace="◆">
★=表示させる画像ファイル名（ＵＲＬ）
☆=画像の表示位置（left,right）テキストは画像の反対に回りこみます
■=上下の余白（ピクセル数）
◆=左右の余白（ピクセル数）

回り込みテキストの解除
<br clear="★">
改行タグの<br>にCLEAR属性を加える事によりイメージに対する回りこみを解除する事ができます。
★=left(左の画像に対する回り込みをカット)、right(右の画像に対する回り込みをカット)、all(全てカット)

表示する画像のサイズを指定
<img src="★" width="☆" height="■">
★=表示させる画像ファイル名（ＵＲＬ）
☆=横幅（ピクセル数、ウィンドウに対する％で指定）
■=高さ（ピクセル数、ウィンドウに対する％で指定）
<img>タグのwidth属性、height属性を使ってイメージの表示サイズの指定が出来ます。
また、元のサイズよりも大きくする事も出来ますが、あまり大きくする事で画像がボケてしまいます。

画像枠の太さを指定
<img src="★" border="☆">
★=表示させる画像ファイル名（ＵＲＬ）
☆=枠の太さ（ピクセル数)

画像が表示される前に低解像度の画像を表示
<img lowsrc="★">
★=低解像度画像ＵＲＬ
重い画像ファイルを表示させる場合にあらかじめlowsrcで白黒画像などを指定しておくとsrcで指定した画像よりも早く表示されます。役立つフリーソフトを利用して出来るだけ軽くする事をオススメします。

画像上で右クリックを無効にする
<img src="★" onContextmenu="return false">
★=表示させる画像（jpg、gifなどのファイル名またはＵＲＬ）

リストの表示

リスト表示の基本タグ
<ul>
<li>★
<li>★
<li>★
</ul>
★=リスト表示させる文章
リスト全体を<ul></ul>で囲み、項目を<li>で指定します。また<ul>の代わりに<menu><dir>タグを使っても同じ事が出来ます。

使用例
<html> <head> <title>お小遣い稼いでお金持ち</title> </head> <body bgcolor="#008b8b"> <ul> <li>お小遣い稼ぎ <li>節約/倹約 <li>資産運用（株式投資） </ul> </body> </html>
上記のようにすると下記のように表示されます。
・お小遣い稼ぎ・節約/倹約・資産運用（株式投資）

リストのマークを変える
<ul type="★">
<li type="★"> ★=マークの種類 disk>>>>● circle>>○ square>>■
<ul type="★">でリスト全体のマークの指定
<li type="★">で項目ごとのマークの指定が出来ます。

番号付きのリスト
<ol>
<li>★
<li>★
<li>★
</ol>
★=リスト表示させる文章

A			a	i	I
A.★ B.★ C.★			a.★ b.★ c.★	i.★ ii.★ iii.★	I.★ II.★ III.★

通し番号の開始番号を指定
<ol start="★">
<li value="★">
★=開始する番号

テーブル

テーブル表示の基本タグ
<table>
<tr>
<td>★</td>
</tr>
</table>
★=表示させる文字

使用例
<html> <head> <title>お小遣い稼いでお金持ち</title> </head> <body bgcolor="#FFFFCC"> <table> <tr> <td>項目１</td> <td>項目２</td> </tr> </table> </body>
表の一行を表すには列の数（横方向の項目数）だけ<td>～</td>を繰り返し更にそれを<tr>～</tr>で囲みます。 <tr>～</tr>のセットを行の数（縦方向の項目数）だけ繰り返して表を作成します。

テーブル外枠の表示
<table border="★" frame="☆">だけの機能です。
★=外枠の太さ（ピクセルで指定）
☆=キーワード
使用する時は外枠の太さを指定するborder属性と一緒に指定して下さいね。

キーワード	hsides	外枠の上下だけを表示
キーワード	vsides	外枠の左右だけを表示
キーワード	above	外枠の上だけを表示
キーワード	below	外枠の下だけを表示
キーワード	lhs	外枠の左だけを表示
キーワード	rhs	外枠の右だけを表示

テーブルの外枠色の指定
<table bordercolorlight="★" bordercolordark="★">
★=カラーコード又はカラーネームで指定する。コチラから選べます。
（注意）
bordercolor属性は、

インターネットエクスプローラ、

ネットスケープいずれのブラウザでも対応していますが、bordercolorlight、bordercolordark属性は、

インターネットエキスプローラのみの対応となります。

テーブル中枠の表示形式
<table rules="★">
★=表示形式[none、rows、cols、all]

テーブル全体の横幅の指定
<table width="★%">
★=ページ全体に対するテーブルの幅（ピクセル数でも指定できます）

テーブルの背景に画像を表示する
<table background="★">
★=表示する画像（jpg、gifなど）のファイル名

（サンプル）

お小遣い稼いでお金持ち

テーブルの背景色の指定
<table bgcolor="★">
★=カラーコード又はカラーネームで指定する。コチラを参照して下さいね。

テーブル内での見出しの指定
<th>★</th>
★=見出しにする文字

複数のセルを作る
<td colspan="★">横に複数のセルを作ります。
<td rowspan="★">縦に複数のセルを作ります。
★=セルの数
<td>タグのcolspan、rowspan属性で縦横に複数のセルを作る事が出来ます。

使用例
<html> <head> <title>お小遣い稼いでお金持ち</title> </head> <body bgcolor="#FFFFCC"> <table border="3" bgcolor="#FFFF00" width="80%"> <tr> <TD rowspan="4">スクロール</TD> <TD align="center">文字のスクロール</TD> <TD>ソース</TD> <TD>サンプル</TD></tr> <tr><TD>ステータスバーでのスクロール</TD> <td>ソース</td> <td>サンプル</td></tr> <tr><TD>ステータスバーでのスクロール２</TD> <td>ソース</td> <td>サンプル</td></tr> <tr><TD>スタッフロール</TD> <td>ソース</td> <td>サンプル</td> </tr> </table> </body> </html>

上記の場合の表示例

スクロール	文字のスクロール	ソース	サンプル
	ステータスバーでのスクロール	ソース	サンプル
	ステータスバーでのスクロール２	ソース	サンプル
	スタッフロール	ソース	サンプル

セルサイズの指定
<td width="★" height="☆">
★=セルの横幅
☆=セルの高さ

セル間隔(内枠線の太さ)の指定
<table cellspacing="★" border="☆">
★=セル同士の間隔（罫線の太さ）ピクセル数で指定
☆=外枠の太さ（ピクセルで指定）
使用する時は外枠の太さを指定するborder属性と一緒に指定して下さいね。

セル内容と枠線の余白指定
<table cellpadding="★" border="1">
★=セル内容と枠の間隔、ピクセル数で指定します。
（例）

■cellpadding="3"を指定した場合

金持ち	金持ち
金持ち	金持ち

■cellpadding="20"を指定した場合

金持ち	金持ち
金持ち	金持ち

セル内文字の表示位置の指定
<td align="★">～</td>
★=横方向の位置　left(左寄せ),center(中央揃え),right(右寄せ)
<td valign="★">～</td>
★=縦方向の位置　top(上に配置)、middle(中央に配置)、bottom(下に配置)

セル内文字の改行を禁止する
<td nowrap>～</td>
セル内での文字の自動改行を無効にします。

テーブルに対してテキストの回りこみ位置の指定する
<table align="★">
★=画像の表示位置（left、right、center）テキストは画像の反対に回りこみます。

テーブルにタイトル（キャプション）を付ける
<caption align="★" valign="☆">■</caption>
★=キャプションの表示位置（左右）（left,right)
☆=キャプションの表示位置（上下）（top,bottom)
■=タイトルの文字
<caption>タグはテーブルタグ内で使用しテーブルにタイトルを表示するのに便利です。
（注意）
下の例は

Explorerのみ対応の拡張オプションです。
通常は<caption align="★">■</caption>
★=表示位置（上下）（top,bottom)
■=タイトル文字
となります。

使用例
<html> <head> <title>お小遣い稼いでお金持ち</title> </head> <body bgcolor="#FFFFCC"> <table border="1" bgcolor="#CCFFFF" width="70%"> <caption align="right" valign="top">これがキャプションです。</caption> <tr> <td>項目１</td> <td>項目２</td> <td>項目３</td> <td>項目４</td></tr> <tr><TD>項目５</td> <td>項目６</td> <td>項目７</td> <td>項目8</td></tr> </table> </body> </html>

上記の場合の表示例

これがキャプションです。
項目１	項目２	項目３	項目４
項目５	項目６	項目７	項目8

テーブル枠線を実線で表示させる
<table border="1" cellspacing="0" bordercolor="★">
★=枠線色カラーコード又はカラーネームで指定します。コチラを参照して下さいね。
（注意）
この機能は、

のみの機能です。

■テーブル自動作成■

上記で紹介してきたような少々面倒な作業もホームページビルダーなどの

ホームページ作成用ソフトでは、簡単なマウス操作、クリックで作成できてしまいます。

またロゴ作成や背景画像・ボタン類などいろいろと役立つモノが標準装備されていますので、

今一度、御自身のパソコンにインストールされていないか確認してみて下さいね。

もしインストールされていないようでしたら、少し出費になりますが、かなりの時間短縮（節約）に

なりますので、ホームページ作成ソフトなどの購入を検討されてはいかがでしょうか？

サンタさんもホームページビルダーは、絶対手放したくないソフトです(^_^;)ハイ

▲ページのトップへ
HOMEへ

■お小遣い 稼いで お金持ち■

０からホームページ作成【基本】

ホームページのページ情報・主なタグなど基本的な事を紹介していますので、お役立て下さい。

見出し２

■お小遣い稼いでお金持ち■