　

とってもカンタン・基礎の基礎
今から使えるHTMLタグ辞典

JAPRO・CGI書き込みプログラム専用手引き

※このタグ辞典はJAPROが納品いたしましたCGIページ生成プログラムを使用されていらっしゃるお客さま専用の簡易タグ辞典ですので、一般のHTMLリファレンスとは解釈を意図的に変えて説明している部分がありますので、学術的な解釈と部分的に異なることをあらかじめご了承くださいませ。また説明中のタグはInternet Explorer・Netscape Communicaとも4.x以上のバージョンを対象としています。Windows・MacintoshなどOSによっても多少表示内容が異なります。　

JAPRO 幸形ノブユキ 1999

I　N　D　E　X

■項目別目次
［覚えておくこと］［太文字］［斜体文字］［タグは入れ子で］［本文入力について］［半角スペースについて］［改行］［文章の区切り(改段)］［見出し文字］［文字サイズ］［色つき文字］［色つき・サイズ指定文字］［罫線］［リンク文字］［リンク画像］［メールへのリンク］［画像の表示］［URLを知るには］［画像と本文の位置補正］［文字を写真の下まで改行］［表組・テーブル］［表組のセルを合体］［カラフルな表組］［写真と本文を連続表示］［お問い合わせ先］

■タグ引き目次
［タグとは］［B］［I］［B・I］［CGIの改行］［半角スペース］［BR］［P］［H］［FONT SIZE］［FONT COLOR］［FONT SIZE・COLOR］［HR］［A HREF］［MAILTO］［IMG SRC］［URLを知るには］［BR CLEAR(1)］［BR CLEAR(2)］［TABLE］［COLSPAN・ROWSPAN］［TABLE BGCOLOR］［実用タグサンプル］［お問い合わせ先］

■付録
［色見本・HEXカラーチャート］
文字やテーブルの背景色などの指定に役立つフルカラーの色見本を収録しています。
(富士通出版「HTMLの次はコレだ」付録CD-ROMの内容を収録・著作 JAPRO 幸形ノブユキ)

■応用HTML例
［テーブル・フレーム・フォント・色彩計画・テキスト・重い画像・フォント］
基本的なHTMLタグをマスターされた方のための応用バイブル
(富士通出版「HTMLの次はコレだ」付録CD-ROMの内容を収録・著作 JAPRO 幸形ノブユキ)

　

･

覚えておくこと

■タグ　■タグの影響を受ける箇所　■数字やオプション　■URLなどの場所情報

<???>のように<と>で挟まれた英文のかたまりをタグと呼びます。

一つのタグは<ではじまり>で閉じてください。
○　<B>こんにちは</B>
×　<B>こんにちは</B

タグは二つセットで使うものがほとんどです。
<B>こんにちは</B>のように、挟まれたこんにちはがタグに影響します。

※例外として改行タグ<BR>や<P>などのように一つだけのものもあります。
※終わりのタグには / が付きます。

タグは必ず半角英数で入力しなければなりません。

○　<B>こんにちは</B>
×　＜Ｂ＞こんにちは＜／Ｂ＞
※タグは半角英数であれば大文字でも小文字でも構いません。
○　<B>こんにちは</B>
○　<b>こんにちは</b>

タグの書き方は連続して書いても、改行しても結果は同じです。

※下のソース例は1も2も同じ結果となります。
【ソース例　1】
こんにちは、<BR>いかがおすごしですか。<BR>近日中に<BR>遊びに行きます。
【ソース例　2】
こんにちは、<BR>
いかがおすごしですか。<BR>
近日中に<BR>
遊びに行きます。
※ただしCGIの設定によってはソース内の改行を認識するものもありますので、その場合はソース例1のように連続して入力するようにしてください。

　

･

太文字
<B>太い文字</B>

【ソース例】
こんにちは、いかがおすごしですか。<B>近日中に</B>遊びに行きます。

【表示例】
こんにちは、いかがおすごしですか。近日中に遊びに行きます。

　

･

斜体文字
<I>斜めの文字</I>

【ソース例】
こんにちは、いかがおすごしですか。<I>近日中に </I>遊びに行きます。

