戻る

Super Tag32 Pro(フリー）の使い方

ソフトはこちらからどうぞ♪
（ソフトウェア開発室）		stag_m.gif

tarakani.gif ボタンが並んでいる順番に説明しますね。
クリックするとそれぞれの説明のところに飛びます。
ボタンを押して確かめながら進んでくださいね。
こんな説明でよければダウンロードしてみて下さい。　(^.^;)

ここからどうぞ♪ ダウンロードできます。 super1.lzh
圧縮していますのでお手持ちの解凍ソフトで解凍した後
super.htmlファイルを開いて下さい。

圧縮・解凍について知りたい方はこちらへ♪
（圧縮解凍とソフト利用）		onumarl.gif

更新状況

基本タグ 最初の画面 ＢＯＤＹ Ｈｎ ＨＲ 保存 Ａ ＩＭＧ ＦＯＮＴ FONTCOLOR

ＣＥＮＴＥＲ ＢＲＩＮＫ <！----> ＢＲ Ｐ １，２




拡張タグへ ★リスト ＵＬ ＯＬ ＬＩ ＤＬ ＤＴ ＤＤ

★フォーム ＦＯＲＭ ＩＮＰＵＴ ＳＥＬＥＣＴ ＯＰＴＩＯＮ TEXTAREA

★テーブル table1.gif ＴＡＢＬＥ ＴＲ ＴＤ ＴＨ CAPTUION

★フレーム FRAMESET ＦＲＡＭＥ リンク NOFRAME



文字スタイリングタグへ Ｂ Ｉ Ｕ Ｓ ＴＴ ＢＩＧ ＳＭＡＬＬ

ＤＦＮ ＥＭ ＣＩＴＥ ＣＯＤＥ ＫＢＤ ＳＡＭＰ ＳＴＲ ＶＡＲ

ＳＵＢ ＳＵＰ ＴＲ ＨＶ カスタマイズ



基本タグ

■最初の画面

最初の画面


●ソフトを開いたらこんな画面が出てきますね。↓の@が初めの一歩です。(^-^)
まず赤字のところにタイトルをいれます。
この<TITLE>と</TITLE>の間に入力した文字は、一番上のタイトルバーに表示されます。
（本文のタイトルになるわけではありません）

●ほとんどのタグは一対になっていて、
<ここから始まり>このタグで指示した内容</ここまでで終わり>
というふうになっています。 <・・・・>で始めて</・・・・>で閉じます。

●次にBODYに進みましょう。Bの<BODY>と </BODY>はいったん消して、そこにカーソルをあわせ、
BODYのボタンを押してみて下さい。
@
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>

</BODY>
</HTML>
→
A
<HTML>
<HEAD>
<TITLE>タイトルをいれます</TITLE>
</HEAD>
<BODY>

</BODY>
</HTML>
→
B
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>

</BODY>
</HTML>


■ＢＯＤＹ（背景とテキスト）

BODY(背景の設定)のボタンを押したらこんな画面が出ますね。

body.gif


bbb1.gifイメージ【BACKGROUND】：壁紙の指定
● 参照をクリックし素材を選びます。画像サイズも自動的に表示されます。ピュアで確認をクリックすると、選んだ素材が表示されます。


bbb2.gif背景色【BGCOLOR】：背景色の指定
●背景に画像を使わずに色だけをつける時にここに色を指定します。画像を選んだ場合は画像が表示されるまでの間、ここで選んだ色が先に出てきます。

●「▼」マークをクリックして選ぶこともできますし（green,redなど色名が直接表示される）、参照から色を選んでもOKボタンを押すだけで選んだ色が１６進法（#00000,#ff7f00など）で表示されます。

●また直接、色の名前や１６進数を入力してもかまいません。１６進法で入力する場合は、このソフトでは「#」は不要です。自動的に「#」が表示されるようになっています。

●色の数はとてもたくさんあります。ＨＰ作成支援リンク集の「ＨＰの彩り」でリンクしていますのでご利用ください。


bbb3.gifテキスト色【TEXT】：個別に色を指定しなかった時の文字色を指定します。このページではテキスト色にdimgray を選んでいますからこの文字の色ですが、テキスト色【TEXT】の箇所だけは違う色を別に指定しています。

リンク部分の色【LINK】：リンク部分であることを表す色

アクセス後の色【VLINK】：すでに行ったことのあるリンク先の色

アクセス中の色【ALINK】：リンクをクリックしてアクセス途中の色


bbb4.gifページの上下・両端からの距離：これはそのまんまですね(笑)ただしＩＥだけのタグなのでこれを指定してもＮＮでは変わりません。

●ＮＮで左右のスペースを空けるには<MARGINWIDTH="数字">、上下のスペースを空けるには<MARGINHEIGHT="数字">を追加して下さい。

●ちなみにこのページは上下３０，左右５０というふうに指定しています。指定しなかったら画面の幅だけびっしり書き込まれることになりますね。

●このページのbodyタグの設定は↓のようになっています。
<BODY BGCOLOR="white" TEXT="#696969" LINK="#FF00FF" VLINK="#8b4513" ALINK="#80FFFF" TOPMARGIN="30" BOTTOMMARGIN="30" LEFTMARGIN="50" RIGHTMARGIN="50" MARGINWIDTH="50" MARGINHEIGHT="30">


■Ｈｎ（見出しタグ）

見出しのタグです。見出しタグ前後では自動的に改行されます。

bbb1.gif大きさ(H)：６種類の大きさから選びます。
<h1><h2><h3><h4><h5><h6>

あ

あ

あ

あ
あ
あ
bbb2.gif位置指定【ALIGN】(A)：見出しの文字を置く位置を決めます。右揃え、センター、左揃えの中から選びますが、何も記入しなかったら左揃えになります。


bbb3.gif見出し文字列(S)：ここに見出しにしたい文字を入れます。

kurur.gif大きさ(H)：２,　位置指定【ALIGN】(A)：センター揃え,　見出し文字列(S)：ようこそ♪　と入力すると下のようになります。

<H2 ALIGN="center">ようこそ♪</H2>

ようこそ♪


■ＨＲ（罫線の設定）


bbb1.gif太さ【SIZE】(A)：罫線の幅を設定します。


bbb2.gif長さ【WIDTH】(A)：罫線の長さを設定します。数字の単位はピクセルです。（１ピクセル＝１ドット）
％（Ｐ）にチェックを入れると、ブラウザの横幅に対する割合で設定できます。


bbb3.gif位置【ALIGN】(A)：罫線の位置を設定します。


bbb4.gif色（ＩＥのみ）【COLOR】(A)：罫線色を指定します。ＮＮでは表示されません。赤の線を引いてみました。ＮＮと見比べてみて下さい。


bbb5.gif彫刻表示をやめる【NOSHADE】(A)：太さを２以上に指定した場合、掘ったような(笑)、立体的な線が表示されますが、ここにチェックをいれるとべたっとした(笑)線になります。
（但し、太さを１にした場合と、色を指定した場合はここにチェックを入れてもいれなくても変化はありません）


kurur.gif太さ【SIZE】(A)：５,　長さ【WIDTH】(A)：６０％，　位置【ALIGN】(A)：センター揃えというふうに設定すると下のようになります。

<HR SIZE="5" WIDTH="60%" ALIGN="center">



kurur.gif太さ【SIZE】(A)：５,　長さ【WIDTH】(A)：６０％，　位置【ALIGN】(A)：センター揃え，彫刻表示をやめる【NOSHADE】(A)：チェックを入れるというふうに設定すると下のようになります。

<HR SIZE="5" WIDTH="60%" ALIGN="center" NOSHADE>



kurur.gif何も設定しないでただＯＫだけにしたのが↓の線です。
<HR>


■保存とブラウザでの確認

●ここで一度保存してみましょう。ファイル→名前をつけて保存を選び、半角英数小文字でファイル名をつけます。拡張子は.htmlをつけます。

●保存し終わったら、いままで消えていたＮＮとＩＥのマークがブルーで表示されると思います。

nnie.gif → nnie1.gif

●ＮＮをクリックするとネットスケープナビゲーターが起動して、今作ったものが表示されます。ＩＥも同様です。必ず両方で確認しましょうね。ＩＥ専用のタグでないのにＮＮでうまく表示されてなかったら、タグミスが考えられます。

●また、壁紙に指定した画像などは同じフォルダの中にいれておかないと表示されません。

■Ａ（リンクの設定）

bbb1.gifオプション【HREF or NAME】：
●HREF
どこかのページにリンクする時に使います。

●NAME
●ページの特定の場所（行）にジャンプする時に使います。このページの一番上の項目(A)をクリックしたらここまで飛んできましたよね。これです(笑)同じページじゃなくても指定できます。

●まずジャンプしたい場所に名前をつけます。例えばジャンプ先にhanaという名前をつけてみましょう。
（オプション→NAME，リンク先→hana）とします。 <A NAME="hana"></A>となります。この時は（#）はつけないで下さいね。

●次にオプションをHREFにし、リンク先(L)を#をつけて指定します。
（オプション→HREF，リンク先→#hana，リンクを張る文章→花）とします。<A HREF="#hana">花</A>となります

● <A HREF="#hana">花</A>をクリックすると、<A NAME="hana"></A>のところに飛んでいくわけですね。


bbb2.gifアクセス方法【http,mailto,...】：
●http
自分のホームページ以外の友だちのホームページとかにリンクを張る場合にhttpを選びます。

自分のホームページ内へのリンクはhttpから始まる絶対パスではなく、/link/link.himlや../index.htmlで表示される相対パスでリンクを張るようにしましょう。

ブラウザの設定にもよりますが、絶対パスで書いてある と、相対パスで書いたものよりページを移動するときアクセスが遅くなります。

tarakani.gifと言いましたが・・・実はたらばもこれを作りながらディレクトリとか正しいリンクの張り方を覚えたのです(^.^;)
これより前に作ったものはきちんとしたタグを使ってないものもたくさんありますけれど、ソース表を見て「ここが違うじゃないか」と突っ込まないでね　(^^;;;



●mailto メールフォームを作ります。アクセス方法＝mailto，リンク先＝自分のメールアドレス（TARABAyo@aol.com)，リンクを張る文章(メールはこちらへ♪）というふうに入力していくと↓のようになります。

kurur.gif<A HREF="mailto:TARABAyo@aol.com">メールはこちらへ♪</A>

メールはこちらへ♪


bbb3.gifリンク先(L)：
●リンク先のURL（http://www10.big.or.jp/~tarabayo/　など）をいれますが、アクセス方法でhttpを指定してるので、URLはWWWから入力しないとhttpが二重になりリンクになりません。アクセス方法を空白のままにして、httpから入力することもできます。

●自分のホームページのどこかにリンクを張る場合は、参照(R)からhtmlを選びます。
ブラウザで確認(B)ボタンでリンク先を画面で確認することができます。
この場合はアクセス方法【http,mailto,...】のところには何も入れません。（相対パスで書かれます）

ただしFTPでアップしたときのディレクトリの構造と、自分のPC内での構造とが同じでない場合はうまくリンクが張れませんので注意して下さいね。


bbb4.gifリンクを張る文章(S)：
●ここに入力した文字や画像をクリックするとリンクします。
画像の場合は<img src="ファイル名 ">というふうにタグで入力します。border="0"を加えるとリンクを設定した画像の周囲の線を消すことができます。<img src="ファイル名 " border="0" >

●ＩＭＧボタン（この後で説明しています）で、あらかじめ使いたい画像のタグを出しておいて、それを切り取って「リンクを張る文章」のところに張り付けたらいいですね。


kurur.gif <http://www10.big.or.jp/~tarabayo/index.html">たらばっちへ</A>
(注：この場合はファイル名index.htmlを指定したリンクですので、最後を「/」で閉じません）

↓

たらばっちへ



kurur.gif <A HREF="http://www7.big.or.jp/~toridon/"><img src="onumarl.gif"><A>
（注：この場合はディレクトリ名を指定したリンクなので「/」で閉じます。border="0"をいれていませんから、画像の周りに線が見えますね）

↓




kurur.gif <A HREF="../itikara/itikara.html;><img src="kuma.gif" border="0"></A>
（「一から始めるタグのお勉強」のページにリンクを張っています。画像のまわりの線も消しています。）

↓

kuma.gif




bbb5.gifフレームの場合【TARGET】(T)：TARGET="xxxx"（xxxは任意の名前）xxxにウィンドウ名を指定することで、 その指定したウィンドウにリンクしたページを表示させることが出来ます。

一回目のアクセスでは新しいウィンドウが作られ、そこにリンクで指定 したページを表示します。
二回目以降のアクセスでは、その新しく作られ たウィンドウにリンクで指定したページを表示します。

拡張タグのページで例を作っていますのでＦＲＡＭＥのところを見て下さい。


■ＩＭＧ（イメージの設定）

絵や写真、動く画像などを表示する時に使うタグです。

bbb1.gif表示イメージのＵＲＬ【SRC】(S)：
●参照をクリックし表示したい画像を選びます。ピュアで画像を確認するといいですね。

●ここで画像を指定すると、画像サイズ（幅×高さ），テキストの表示【ALT】，画像の幅【WIDTH】，画像の高さ【HEIGHT】が自動的に入ります。


bbb2.gif最初に読み込まれる画像【LOWSRC】(S)：
●ここに指定した画像は、↑表示イメージのＵＲＬ【SRC】で指定した画像よりも先に読み込まれ、その後で【SRC】で指定した画像が上書き表示されます。

●ただしＮＮだけの表示でＩＥでは表示されません。どういう時に使うと効果的なんでしょうね？(^.^;)
LOWSRCで軽い画像、SRCで重い画像を設定するといいのでしょうか？普段はあまり使われてないように思いますけれど・・・


bbb3.gifイメージと文字の位置関係【ALIGN】(S)：画像の周りに文字を入れる時の位置を指定します。

●<ALIGN="left">画像が左
画像が左色は匂えど散りぬりを我が世誰ぞつねならむ有為の奥山今日越えて浅き夢みじ酔いもせずいろはにほえとちりぬるをわがよたれぞつねならむうゐのおくやまけふこえてあさきゆめみじゑいもせず


●<ALIGN="right">画像が右
画像が右色は匂えど散りぬりを我が世誰ぞつねならむ有為の奥山今日越えて浅き夢みじ酔いもせずいろはにほえとちりぬるをわがよたれぞつねならむうゐのおくやまけふこえてあさきゆめみじゑいもせず


●<ALIGN="top">上揃え
上揃え色は匂えど散りぬりを我が世誰ぞつねならむ有為の奥山今日越えて浅き夢みじ酔いもせずいろはにほえとちりぬるをわがよたれぞつねならむうゐのおくやまけふこえてあさきゆめみじゑいもせず


●<ALIGN="middle">中揃え
中揃え色は匂えど散りぬりを我が世誰ぞつねならむ有為の奥山今日越えて浅き夢みじ酔いもせずいろはにほえとちりぬるをわがよたれぞつねならむうゐのおくやまけふこえてあさきゆめみじゑいもせず


●<ALIGN="bottom">下揃え
下揃え色は匂えど散りぬりを我が世誰ぞつねならむ有為の奥山今日越えて浅き夢みじ酔いもせずいろはにほえとちりぬるをわがよたれぞつねならむうゐのおくやまけふこえてあさきゆめみじゑいもせず


bbb4.gifテキストの表示【ALT】(S)：ここに入力した文字が画像が表示されるまでの間先に表示されます。画像の説明を文字で書き換えた方がいいですね。上のBOTTOMの画像にカーソルをあわせたら「下揃え」という文字が見えると思いますけど、ALTに記入した文字がそういうふうに表示されます。


bbb5.gif上下のマージン【VSPACE】(V)：画像の上下にスペースをつくります。

●<VSPACE="20">
上下スペース色は匂えど散りぬりを我が世誰ぞつねならむ有為の奥山今日越えて浅き夢みじ酔いもせずいろはにほえとちりぬるをわがよたれぞつねならむうゐのおくやまけふこえてあさきゆめみじゑいもせず


bbb6.gif左右のマージン【HSPACE】(H)：画像の左右にスペースを作ります。
●<HSPACE="20">

左右のスペース色は匂えど散りぬりを我が世誰ぞつねならむ有為の奥山今日越えて浅き夢みじ酔いもせずいろはにほえとちりぬるをわがよたれぞつねならむうゐのおくやまけふこえてあさきゆめみじゑいもせず


bbb7.gif枠の太さ【BORDER】(B)：画像の周りを指定した太さの線で囲みます。

<BORDER="2"><BORDER="5"><BORDER="10">
kurur.gifkurur.gifkurur.gif


bbb8.gifイメージマップを使う【ISMAP】(I)： マップを使うと一つの画像の中で、クリックする場所によって違うところにリンクさせることができます。

ISAMAPとはxxx.mapというマップファイルを作り、そこにhtmlからリンクさせる「サーバサイド・クリッカブルイメージマップ」で指定するコマンドですが、これはあまり使われていないようです。


 bbb9.gifマップファイル名【USEMAP】(U)：通常、使われているのはこちらの方で、このタグは「クライアントサイド・クリッカブルイメージマップ」(クリッカブルマップ）で指定するコマンドです。

●簡単なクリッカブルマップを作ってみました。

クリッカブルマップの説明図 Sucre de bebeへ　リンクしています。 Onumarl Worldへ、リンクしています。 トップに戻ります ●通常のリンクはＡのタグを使い、それぞれの画像に個別にリンク設定をしますが、クリッカブルマップを使うと一枚の画像の中で、好きなところに何カ所でも別々のリンクをはることができます。

●それぞれリンク表示をしているところをクリックしてみて下さい。

●まず最初に画像の指定をします。

この地図に仮に「TOWN」というネームをつけて、USEMAPの欄に「TOWN」と入力すると、下のようなタグになります。忘れずにborder="0"として下さい。

<IMG SRC="map1.gif" ALT="クリッカブルマップの説明図" WIDTH="330" HEIGHT="250" USEMAP="#TOWN" border="0">
次に下記のタグを加えます。
<MAP NAME="TOWN">ここまでが画像の指定になります。


●次にそれぞれの領域の作成をします。
【AREA】（イメージマップ）タグを使いますので、カスタマイズでAREAボタンを出しておきましょう。

クリッカブルマップの説明図 Sucre de bebeへ　リンクしています。 Onumarl Worldへ、リンクしています。 トップに戻ります ●それぞれの領域は「座標」で指定します。左の図に書いている数字(単位：ピクセル）のことです。

●座標は画像ソフトのルーラで示される値と同じです。ちなみにたらばはＰＣにおまけについていたMsPaintを使っています。
画像の指定したい位置にマウスをもっていくと、右下にx座標とy座標が数字で示されます。

●ただMsPaintはビットマップファイル(bmp)形式でないと開けませんので、gif画像を開きたい時は、あらかじめ
ＧＶソフトなどでbmp形式に変えたものを開いています。


●【AREA】（イメージマップ）ボタンを開いてみて下さい。
【SHAPE】（形状）で、長方形(rect),円(circle),多角形(poly)のいずれかを選びます。

kurur.gif長方形(rect)を領域とする場合は、（座標)【COORDS】に左上のx座標,左上のy座標,右下のx座標,右下のy座標をいれます。
この地図の場合は、Sucre de bebeにリンクしているピンクの四角形で、タグは下のようになります。
<AREA SHAPE="rect" COORDS="159,25,309,65">

kurur.gif円(circle)を領域とする場合は、（座標)【COORDS】に円の中心のx座標,y座標,円の半径を入れます。
この地図の場合は、くまさんの吹き出しの Onumarl Worldへリンクしているもので、タグは下のようになります。
<AREA SHAPE="circle" COORDS="189,176,36">

kurur.gif多角形(poly)を領域とする場合は、（座標)【COORDS】にそれぞれの頂点のx座標,y座標をすべて 記入します。
この地図の場合は大きい家の六角形でタグは下のようになります。
<AREA SHAPE="poly" COORDS="34,27,18,53,18,99,81,100,81,46,60,26">

●リンク先【HREF】,テキストブラウザ用の文章【ALT】,【TARGET】についてはそれぞれのページの説明を参考に記入して下さい。

●すべての領域の作成が終わったら、最後に</MAP>で閉じます。

●全体のタグは下のようになります。

<IMG SRC="map1.gif" ALT="クリッカブルマップの説明図" WIDTH="330" HEIGHT="250" USEMAP="#TOWN" border="0">
<MAP NAME="TOWN">

<AREA SHAPE="rect" COORDS="159,25,309,65" HREF="http://www.t-cnet.or.jp/~pink/Sucredebebe.html" ALT="Sucre de bebeへ　リンクしています。" TARGET="_blank">

<AREA SHAPE="circle" COORDS="189,176,36" HREF="http://www.cmpk.or.jp/user/onuma/" ALT="Onumarl Worldへ、リンクしています。" TARGET="_blank">

<AREA SHAPE="poly" COORDS="34,27,18,53,18,99,81,100,81,46,60,26" HREF="../../index.html" ALT="トップに戻ります" TARGET="_blank">

</MAP>


●☆Sozai Room☆では例えばbackp.gifのような素材やトップページに使えそうなハウスの素材をタグ付きでゲットできますので、覗いてみて下さい(^-^)


■ＦＯＮＴ（フォントの指定）

文字の大きさと形を指定します。

bbb1.gif大きさ【SIZE】：Ｈｎ（見出しタグ）と同じです。
サイズを特に指定しない時の普通の大きさはSIZE="３"です。


bbb2.gif色指定【COLOR】：ＢＯＤＹのところを見て下さいね。


bbb3.gifフォント名【FACE】：参照をクリックするとフォント名，スタイル，サイズを指定できますから、サンプル欄に表示された文字を見て好きな文字を選んだらいいですね。


bbb4.gif−(Ｍ)，＋(Ｐ)：ここにチェックをいれるとそれぞれ↓のようなタグになります。

−(Ｍ)　→　<FONT SIZE="-1"></FONT>
＋(Ｐ)　→　<FONT SIZE="+1"></FONT>

これは今の文字の大きさに対してサイズの増減（相対値）ができるという意味です。数字を変えることで相対値が変わります。


bbb5.gif FONT COLORボタンは色だけ指定できるようになっています。


■ＣＥＮＴＥＲ（中央揃え）

ボタンを押すと<CENTER></CENTER>が出てきますので、タグの間に中央揃えしたい文字や画像を入れて下さい。

■ＢＬＩＮＫ（テキストの点滅）

<BLINK>と</BLINK>の間に入力した文字が点滅しますが、ＮＮでしか表示されないようです。確かめてみて下さい。
点滅してます？

■<！---->（コメントタグ）

ＨＴＭＬ文書の中にコメントを書き込むためのもので、この中に文字を入れてもブラウザには表示されません。

■ＢＲ（改行タグ）

その場所で改行され次の行に移ります。複数行あける時は<BR>を繰り返します。

■Ｐ（段落タグ）

その場で改行され、更に次の行が一行空きます。<P>は繰り返しても複数行空けることはできません。

■１，２（ユーザー登録文字列）

●これは自分が頻繁に使う文字をあらかじめ登録しておけば、ボタンを押すだけで表示できる機能です。２個登録できます。

●ツール(D)→文字列１の登録（A)を開いて登録したものが１のボタンに登録されます。


● この画面のTOPへ ●

拡張タグへ

Copyright (C) 1998-2001 たらば. All rights reserved.