【表示例】
こんにちは、いかがおすごしですか。近日中に 遊びに行きます。

　

･

太くて、斜めの文字。タグは入れ子で使えます。
<B><I>太い斜めの文字</I></B>

タグは入れ子で使うことができますので、下記のように書けば「太くて」「斜め」の文字となります。タグはいくつでも入れ子にできます。
※入れ子にする順番は基本的には自由ですがタグの種類によっては多少表示が異なります。

【ソース例】
こんにちは、いかがおすごしですか。<B><I>近日中に </I></B>遊びに行きます。

こんにちは、いかがおすごしですか。近日中に 遊びに行きます。

　

･

本文入力について
(タグは使いません)

長い本文は改行キーを毎回右端で打たずに、続けて入力しましょう。CGIによる書き込みでは通常、本文中の改行箇所は指定しません。見ている人の環境によって文字の大きさや左右の枠の大きさが異なるので改行指定するとおかしくなるからです。下の例は同じ文字を異なる環境で見ているときの見え方の例です。

【ソース例】
こんにちは、いかがおすごしですか。近日中に遊びに行きます。

【表示例】

こんにちは、いかがおすごしですか。近日中に遊びに行きます。

　

･

半角のスペースが無視される?

HTMLソース内の連続した「半角スペース」は通常無視されますが、一部の伝言板などの書き込み枠内においても半角スペースを無視する仕様のものがあます。本文中に広い文字間隔をとりたい場合は「全角スペース」を使用してください。

　

･

改行
<BR> ※このタグは一つずつ単独で使います。

強制的に改行を指定するには<BR>タグを改行したい場所に入力します。少し短めに改行するように心掛けると自分の環境より大きな文字で見ている人にも問題なく表示されるのでオススメです。

【ソース例】
こんにちは、<BR>いかがおすごしですか。<BR>近日中に遊びに行きます。

【表示例】

こんにちは、
いかがおすごしですか。
近日中に遊びに行きます。

　

･

文章の区切り(改段)を作るには
<P> ※このタグは一つずつ単独で使います。

段落の終わりなどに<P>タグを使うと１行の空白行ができます。<BR>とよく似ていますが、こちらは一つの話の終わりに利用すると便利です。
※見かけ的には<BR><BR>としても同じような効果がありますが、できるだけ段落の区切りは<P>タグを利用しましょう。

【ソース例】
こんにちは、<BR>いかがおすごしですか。<P>近日中に遊びに行きます。

【表示例】

こんにちは、
いかがおすごしですか。

近日中に遊びに行きます。

　

･

見出しの文字
<H1>私は見出しです</H1>
※1～6へだんだん小さくなります。

見出しタグを使うと、太く大きな文字となり、本文との間に自動的に改段をしてくれます。

【ソース例】
<H1>こんにちは</H1>いかがおすごしですか。近日中に遊びに行きます。

【表示例】

こんにちは

いかがおすごしですか。近日中に遊びに行きます。
※ソース内に改行タグを入れなくとも自動的に改段することを覚えておきましょう。

※1～6までの数字を入れ換えるとサイズが変わります。
※数字が小さいほど大きな文字となります。

【ソース例】
<H1>私は見出し1</H1>
<H2>私は見出し2</H2>
<H3>私は見出し3</H3>
<H4>私は見出し4</H4>
<H5>私は見出し5</H5>
<H6>私は見出し6</H6>

【表示例】

私は見出し1

私は見出し2

私は見出し3

私は見出し4

私は見出し5

私は見出し6

　

･

本文中の文字サイズ
<FONT SIZE="7">いろんな大きさの本文</FONT>
※1～7へだんだん大きくなります。

見出しタグとよく似ていますが、こちらは主に本文中の文字の大きさや装飾をするのに利用します。見出しタグのように「太くならない」「改行をしない」事が特徴です。

【ソース例】
こんにちは<FONT SIZE="7">いかが</FONT>おすごしですか。

【表示例】
こんにちはいかがおすごしですか。
※太くなって見えますが単に大きくなっただけです。

※1～7までの数字を入れ換えるとサイズが変わります。
※数字が大きいほど大きな文字となります。

※下のソース例では最後に<BR>改行タグを追加して改行しています。
【ソース例】
<FONT SIZE="1">私はフォントサイズ1</FONT> <BR>
<FONT SIZE="2">私はフォントサイズ2</FONT> <BR>
<FONT SIZE="3">私はフォントサイズ3</FONT> <BR>
<FONT SIZE="4">私はフォントサイズ4</FONT> <BR>
<FONT SIZE="5">私はフォントサイズ5</FONT> <BR>
<FONT SIZE="6">私はフォントサイズ6</FONT> <BR>
<FONT SIZE="7">私はフォントサイズ7</FONT> <BR>

【表示例】
私はフォントサイズ1
私はフォントサイズ2
私はフォントサイズ3
私はフォントサイズ4
私はフォントサイズ5
私はフォントサイズ6
私はフォントサイズ7

　

･

色つき文字
<FONT COLOR="996633">いろんな色の文字</FONT>

996633の部分にはHEXと呼ばれる「0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F」の16進方の6ケタの英数字で表示される色番号が入ります。この英数の組み合わせによって何万色もの色を自由に表現できますが、インターネットで奇麗に表示されやすい色が決められていて、これをWebセーフティカラーと呼ぶ場合がありますが、最近はパソコンの色表示が改善されてきたので、カラーチャートなどを見ながら自由に配色するのもよいでしょう。
カラーチャートはコチラに用意しています。

【ソース例】
こんにちは<FONT COLOR="996633">いかが</FONT>おすごしですか。

【表示例】
こんにちはいかがおすごしですか。

　

･

色つき・サイズ指定文字
<FONT COLOR="996633" SIZE="5">いろんな色とサイズの文字</FONT>

タグにはいろいろなオプションや、２つ以上の指示を並記することができます。フォントタグで色とサイズ等を同時に指定することも可能です。

【ソース例】
こんにちは<FONT COLOR="996633" SIZE="7">いかが</FONT>おすごしですか。

【表示例】
こんにちはいかがおすごしですか。

　

･

罫線
<HR> ※このタグは一つずつ単独で使います。

罫線には立体の罫線と、単色の罫線があります。さまざまなサイズのものを一覧で表記しておきます。
※ブラウザによって一部のオプション指定が無視されたり、無指定項目の表示が異なります。

【ソース例】
１．基本(長さの指定をしないと左右いっぱいに伸びます。)
<hr>
２．太さ10・左右幅80%(寄せの指定をしないとセンター揃えとなります。)
<HR SIZE="10" WIDTH="80%">
３．影無し・左右幅50%・左寄せ
<HR NOSHADE WIDTH="50%" ALIGN="left">
４．影無し・太さ10・左右幅300ピクセル・右寄せ・色付き
<HR NOSHADE SIZE="10" WIDTH="300" ALIGN="right" COLOR="996633">

【表示例】
１

２

３

４

　

･

リンク文字
<A HREF="http://www.japro.com/">リンクしている文字</A>

文章中の文字にリンクすることができます。リンクとは、関連するページを呼びだすためのスイッチのようなものです。

■通常のリンク指定
【ソース例】
さっそく<A HREF="http://www.japro.com/">こちら</A>をご覧ください。

【表示例】
さっそくこちらをご覧ください。

リンクの指定には、リンク先のページを新しいブラウザに飛び出してに表示したり、フレーム(※)全体を書き換えたり、フレーム内に表示するなど様々な「ターゲット」と呼ばれるオプション指定がありますがここでは詳細は省きます。
※フレームの詳細はこちらをご覧ください。

■新しいブラウザに飛び出して表示するには
※新しいブラウザに飛び出すとはこういうことです。

【ソース例】
さっそく<A HREF="http://www.japro.com/" TARGET="_BLANK">こちら</A>をご覧ください。

【表示例】
さっそくこちらをご覧ください。

■フレームをやめて全体に表示するには
※フレーム構造の伝言板などにリンク指定の書き込みをすると、ナビフレームが残ってしまい、その中に他のページを表示する場合などには下記のように指定するとよいでしょう。

【ソース例】
さっそく<A HREF="http://www.japro.com/" TARGET="_TOP">こちら</A>をご覧ください。

【表示例】
さっそくこちらをご覧ください。

　

･

メールアドレスへのリンク
<A HREF="MAILTO:info@japro.com">リンクしている文字</A>

下のタグを書き込むと、クリックするだけで自動的にメーラー(メールソフト)が起動し、宛先へのメール準備をしてくれます。info@japro.comの部分に、送信先のメールアドレスを記入します。

【ソース例】
こちらまで<A HREF="MAILTO:info@japro.com">メール</A>くださいませ。

【表示例】
こちらまでメールくださいませ。

　

･

画像の表示
<IMG SRC="http://www.japro.com/tagsampl/logo.gif">
※このタグは一つずつ単独で使います。

イラストや写真を表示するにはイメージタグを使います。
インターネット上にある画像を表示するにはhttp://www.japro.com/tagsampl/logo.gifのような画像のURLを知らなければなりません。画像の場所が分かれば下のサンプルタグのように記述するだけです。
※画像サイズや代換文字などを指定するとより親切な指定となりますがここでは省きます。

【ソース例】
<IMG SRC="http://www.japro.com/tagsampl/logo.gif">

【表示例】

　

･

リンク画像
<A HREF="http://www.japro.com/">
<IMG SRC="http://www.japro.com/tagsampl/logo.gif">
</A>

このタグは「リンク文字」と「画像の表示」を組み合わせた応用タグです。
<A HREF="リンク先のURL">
<IMG SRC="表示する画像のURL">
</A>
という構造で成り立っています。
しかし実際に利用するためには、少し整形が必要な場合があります。
・リンク先ページを表示するターゲットの指定　→　target=・・・飛び出すように"_blank"を指定します。
・リンク画像の周りを目立たせるための罫線の太さ　→　border=・・・表示しないように"0"を指定します。
これらを追記したものが下記のソース例です。

【ソース例】
<a href="http://www.japro.com/" target="_blank">
<img src="http://www.japro.com/tagsampl/logo.gif" border="0">
</a>

【表示例】

　　　←クリックしてみてください

　

･

画像の場所(URL)を知るには?

Windows95・Internet Explorerの場合

URLを知りたい画像の上で右クリックする。
表示されたメニューから「プロパティを見る」を選択します。
アドレスの項目にURLが表示されていますのでコピーします。

Windows95・Netscape Communicaの場合

URLを知りたい画像の上で右クリックする。
表示されたメニューから「画像の場所をコピー」を選択します。

Macintosh・Internet Explorerの場合

URLを知りたい画像の上でプレス(押したまま)する。
表示されたメニューから「新しいウインドウで画像を開く」を選択します。
新しいウインドウのURLをコピーします。

Macintosh・Netscape Communicaの場合

URLを知りたい画像の上でプレス(押したまま)する。
表示されたメニューから「画像の場所をコピー」を選択します。

※ブラウザ・OSのバージョンなどによってメニュー内容が異なる場合がありますので各自ブラウザの取説を参照ください。

　

･

画像と本文の位置関係の補正 (※JAPRO・CGI編)
<BR CLEAR="all">
※この項目はJAPROの納品しているCGIについてのもので、一般的なタグ説明ではありません。

JAPROの納品しているCGIでは写真と本文の位置関係を<IMG SRC="photo.jpeg" ALIGN="left"> 写真を左寄せで本文を回り込みするように初期設定しています。そのため、写真の下から本文を始めるためには、本文の入力枠の始めに「回り込み」を解除するタグを入力する必要があります。

【ソース例】
<BR CLEAR="all">これは本文のダミーコピーです・・・・・・・・

【標準の表示例】		【回り込み解除の表示例】
これは本文のダミーコピーです。これは本文のダミーコピーです。これは本文のダミーコピーです。		これは本文のダミーコピーです。これは本文のダミーコピーです。これは本文のダミーコピーです。

　

･

本文の途中から、文字を写真の下まで改行したい。
<BR CLEAR="all">

写真の右側に本文文字を表示していて、途中で写真の下まで文字を入れたくない場合があります。その際は<BR><BR><BR><BR>と改行タグを繰り返し入れるのではなく、<BR CLEAR="all">と指定してください。他の環境で見たときにレイアウトが乱れる原因となります。

【ソース例】
これは写真の横に表示したい文字です。これは写真の横に表示したい文字です。<BR CLEAR="all">これは写真の下に表示したい文字です。

【間違った指定の例】		【正しい回り込み解除の指定例】
これは写真の横に表示したい文字です。これは写真の横に表示したい文字です。<BR> <BR> <BR> <BR> これは写真の下に表示したい文字です。		これは写真の横に表示したい文字です。これは写真の横に表示したい文字です。 <BR CLEAR="all"> これは写真の下に表示したい文字です。

　

･

表組を作りたい
<TABLE><TR><TD>項目</TD><TD>項目</TD></TR></TABLE>

・<TABLE>～</TABLE>で一組のテーブルです。
・<TR>～</TR>で１段です。
・<TD>～</TD>で1マス(セル)です
・１段の中に何マスの<TD>～</TD>があるかで列数が決まります。
※BORDER テーブル罫線の太さ・CELLPADDING セルと文字の間隔・CELLSPACIN セルの間隔
※NOWRAP セル内の文字を自動改行しない

【ソース例】
<TABLE BORDER="1" CELLPADDING="2" CELLSPACING="1">
<TR>
<TD NOWRAP>１段目の1列目</TD>
<TD NOWRAP>１段目の2列目</TD>
<TD NOWRAP>１段目の3列目</TD>
</TR>
<TR>
<TD NOWRAP>2段目の1列目</TD>
<TD NOWRAP>2段目の2列目</TD>
<TD NOWRAP>2段目の3列目</TD>
</TR>
<TR>
<TD NOWRAP>3段目の1列目</TD>
<TD NOWRAP>3段目の2列目</TD>
<TD NOWRAP>3段目の3列目</TD>
</TR>
</TABLE>

【表示例】

1段目の1列目	1段目の2列目	1段目の3列目
2段目の1列目	2段目の2列目	2段目の3列目
3段目の1列目	3段目の2列目	3段目の3列目

　

･

表組のセルを合体する(セルスパンの設定)
横枠を合体 COLSPAN="2"　縦枠を合体 ROWSPAN="2"

【ソース例】
<TABLE BORDER="1" CELLPADDING="2" CELLSPACING="1">
<TR>
<TD NOWRAP>１段目の1列目</TD>
<TD NOWRAP COLSPAN="2">1段目の2・3列目を合体</TD>
----※１段目の3列目の指定はありません----
</TR>
<TR>
<TD NOWRAP ROWSPAN="2">2・3段目を合体</TD>
<TD NOWRAP>2段目の2列目</TD>
<TD NOWRAP>2段目の3列目</TD>
</TR>
<TR>
----※3段目の1列目の指定はありません。----
<TD NOWRAP>3段目の2列目</TD>
<TD NOWRAP>3段目の3列目</TD>
</TR>
</TABLE>

【表示例】

1段目の1列目	1段目の2・3列目を合体
2・3段目を合体	2段目の2列目	2段目の3列目
2・3段目を合体	3段目の2列目	3段目の3列目

　

･

カラフルな表組
BGCOLOR="#ffccff"

各項目にBGCOLOR="#ffccff"というオプションを追加すると該当項目に色が付きます。
※<TABLE・・・>に指定するとテーブル全体に適応されます。
※<TR>に指定すると一段全体に適応されます。
※<TD>に指定すると一枠(セル)に適応されます。
※TABLE BORDER="0"と指定するとテーブルの罫線が無くなります。

【ソース例】
<TABLE BORDER="0" CELLPADDING="2" CELLSPACING="1" BGCOLOR="#ffccff">
<TR>
<TD NOWRAP>１段目の1列目</TD>
<TD NOWRAP>１段目の2列目</TD>
<TD NOWRAP>１段目の3列目</TD>
</TR>
<TR BGCOLOR="#ffcc99">
<TD NOWRAP>2段目の1列目</TD>
<TD NOWRAP>2段目の2列目</TD>
<TD NOWRAP>2段目の3列目</TD>
</TR>
<TR>
<TD NOWRAP>3段目の1列目</TD>
<TD NOWRAP>3段目の2列目</TD>
<TD NOWRAP BGCOLOR="#cc99ff">3段目の3列目</TD>
</TR>
</TABLE>

【表示例】

1段目の1列目	1段目の2列目	1段目の3列目
2段目の1列目	2段目の2列目	2段目の3列目
3段目の1列目	3段目の2列目	3段目の3列目

　

･

【実用タグサンプル】
写真と本文を連続して表示する

デジタルカメラで写真を沢山撮った場合に、本文で説明しながら順次説明したい場合があります。ここでは5枚の写真を表示するサンプルを説明したいと思います。※仕上がりはミニサイズですが、タグサンプルは実寸のものとなっています。
※左右464～500ピクセル程度の場合は写真のサイズは左右200～250ピクセルがオススメです。
※<TR>～</TR>を繰り返せば何段でも表示できます。

【ソース例】
<TABLE BORDER="0" CELLPADDING="2" CELLSPACING="0" WIDTH="100%">

<TR><TD><H3><FONT COLOR="#ff3399">タイトル1</FONT></H3>
<IMG SRC="http://www.japro.com/img/photo1.jpeg" ALIGN="left">本文1のスペースです。・・・
</TD></TR><TR><TD><HR SIZE="2"></TD></TR>

<TR><TD><H3><FONT COLOR="#ff3399">タイトル2</FONT></H3>
<IMG SRC="http://www.japro.com/img/photo2.jpeg" ALIGN="left">本文2のスペースです。・・・
</TD></TR><TR><TD><HR SIZE="2"></TD></TR>

<TR><TD><H3><FONT COLOR="#ff3399">タイトル3</FONT></H3>
<IMG SRC="http://www.japro.com/img/photo3.jpeg" ALIGN="left">本文3のスペースです。・・・
</TD></TR><TR><TD><HR SIZE="2"></TD></TR>

<TR><TD><H3><FONT COLOR="#ff3399">タイトル4</FONT></H3>
<IMG SRC="http://www.japro.com/img/photo4.jpeg" ALIGN="left">本文4のスペースです。・・・
</TD></TR><TR><TD><HR SIZE="2"></TD></TR>

<TR><TD><H3><FONT COLOR="#ff3399">タイトル5</FONT></H3>
<IMG SRC="http://www.japro.com/img/photo5.jpeg" ALIGN="left">本文5のスペースです。・・・
</TD></TR><TR><TD><HR SIZE="2"></TD></TR>

</TABLE>

【表示例】

タイトル1

本文1のスペースです。本文1のスペースです。本文1のスペースです。本文1のスペースです。本文1のスペースです。

タイトル2

本文2のスペースです。本文2のスペースです。本文2のスペースです。本文2のスペースです。本文2のスペースです。

タイトル3

本文3のスペースです。本文3のスペースです。本文3のスペースです。本文3のスペースです。本文3のスペースです。

タイトル4

本文4のスペースです。本文4のスペースです。本文4のスペースです。本文4のスペースです。本文4のスペースです。

タイトル5

本文5のスペースです。本文5のスペースです。本文5のスペースです。本文5のスペースです。本文5のスペースです。

　

･

(C)JAPRO 1999 All rights reserved.
※この書類へのリンクは自由ですが、他ホームページへのソース複製及び他メディアへの無断使用を禁止します。
※JAPRO制作のCGIは常にバージョンアップしております。上記タグ説明に関しても、仕様変更により使用不能な場合もありますので、その際はお問い合わせくださいませ。
You are visitor number 55162 since 1999.09.01

※当ページで紹介している内容に関しての質問はJAPROからCGIをご購入のお客さまに限らせていただきます。
JAPRO CGIメンテナンスお問い合わせ先　info@japro.com

インターネットトータルソリューションジャプログループ
インターネット・ホームページ構築のご相談は info@japro.com TEL 0859-68-3032 FAX0859-68-3911

　

　