リンクと解説●Html



　最初はホームページを作るために纏めた。[1997]
　その後、長期間更新していなかったんだけど、自由にhtmlページを書こうとすると、
Frontpageなどに任せきりというわけにいかず、自分である程度深く知っておく必要があ
ると思い、調べ直すことにした次第です。[2001.10.20]
　自分でメモがわりにちょこちょこ書き加えてます。[2002.8.1]




■htmlタグメモ

　ここでは、主なタグ中、面倒なものだけ。　全部は、下の参考資料を参照のこと。


●便利メモ



●ID/Passwordの入力の手間を省く
例：http://npc:1999@www.fukumi.co.jp/mm/download.htm	id(npc),password(1999)
●新しい窓を開く
例："http://www.fukumi.co.jp/mm/index.htm" target="_blank" とする。



●ページ内相対パス用タグ：Base



●書式



形式<base href="...">
<base target="...">


サポートH2〜H4s〜 / e2〜 / N2〜 / i1


タグの省略開始タグ：必須、終了タグ：無し



●属性



属性意味



href=urlH2-H4s/e2/N2/i1。基準となる URL を指定します。HTML4.01 Strict では target 属性はサポートされないので、href 属性が必須として定義されています。


target=targetH4t/e3/N2。表示ターゲットを指定します。

●使用例(1)



HTMLソース



<html><head>

<title>タイトル</title>

<base href="http://www.yyy.zzz/">

</head><body>

<a href="index.html">XXX</a>

</body></html>


上記の例では、基準 URL を http://www.yyy.zzz/ に設定し、index.html へのリンクを
クリックすると、http://www.yyy.zzz/index.html にジャンプする。
●使用例(2)



HTMLソース



<html><head>

<title>タイトル</title>

<base target="xyz">

</head><body>

<a href="aaa.html">AAA</a>

<a href="bbb.html">BBB</a>

</body></html>


上記の例では、基準ターゲットを xyz に設定し、そのページ中にあるリンクをクリック
すると、それらはすべて、xyz という名前のウィンドウ（フレーム）に表示。
●参考
とほほのWWW入門:HTMLリファレンス -   - ベース URL の指定
 --- http://tohoho.wakusei.ne.jp/html/index.htm
●パスの相対指定

    /tips/index.html
     |
home/mm/index.html
     |
     +---/pc/index.html [ホーム]
 
・./　　　　　　　	http://www.fukumi.co.jp/mm/pc/
・../　　　　　　	http://www.fukumi.co.jp/mm/
・/tips/　　　	http://www.fukumi.co.jp/tips/

    /tips/index.html
     |
home/tool/emanon/emanon.cgi [ホーム]
     　　　|
     　　　+---/cgi-lib/jcode.pl
 
・./　　　　　　　	http://www.fukumi.co.jp/tool/emanon/
・../　　　　　　	http://www.fukumi.co.jp/tool/
・/tips/　　　	http://www.fukumi.co.jp/tips/
・cgi-lib/ 　	http://www.fukumi.co.jp/tool/emanon/cgi-lib/
相対パスとは、あるファイルから見たあるファイルへの位置を示したものです。 
例）※ /はディレクトリを示します。
public_html / index.html
   |
   +−− cgi-bin / jcode.pl
   |             / bbs.cgi
   |             / dat / log.dat
   +−− img / bbs.gif

bbs.cgiから見た相対パスは以下のようになります。
jcode.plへの相対パス−−−−−−→./jcode.pl
log.datへの相対パス−−−−−−−→./dat/log.dat
index.htmlへの相対パス−−−−−→../index.html
bbs.gifへの相対パス−−−−−−−→../img/bbs.gif
絶対パス（フルパス）とは場合によって2種類の意味があります。
  1. http://〜から始まるURLをフルパスと呼ぶ場合
  2. /から始まる絶対パス（フルパス）
TRY-NETでは、「/」から始まるフルパスは、セキュリティ上ご利用頂けません。 
●参考
絶対パスと相対パス@nifty
CJ Club FAQ:Q/ 相対パス、絶対パス?
Try-Net FAQ:相対パス・絶対パスとは何ですか？







●基本１６色(色名指定HTML3.2対応)




●基本16色パレット



色色名#HexRGB値(10進法)


■黒　　Black#000000r:0,g:0,b:0


■灰　　Gray#808080r:128,g128,b128


■銀　　Silver#C0C0C0r192,g192,b192


□白　　White#FFFFFFr255,g255,b255


■赤　　Red#FF0000r255,g0,b0


■黄　　Yellow#FFFF00r255,g255,b0


■黄緑　Lime#00FF00r0,g255,b0


■水　　Aqua#00FFFFr0,g255,b255


■青　Blue#0000FFr0,g0,b255


■紫　　Fuchsia#FF00FFr255,g0,b255


■栗色　Maroon#800000r128,g0,b0


■オレンジ　Olive#808000r128,g128,b0


■緑　　Green#008000r0,g128,b0


■暗い水色　Teal#008080r0,g128,b128


■濃紺　　Navy#000080r0,g0,b128


■暗い紫　Purple#800080r128,g0,b128


●ほかの主要色


■焦茶#5B4F3Dr91g79b61


■茶色#7C6035r124g96b53


■茶褐色#6B492Dr107g73b45


■伽羅色#E0C384r224g195b132


■朽葉#F2D88Cr242g216b140


■





●背景色と文字色の組み合わせ
	from SAMPLE of COLOR
★GROUP of RED



NAME
Hexa
BGCOLOR


RED
#FF0000

BLACK:
WHITE:
RED:
GREEN:
BLUE:
YELLOW:
PURPLE:


TOMATO
#FF6347

BLACK:
WHITE:
RED:
GREEN:
BLUE:
YELLOW:
PURPLE:


OGANGE
#FFA500

BLACK:
WHITE:
RED:
GREEN:
BLUE:
YELLOW:
PURPLE:


ORANGERED
#FF4500

BLACK:
WHITE:
RED:
GREEN:
BLUE:
YELLOW:
PURPLE:


MAROON
#800000

BLACK:
WHITE:
RED:
GREEN:
BLUE:
YELLOW:
PURPLE:


PURPLE
#800080

BLACK:
WHITE:
RED:
GREEN:
BLUE:
YELLOW:
PURPLE:

MAGENTA
#FF00FF

BLACK:
WHITE:
RED:
GREEN:
BLUE:
YELLOW:
PURPLE:




★GROUP of LIME



NAME
Hexa
BGCOLOR


LIME
#00FF00

BLACK:
WHITE:
RED:
GREEN:
BLUE:
YELLOW:
PURPLE:


GREEN
#008000

BLACK:
WHITE:
RED:
GREEN:
BLUE:
YELLOW:
PURPLE:

OLIVE
#808000

BLACK:
WHITE:
RED:
GREEN:
BLUE:
YELLOW:
PURPLE:


GREENYEELOW
#ADFF2F

BLACK:
WHITE:
RED:
GREEN:
BLUE:
YELLOW:
PURPLE:


YEELOWGREEN
#9ACD32

BLACK:
WHITE:
RED:
GREEN:
BLUE:
YELLOW:
PURPLE:


YELLOW
#FFFF00

BLACK:
WHITE:
RED:
GREEN:
BLUE:
YELLOW:
PURPLE:




★GROUP of BLUE



NAME
Hexa
BGCOLOR

BLUE
#0000FF

BLACK:
WHITE:
RED:
GREEN:
BLUE:
YELLOW:
PURPLE:


NAVY
#000080

BLACK:
WHITE:
RED:
GREEN:
BLUE:
YELLOW:
PURPLE:


AQUAMARINE
#7FFFD4

BLACK:
WHITE:
RED:
GREEN:
BLUE:
YELLOW:
PURPLE:



COOLCOPPER
#D98719

BLACK:
WHITE:
RED:
GREEN:
BLUE:
YELLOW:
PURPLE:


SKYBLUE
#87CEEB

BLACK:
WHITE:
RED:
GREEN:
BLUE:
YELLOW:
PURPLE:


POWDERBLUE
#B0E0E6

BLACK:
WHITE:
RED:
GREEN:
BLUE:
YELLOW:
PURPLE:


ALICEBLUE
#F0F8FF

BLACK:
WHITE:
RED:
GREEN:
BLUE:
YELLOW:
PURPLE:


AQUA
#00FFFF

BLACK:
WHITE:
RED:
GREEN:
BLUE:
YELLOW:
PURPLE:




●参考
Webの色見本
 --- ブラウザ依存しない216色のWebカラー。これを目で見ながら選べるように作ったページ。



はじめに
背景色
文字色
チャート
パステル
一覧




SAMPLE of COLOR
 --- http://www.internetacademy.co.jp/~hhayashi/color.html; 背景色と文字色の組み合わせ
色見本の館 - http://www.color-guide.com/
About HTML Color





●お気に入り　#0080c0	#004080


      

        File type
        .class
        .cab
        .jar
      



      

        Size
        12.6 kB
        6.7 kB
        7.0 kB
      

    

　註)背景=黒、文字色=の場合は、
　body bgcolor="#000000" link="#fff4b5" vlink="#afa465" text="#ffffff"
　 2)縦幅が広い場合、もっと綺麗ですね
　 3)参考：http://www.javaroom.com/applets/headline1.htm



























Web 検索



























　
ホーム
メール
サーチ
ニュース
ショッピング
マネー
チャット










　註)[HTML]要素: <NOBR></NOBR>	...、改行禁止
　 [table]属性: ID="gNav", ID="frmImp"	...次ぎのClassと同様用途
　 [TD]属性: CLASS=big7, CLASS=fin, class=wb	...スタイルシートなどで定義したクラスと、
　 この属性を指定したタグで囲まれたエレメントを関係づけ
とほほのWWW入門:HTMLリファレンス:<NOBR>
とほほのWWW入門:HTMLリファレンス:CLASS=class
とほほのWWW入門:HTMLリファレンス: ID=id
 ---NAME=nameと同様、この属性を指定したタグで囲まれたエレメントにidで指定した名
前をつけます。idは、ハイフン(-)、アンダーバー(_)、コロン(.)、ピリオド(.)を含む半
角英数文字列で、最初の1文字は半角英文字で始まる必要があります。
 CLASS属性によるクラス名と、ID属性によるIDは同じような目的に使用できますが、クラ
スはクラスに対して名前をつけるのに対して、IDはタグで囲まれた要素に名前をつけます。





●色の指定方法



★文字の着色

●文字の着色例

書式　<font color="#FF0000">●文字の着色例</font>

★枠線の着色

●枠線の着色例



書式　TABLE border="option1" width="option2" cellspacing="option3" cellpadding="option4" bordercolor="option5"
	option5=#rgb | color name	表セルの枠色

★背景の着色

●背景の着色例



書式　TABLE border="option1" width="option2" cellspacing="option3" cellpadding="option4" bgcolor="option5"
	option5=#rgb | color name	表セルの背景色

また表中では、TR,TDタグでのBGCOLORが指定可能なので、部分的に背景色を設定できる。

★背景の着色[CSS]
　Style Sheetで文字反転など、多彩な作業が可能。

詳細は　→※めざせ、ＨＴＭＬの鉄人！ - 「ＨＴＭＬ教室」(中級篇)その２






●ピクセル　Pixel =画素



　画面の表示方法として、Pixelまたは%が使用される。
14inモニターなど VGAでの640×480ピクセルの表示、 
ノート型パソコンなど SVGAでの800×600ピクセルの表示、 
17inモニターでの834×624ピクセルの表示、 
17in以上の マルチスキャンモニターでの1024 × 768ピクセル、1280×1024ピクセル、1600×1200ピクセル

●例
640/480/360 pixel





240/180/120





90/60/45





30/22/15






●参考
ページ幅の検討
視覚表現システム〜見本例
 --- ピクセル単位で表示されたサイズ別見本
５．線を表示しよう！
 --- HRタグの各種サンプル




●表　Table



　→●別掲




●表　の角を丸める



　角を丸める(Curl) 技法としては、四隅に画像を使うというのが一般的なようです。

●moz-border-radius: パーセント
枠線の角を丸める。指定は%（パーセント）で指定する。MozillaとNetscapeのみの対応。

table style="border-width: thin; border-style: solid; -moz-border-radius: 20%" と指定した場合は
テーブルの角を丸める 
のようになる。 

●参考
[10歩手前から始めるパソコン]内容一覧ページの小技編 - 表の角を丸める
 - 画像使用
[SiteFashion Project]角の丸いテーブル
 - 1)画像ソフトを使い　1/4円を作る
     (Fireworksで円を描いてスライスで4分割してgif化)
   2)Table処理
表と線、枠に対するスタイル指定
 - 






●段組



　Multicolという段組タグがあるが、ちと違うみたいだ。

Tableによる段組の例
tableタグは表を作るためのタグですが、段組に利用できます。

<table width="60%" align="center" border="0" bgcolor="#ffffff">
<tr><td width="50%" valign="top">
段組の１列目の文章を記入
</td>
<td width="50%" valign="top">
段組の２列目の文章を記入
</td>
</tr>
</table>

tableを使った段組の方法ですが枠線の設定をborder="0"とすることにより、枠線が表示されなくなるため、見た目には段組されているように見えるのです。
また、valign="top"とすることで、セル内でテキストを上詰め配置するようにしています。これを指定しておかないと、行数が少ない方が上下方向でセンターに配置されるので、格好悪くなります。 

●参考
Tableタグによる段組
 in ホームページ作成の基本的なこと





●Line　線



●書式
<HR SIZE=n WIDTH="%" ALIGN=left|right|center>
アトリビュート： ALIGN=left/right/center, NOSHADE, SIZE=n, WIDTH=n/"%" , COLOR=""
　註) ColorはIEのみ
●例
<HR SIZE=5 WIDTH="50%" ALIGN=center COLOR="#ff0000">


横線の幅は，％指定とピクセル指定が使えます．
また横線は 「表」 の中や 「箇条書き」 の中でも使用できます．

●参考
HTML Reference - 横線
Guide to HTML 3.2 :HR - Horizontal Rule区切り線
KeepTheFaith/HTML Reference - HR





●フレーム　Frame



 ページを作る場合、複数ファイルを纏めて表示するのがフレーム。
書式1　Frameset option0="option1"
	option0=COLS |ROWS	縦割り|横割り
	option1=pix |%
	option2=yes| no| auto
書式2　frame bordercolor="option1" frameborder="option2" border="option3"
	option1=#RGB | color name
	option2=yes| no
	option3=0 | 1
例　　frame src="url" name="frame name" scrolling="option2" margin="option1"
書式3　a href="url" target="option"	リンク先
	option=frame name | _top | _parent | _self | _blank

●参考
Frame[5p] in A Primer to HTML
 --- 解説,書式つき
フレーム in Html Reference
 --- 解説つき
FRAMESET要素  in htmlタグ一覧表
 --- 解説つき
●画像

■ <IMG SRC="...">
<IMG>タグは画像を表示させる機能があります。このタグには終タグはありません。また、このタグには必ずSRCというアトリビュート（属性）をつけます。その他のアトリビュートは省略できます。

<IMG>の主なアトリビュート
SRC="..."：画像ファイルの指定（必須）
ALIGN="..."：並び方と回り込み
WIDTH="..."：画像の幅
HEIGHT="..."：画像の高さ
BORDER="..."：画像の境界線
ALT="..."：代替え文字
用例<IMG SRC="ahiru.gif">

●画像の大きさの指定
WIDTH="..."HEIGHT="..."というアトリビュート（属性）を入れることにより画像の大きさを指定することができます。" ... "にはピクセル数を入力します。本来の画像サイズを変えることにより、拡大・縮小が簡単に行えます。等倍でこれを指定しなくても良いですが、指定しないとファイルの読み込み時間が長くなってしまいますので、極力入力するようにしましょう。
用例:<IMG SRC="ahiru.gif" WIDTH="51" HEIGHT="54">

●代替え文字を入れる
ALT=" ... "というアトリビュート（属性）を入れると、カーソルが画像に触れたときに" ... "に記述したコメントが表示されます（画像１）。なにかしらの理由で画像が表示されないときは、画像が表示されるべき場所にコメントが表示されます（画像２）。ブラウザでテキストしか表示しない人・できない人もいるので、画像を読み込まなくても大体そこになにがあるのか分かるように極力指定するようにしましょう。
用例<IMG SRC="ahiru.gif" ALT="アヒル">

●参考
HTML:画像[KeepTheFaith/HTML]





●テキストの回り込み



TMLエディタや直接に書くIMGタグの標準指定では，画像を配置すると続けて書くテキスト
が画像の下へ表示されます。画像の横にテキストを回り込ませたい場合には，画像に属性を与えればよいのです。
<img src="photo.jpg" align="left"> 　←左に寄せる
<img src="photo.jpg" align="right"> 　←右に寄せる

画像属性はleftになっています。ですので、画像が左に配置され、
文章がその右へくる形になります。
またバランスをとるために、画像と文章に間をあけています。これは画像に
 hspace="5" vspace="5"と、空白の属性をつけています。
 回り込ませる際は読みづらくなるので、このような指定をしたほうが、
 きれいに見えます

●回り込み解除
<br clear="all">
周り込みは解除され下段に表示されます
　clearの属性が「all」であると，左右どちらに回り込んでいる場合にも有効ですが，次
のように右，左それぞれの指定で解除させることも可能です。
<br clear="right">
<br clear="left ">

●表の横にテキストを回り込ませる
　<table align="位置”>を指定します。（"left","right") 

●参考
テキストを画像に回り込ませたい〜alignタグ〜[ZDNet Tips for HTML]
テキストの回り込みは解除させよう[ZDNet Tips for HTML]





●スクロール



　スクロールの仕方もいろいろある。　書式は参考資料を参照。
■書式■

<MARQUEE>★</MARQUEE>
★=スクロールする文字などを入力する

■事例■
Welcome to My Homepage！

(._.) 　(･o･)
■事例■縦スクロール

真夜中に突然　
激しい雨が降り始め　
あちこちのバナナの葉を叩く
ざわめく音は尖った渦のように極まり　
沈黙に近づき

●参考
ホームページを作る - ［11］スクロール機能を使う
ホームページを作る - ［12］文字で素材を作る
Kani House - html - Marqee
 --- サンプル付き各種パターン
●スクロール[JavaScript]

●例

●参考
扇谷(せんごく)Homepage - HTML/JavaScriptのサンプル - ＢＯＸ内への スクロール表示(JavaScript)
 --- Java Scriptのサンプル集を公開。
ページを自動スクロールさせたい[ZDNet tips for html]
 --- http://www.zdnet.co.jp/help/tips/html/h0052.html
インラインフレーム内で自動スクロールをさせる[ZDNet tips for html]
 --- http://www.zdnet.co.jp/help/tips/html/h0054.html
 別ファイル内容をページの一部として縦スクロール表示
縦にメッセージをスクロール
 --- http://village.infoweb.ne.jp/~cylas/jscript/textf/textf04.htm
文章が縦にスクロールします
 --- http://www.geocities.co.jp/SiliconValley-Cupertino/7755/javascript/js07.html
スクロールウィンドウ
 --- http://www.din.or.jp/~hagi3/JavaScript/JSTips/DHTML/External/ScrWin.htm
オートスクロール[DFJ]
 --- Windowsをスクロールさせる
VerticalScroll version 1.0〜文字が下から上に流れるちょっとユニークなApplet
 --- VerticalScroll version 1.0 
GridViewer ver.1.1〜GIFやJPEG画像を拡大して、スクロール表示させるためのアプレット
 --- http://www.yo.rim.or.jp/~nakagawa/WWW/GridViewer11/GridViewer.html





●タイプライター効果



●参考
タイプライター文字[DFJ]
 --- http://dfj.cool.ne.jp/javascript/typewriter.html






●画像に文字などを重ねる



2．調達した画像データをホームページ上に表示させるには、以下のタグで行います。

［例］

こんな風に、背景が邪魔して文字が読みにくい。
<TD BACKGROUND="http://hp-design.net/design/lecbasic/lec2-bgimg1.gif">こんな風に、背景が邪魔して文字が読みにくい。</TD> 

●参考
HP-DESIGN.NET [DESIGN >> LEC BASIC]〜背景色はイタクないものを！
AllAboutJapan:ホームページ作成
 - スタイルシート活用講座[7]背景画像の表示方法を自在に指定
背景・画像に関してのスタイルシート具体例
モグボックス 背景画像素材館：背景に画像を ...





●背景(1)表中



www.softwareshelf.comのhtmlメルマガから
 [Table][td]タグの中で背景画像使用。


  

     
      

        

          
            

              
 
                
                
              

              
 
                
                
              

            

          		
        

      

左縦背景=background.jpg

Software.comロゴ含む左側=logotext.jpg

右側長方形=smBG






●背景(2)表中



　メルマガApple eNews Japanを購読しているが、アップルらしい高デザインのものでいつも感心させられるが、










Apple eNews-Japan

Hot News Headlins






白背景
In This Issue


arrow
リビング発、ホームメイド・ムービーを世界へ配信


arrow
.Macで、ファイル共有がさらに簡単になりました


arrow
Tips & Tricks ─ iPhoto 2をもっと便利に使う


arrow
「Mac OS X DTPハンズオンセミナー」へようこそ


arrow
プロ品質の映像編集が学べる実践セミナー











●背景(3)ページ全体



　画像などをページ全体の背景に入れたい場合
書式例　<body background="pict/top2.jpg">

サンプル●Apple eNews Japan　No.34, 4 March 2003
　メルマガApple eNews Japan
実際表示例は上の（●背景(2)表中）を参照。
 Hot News Headlines 行は、単にanimation gif使用。
 http://www.apple.co.jp/articles/backnumber/html/img/bg01.gif は縦線。



ここで使っている背景画像は、http://www.apple.co.jp/articles/backnumber/html/img/stripes.gif。
書式　<body text="black" link="blue" vlink="olive" alink="red" bgcolor="#cccccc"
 background="http://www.apple.co.jp/articles/backnumber/html/img/stripes.gif">
なんだが、ここでは、ページ一部に限定するため、TABLE内で使用した。
書式　<table bgcolor="#cccccc" background="http://www.apple.co.jp/articles/backnumber/html/img/stripes.gif"><tr><td>














　


新17インチiMacで快適「DVD三昧」のススメ


「無線LANは遅い」というのは、もう間違いです


　
















●Target



リンク先の内容や、フォームの結果をどのウィンドウ（フレーム）に表示するかを指定。
ウィンドウ（フレーム）の名前は、タグのNAME属性で名前付けした名前、JavaScr
iptのopen()の第2引数で名前付けした名前、もしくはアンダーバー（_）で始まる下記の
特殊な名前のいずれかを指定します。

_blank   ...新規にウィンドウを開く
_self    ...同じウィンドウに表示
_top     ...同じウィンドウに表示(フレーム時、分割を全て解除して、そこに表示)
_parent  ...同じウィンドウに表示(フレーム時、1段だけ分割を解除して、その親フレームに表示)

●Target用例
    <A HREF="xxx.html" TARGET="_blank">XXX</A>	... 新規
    <A HREF="xxx.html" TARGET="help">XXX</A>	... 
    ---既に help という名前を持ったウィンドウ（フレーム）があればそこに、無けれ
    ば新しいウィンドウを開いて表示。

●参考
とほほのWWW入門:HTMLリファレンス - Target
 --- http://tohoho.wakusei.ne.jp/html/index.htm






●Popup Window



　クリックしたり、マウスを近づけると別に窓が開く

●Javascripts - Window.open
リンクをクリックすると小さなウィンドウが開く、というとき、多くの場合
<a href="javascript:window.open('http://〜','','width=100,height=100')">開く</a>
<a href="http://〜" target="_blank" onClick="window.open('http://〜','',
'width=100,height=100');return(false)">開く</a>
こうすれば、JavaScriptが使用できないブラウザでも新しいウインドウを開いてその中に
ページを表示させることができます。
注意点として、return(false)を抜くと、JavaScriptに対応したブラウザの場合小さなウ
インドウが二つ開いてしまいます。
window.open(url, name [, style]) (e3/N2)

●Javascripts - Window.open 各種
<SCRIPT language="JavaScript"><!--
function OpenWin(){
    win=window.open("window.htm","new","");
}
// --></SCRIPT>

<A href="javascript:OpenWin()">ウィンドウを開く</A>
<FORM><INPUT type="button" value="ウィンドウを開く" onClick="OpenWin()"></FORM>

win=window.open("window.htm","new");            	---ウィンドウを開く
win=window.open("window.htm","new","toolbar=yes");	---ウィンドウを開く（ツールバー）
win=window.open("window.htm","new","scrollbars=yes");	---ウィンドウを開く（スクロールバー）
win=window.open("window.htm","new","width=100,height=100");	---ウィンドウを開く（サイズ指定）
win=window.open("window.htm","new","width=100,height=100");
    win.moveTo(0,0);	---ウィンドウを開く（位置指定）

ウィンドウを開く（複数型）
<SCRIPT language="JavaScript"><!--
function OpenWin1(){
    win1=window.open("window5-1.htm","new1","width=100,height=100");
}
function OpenWin2(){
    win2=window.open("window5-2.htm","new2","width=200,height=200");
}
// --></SCRIPT>
<FORM><INPUT type="button" value="ウィンドウ１を開く" onClick="OpenWin1()">
<INPUT type="button" value="ウィンドウ２を開く" onClick="OpenWin2()"></FORM>

ウィンドウを閉じる
<SCRIPT language="JavaScript"><!--
function CloseWin(){
    window.close();
}
// --></SCRIPT>
<A href="javascript:CloseWin()">ウィンドウを閉じる</A>
<FORM><INPUT type="button" value="ウィンドウを閉じる" onClick="CloseWin()"></FORM>

親ウィンドウを操作する　 
 ---開いた別ウィンドウから親ウィンドウを操作
<SCRIPT language="JavaScript"><!--
function pageBack(){
    window.opener.history.back();
}
function pageForward(){    window.opener.history.forward();
}
// --></SCRIPT>
<A href="javascript:pageBack()">前へ戻る</A>
<A href="javascript:pageForward()">次へ進む</A>
<FORM><INPUT type="button" value="前へ戻る" onClick="pageBack()">
<INPUT type="button" value="次へ進む" onClick="pageForward()"></FORM>

┣　ウィンドウを開く
┣　ウィンドウを開く（ツールバー）
┣　ウィンドウを開く（スクロールバー）
┣　ウィンドウを開く（サイズ指定）
┣　ウィンドウを開く（複数型）
┣　ウィンドウを開く（位置指定）
┣　ウィンドウを閉じる
┣　親ウィンドウを操作する
┣　ウィンドウスクロール（縦方向）
┗　ウィンドウスクロール（横方向）

●Javascripts - Window.open 勝手にopen
<script language="javascript" type="text/javascript"><!--
function ninja() { window.open("zzz/window_open/ninja.html","","width=400,height=300") }
// --></script>
<a href="javascript:ninja()">忍者 ウィンドウ</a>

●自動オープン
ページを自動でＯＰＥＮ
 --- http://www1.odn.ne.jp/etm-pop@pipika/tips-22.htm
サブウィンドウ表示用スクリプト自動作成
 --- http://www.izumo.ed.jp/otsu-sho/study/math/tech/sub_win/sub_win.htm
小技10:小さな画像をクリックして指定の大きさの画像を表示します
 --- http://www.pkcmaiko.com/kowaza10.htm
サブウインドウ表示 JavaScript
 --- http://www.coolandcool.net/tips/java1.html

●参考
Popup Windowの実験
 --- http://www.lint.ne.jp/~tomo/actxlabo/labo/ax-popupwin.htm
とほほのJavaScriptリファレンス - 19.ウィンドウ（Window）オブジェクト
 --- http://tohoho.wakusei.ne.jp/js/index.htm
HTML & Scripts - Windows.open
 --- http://write-off.cside.com/scripts/index.html
JavaScript basic samples - ウィンドウを開く（複数型）
 --- http://www.sumnet.ne.jp/domp/jsbs/; 各種の開き方、サンプル付き
Javascript sample:第１回　ポップアップウインドウをコントロールする
 --- http://game.gr.jp/mycom/1/ ;各種パターン
禁断のウィンドウ増殖技
 --- http://www2.plala.or.jp/Cool/okite/red04.html　; popup windowsテクを実践
 script各種パターン付。　防止方法も解説。
MSDN Online Home>Columns 迷惑で押しつけがましいサイト
 --- http://www.microsoft.com/japan/msdn/columns/dude/dude04232001.asp
ポップアップ広告は「悪印象」しか与えない？
 --- http://japan.internet.com/research/20010803/1.html ;アンケート結果あり






●Metaタグ



●形式
<meta http-equiv="..." content="...">
<meta name="..." content="...">
　ここは、html文書内容の大事な情報を管理する部分。

★文字コード
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Type" content="text/html; charset=euc-jp">
<meta http-equiv="Content-Type" content="text/html; charset=iso-2022-jp">

★文書のキーワード
<meta name="Keywords" content="HTML,CGI,SSI">

★文書の概要
文書に関連する説明（description）を指定します。
<meta name="Description" content="HTMLリファレンスです">

★別ページへの自動ジャンプ

10秒後にURL=...で指定したURLにジャンプ。
<meta http-equiv="Refresh" content="10;URL=http://xyz.com/">

★トランジション指定
>ページを移動する時のビジュアル効果を指定します。→「トランジション」。
<meta http-equiv="Page-Enter"
      content="blendTrans(Duration=0.8)">
　　↓
（この効果はあまり知られていないのでチェック）
※ページ間トランジション
<head>〜</head> の間に下記のいずれかの <meta> タグを記述。
<meta http-equiv="Page-Enter"
      content="blendTrans(Duration=0.8)">
<meta http-equiv="Page-Enter"
      content="revealTrans(Duration=0.8,Transition=23)">
>Duration には効果完了までの秒数（最大30.0秒）を指定します。revealTrans() の場合は Transition で効果番号を指定可。
[blendTrans()の効果]
 固定 : フェードイン(Blend in)

[revealTrans()の効果番号]
  0 : 外から中央に箱型(Box in)
  1 : 中央から外に箱型(Box out)
  2 : 外から中央に円形(Circle in)
  3 : 中央から外に円形(Circle out)
  4 : 下から上に(Wipe up)
  5 : 上から下に(Wipe down)
  6 : 左から右に(Wipe right)
  7 : 右から左に(Wipe left)
  8 : 縦縞模様に(Vertical blinds)
  9 : 横縞模様に(Horizontal blinds)
 10 : 格子模様横方向に(Checkerboard across)
 11 : 格子模様縦方向に(Checkerboard down)
 12 : 点画的にフェードイン(Random dissolve)
 13 : 左右から中央に(Split vertical in)
 14 : 中央から左右に(Split vertical out)
 15 : 上下から中央に(Split horizontal in)
 16 : 中央から上下に(Split horizontal out)
 17 : 右上から左下に(Strips left down)
 18 : 右下から左上に(Strips left up)
 19 : 左上から右下に(Strips right down)
 20 : 左下から右上に(Strips right up)
 21 : 横縞ランダム(Random bars horizontal)
 22 : 縦縞ランダム(Random bars vertical)
 23 : 0〜22の効果をランダムに(Random)

Page-Enter の部分には下記のいずれかを指定。
Page-Enter : このページに移動してくるとき
Page-Exit : 他のページに移動するとき
Site-Enter : このサイトに移動してくるとき
Site-Exit : 他のサイトに移動するとき

●参考
とほほのHTMLリファレンス -  - トランジション
 --- http://tohoho.wakusei.ne.jp/html/index.htm




 ---




■表タグ Table

書式　TABLE border="option1" width="option2" cellspacing="option3" cellpadding="option4" bgcolor="option5"
	option1=0 | 1〜　　　　　　	border=表の外枠の幅; 0=無表示,1=表示幅
	option2=pix |%　　　　　　	width=表の幅
	option3=2 [標準]　　　　　　	cellspacing=セルとセルの間の余白
	option4=1 [標準]　　　　　　	cellpadding=セル内の余白;セルの間の枠線の太さ
	option5=#rgb | color name	表セルの背景色
　　frame="表の外枠の形式"
　　rules="表内部の罫線の引き方"
　　summary="表の概要や目的"
　　align="表の配置" 
　　height="表の高さ" 

　註）普通のケースでは、自分の場合．．．次のように表を簡単に作ります。
　　<table border=1>
　　<tr><td>xxx<td><td>xxx</tr>
　　<tr><td>xxx<td><td>xxx</tr>
　　</table>
　　(これを表示すると)

　　
xxxxxxxxx
xxxxxxxxx

　　つまり、あとは勝手にブラウザーが解釈してくれるので必要ないということ。
　　ただ、横幅の広い表は table border=1 width=100%と、widthを加える
　　　　　罫線幅や色が気になる人は cellspacing=0 bordercolor=black を加える
　　(これを表示すると)

　　
xxxxxxxxx
xxxxxxxxx

　註）表巾のピクセル指定。　この数値をいくつに指定するか？
　　　画面の解像度よるが、デスクトップだと600程度。
　　　横長のA3資料で2048で指定することもある。
【ボーダー関連属性】
属性意味
BORDER=nH3-H4(S)/e2/N2。枠線の太さを指定します。この属性を記述しない、または、0を指定すると枠線を表示しません。
BORDERCOLOR=colore2/N4。枠線の色を指定します。
BORDERCOLORDARK=colore2。立体的な枠線の暗い部分の色を指定します。
BORDERCOLORLIGHT=colore2。立体的な枠線の明るい部分の色を指定します。
FRAME=frameH4(S)/e3。各セルの上下左右の枠線について、表示する/しないを制御します。
void - 表示しない。（既定値）
above - 上側のみ。
below - 下側のみ。
hsides - 上下のみ。
vsides - 左右のみ。
lhs - 左側(Left Hand Side)のみ。
rhs - 右側(Right Hand Side)のみ。
box - 上下左右。
border - 上下左右。
RULES=rulesH4(S)/e3。テーブルの内側の枠線を表示するルールを指定します。
none - 表示しない。
groups - <THEAD>, <TBODY>, <TFOOT> で指定したグループの境界のみ。
rows - 横方向のみ。
cols - 縦方向のみ。
all - すべて。（規定値）

【背景関連属性】
属性意味
BACKGROUND=urle3/N4。背景画像を指定します。
BGCOLOR=colorH4(T)/e2/N3。背景色を指定します。

【配置関連属性】
属性意味
ALIGN=alignH3-H4(T)/e2/N2。テーブルの表示位置を指定します。
center - 中央表示(H3/e2/N4)
left - 左端表示(H2/e2/N2) (既定値)
right - 右端表示(H2/e2/N2)
CELLPADDING=nH3-H4(S)/e2/N2。枠線とセルの内容の間の隙間をピクセル単位で指定します。
CELLSPACING=nH3-H4(S)/e2/N2。内枠の太さを指定します。0を指定すると、立体感の無い枠線を表示することができます。
HEIGHT=ne2/N2。テーブルの高さをピクセルまたはパーセンテージで指定します。
HSPACE=nN2。テーブルの周りの横方向の余白をピクセル単位で指定します。
VSPACE=nN2。テーブルの周りの縦方向の余白をピクセル単位で指定します。
WIDTH=nH3-H4(S)/e2/N2。テーブルの横幅をピクセルまたはパーセンテージで指定します。

【その他属性】
属性意味
COLS=ne3/N4。列数を指定します。この属性を指定することにより、テーブルの表示速度が若干速くなる場合がある。
DATAPAGESIZE=sizee4。データバインド機能を用いる際の、レコード数を指定します。
DATASRC=datasrce4。データバインド機能を用いる際の、データソースのIDを指定します。
SUMMARY=summaryH4(S)。音声読み上げブラウザなどのために、この表の目的や構成の説明を記述します。

【一般属性】
属性意味
CLASS=classH4(S)/e3/N4。クラスを指定します。
DIR=dirH4(S)/e5。文字の表示方向を指定します。
ID=idH4(S)/e3/N4。IDを指定します。
LANG=langH4(S)/e4。言語を指定します。
LANGUAGE=languagee4。スクリプト言語を指定します。
STYLE=styleH4(S)/e3/N4。スタイルシートを指定します。
TITLE=titleH4(S)/e4。タイトルを指定します。
 from ●とほほのWWW入門:HTMLリファレンス - TABLE



●TRタグ



●表中のテキスト  TR	Table Row(横列)
TR ALIGN="option1" VALIGN="option2"	表の列
option1=left | center | right 
option2=top | middle | bottom | baseline
例：align=left/center/right valign=top/middle/bottom

【ボーダー関連属性】
BORDERCOLOR=color	枠線の色を指定
BORDERCOLORDARK=color	立体的な枠線の暗い部分の色を指定
BORDERCOLORLIGHT=color	立体的な枠線の明るい部分の色を指定
【背景関連属性】
BACKGROUND=url	背景画像を指定します。
BGCOLOR=color	背景色を指定します。
【配置関連属性】
ALIGN=center/left/right 	セル内データの横方向の配置を指定
HEIGHT=n	セルの高さをピクセルで指定
VALIGN=baseline/bottom/center/middle/top	セル内データの縦方向の配置



●TDタグ



●セルの幅　　　 	Table Data Cell
TD ROWSPAN="縦の数"
TD COLSPAN="横の数"
例：align=center valign=bottom width=80% height=30%
bgcolor=#123456
TD NOWRAP	※自動改行をさせない
ROWSPAN=n, COLSPAN=n, NOWRAP, ALIGN=left/right/center, VALIGN=top/middle/bottom, WIDTH=n, HEIGHT=n

【ボーダー関連属性】
BORDERCOLOR=color	枠線の色を指定
BORDERCOLORDARK=color	立体的な枠線の暗い部分の色を指定
BORDERCOLORLIGHT=color	立体的な枠線の明るい部分の色を指定
【背景関連属性】
BACKGROUND=url	背景画像を指定します。
BGCOLOR=color	背景色を指定します。
【配置関連属性】
ALIGN=center/left/right 	セル内データの横方向の配置を指定
HEIGHT=n	セルの高さをピクセルで指定
VALIGN=baseline/bottom/center/middle/top	セル内データの縦方向の配置
WIDTH=n 	セルの横幅をピクセルで指定
　註)width属性で指定したセル幅の合計がブラウザ画面のサイズを越えてしまった場合は、
ブラウザによる自動調整と言う指定になっています。
　　同じColumn（縦列）にある他のセルが必要なサイズ（幅）よりも小さい場合は無視されます。

【セル連結関連属性】
COLSPAN=n 	セルを n個、横方向に連結
ROWSPAN=n 	セルを n個、縦方向に連結



●THタグ



●TH 項目名用のセルを作る。	Table Header Cell
例：<TH>penguin</TH>
ROWSPAN=n, COLSPAN=n, NOWRAP, ALIGN=left/right/center, VALIGN=top/middle/bottom, WIDTH=n, HEIGHT=n
THタグとTDタグはどちらもTR (Table Row)の中でセルを作る際に使用されますが、 THは
ヘッダー・セルに使われ、 TDはデータ・セルに使われます。どちらもクローズ・タグは
オプションです。 THではテキストはセルのセンターにボールド体で表示されることが多いようです。
アトリビュートについてはTDエレメントのページを見てください。THとTDのアトリビュー
トは同じものです。 

<TH>〜</TH> に囲まれたものは通常、中央寄せになりますが、Netscape 6 
ではテーブルのみ、中央寄せにならないというバグがあるようですので、注意してください。




●Colspan, Rowspan



属性：Colspan
属性値：number
必要性：省略可
説明： 
複数のセルを行方向に結合するものです。結合するセル数を指定します。 既定値は「1」
で、「0」を指定した場合、そのセルから右の列全てを結合することになります。 ただし
「0」で結合するセルは、COLGROUP要素 で括られている範囲に限定される。(HTML4.01) 

属性：Rowspan 
属性値：number
必要性：省略可
説明： 
複数のセルを列方向に結合するものです。結合するセル数を指定します。 既定値は「1」
で、「0」を指定した場合、そのセルから下の行全てを結合することになります。 ただし
「0」で結合するセルは、THEAD要素,TFOOT要素,TBODY要素 で括られている範囲に限定される。(HTML4.01)

行がまたがるときはROWSPAN、列がまたがるときはCOLSPAN。
属性値はまたがるセルの数。

【使用例】
HTMLソース
<TABLE BORDER=4 WIDTH=250 ALIGN=center>
 <CAPTION>【テーブルの例】</CAPTION>
 <TR BGCOLOR="#CCCCCC">
  <TH><BR></TH>
  <TH>列-A</TH>
  <TH>列-B</TH>
  <TH>列-C</TH>
 </TR>
 <TR ALIGN=center>
  <TD>行-1</TD>
  <TD>A1</TD>
  <TD>B1</TD>
  <TD ROWSPAN=2>C1-C2</TD>
 </TR>
 <TR ALIGN=center>
  <TD>行-2</TD>
  <TD>A2</TD>
  <TD>B2</TD>
 </TR>
 <TR ALIGN=center>
  <TD>行-3</TD>
  <TD>A3</TD>
  <TD COLSPAN=2>A3-B3</TD>
 </TR>
</TABLE>

ブラウザ表示例
【テーブルの例】

列-A 列-B 列-C
行-1 A1 B1 C1-C2
行-2 A2 B2
行-3 A3 A3-B3 
【セルの連結】
セル（表の桝目）は、<TH>や<TD>タグのCOLSPAN属性やROWSPAN属性を用いて、
横方向、縦方向に連結することができます。
 from ●とほほのWWW入門:HTMLリファレンス - TABLE



●表の実例



　WEBサイトでの表は、必ずしも統計表や一覧表に使用するだけのものではない。
　特にWEBサイトのポータルページで重要な役割を果たす。
　一時流行したFrameはしつこい、鬱陶しい、flash動画は無意味でムダな時間がいらいら
させると嫌われたりする。
(3分間の料金)
アメリカ(1)
日本(81)
ただTEL 無料無料

【テーブルの例】

列-A 列-B 列-C
行-1 A1
-A4		 B1-C1
行-2 B2 C2
行-3 B3 C3
行-4 B4 C4

【テーブルの例】

列-A 列-B 列-C
行-1 A1
-A4		 B1-C1
行-2 B2 C2
行-3 B3 C3
行-4 B4 C4 




●表でよく使う表現タグ



●上付、下付
[上付] 形式 <sup>〜</sup> 
* sup は SUPerscript（上付きの）の略
例：　A penicillinase-resistant penicillin<sup>2</sup>
例：　A penicillinase-resistant penicillin2

[下付] 形式 <sub>〜</sub> 
* sub は SUBscript（下付きの）の略

●特殊文字（表には限らないが）


------- 重要特殊文字一覧 -------

注1）文字表記は必ず小文字で記述。


No.
	文字表記
	10進表記  
	16進表記 
	文字
	コメント


001   &quot;  &#34; &x22;""" クォーテーション


002   &amp;   &#38; &x26;"&" アンパサンド


003   &lt;    &#60; &x3C;"<" 小なり     


004   &gt;    &#62; &x3E;">" 大なり     


005   &nbsp;  &#160;&xA0;" "空白       


006   &copy;  &#169;&xA9;"©"コピーライト


007   &cent;  &#162;&xA2;"¢"セント     cent sign


008   &pound; &#163;&xA3;"£"ポンド     pound sign


009   &curren;&#164;&xA4;"¤"           currency sign


010   &yen;   &#165;&xA5;"¥"円         yen sign = yuan sign


252   &euro;  &#8364;&#x20AC;"€" ユーロ    euro sign

019   &reg;   &#174;&xAE;"®"登録商標registered sign = registered trade mark sign


022   &plusmn;&#177;&xB1;"±"           plus-minus sign = plus-or-minus sign


023   &sup2;  &#178;&xB2;"²"平方       superscript two = superscript digit two = squared


024   &sup3;  &#179;&xB3;"³"立法       superscript three = superscript digit three = cubed


025   &acute; &#180;&xB4;"´"           acute accent = spacing acute


026   &micro; &#181;&xB5;"µ"マイクロ   micro sign


033   &frac14;&#188;&xBC;"¼"1/4        分数


034   &frac12;&#189;&xBD;"½"1/2        分数 one half


035   &frac34;&#190;&xBE;"¾"3/4        分数 three quarters




 from HTML特殊文字一覧[パワーソフト]



●参考



とほほのWWW入門:HTMLリファレンス - TABLE
 --- 解説、書式、見本つき。　属性も完全にカバーしていると思われる。
TAG Index: Table Tag
HTML->LEC TABLE - テーブル講座
 ---いろんなパターンの表の作り方。　文字説明
tablein A Primer to HTML
 --- 解説,書式つき　文字説明+表示
表組み in Html Reference
 --- 解説つき　文字説明+表示
Table要素 in htmlタグ一覧表
 --- 解説つき
Guide to HTML 3.2: table
 --- 理路整然とした完全解説。
HTML概説リファレンス:テーブル要素（table,tr,td,タグ等）の概説
HTML:Table
WEB119
 --- 説明がしっかりしている
TABLE生成時における留意点





●エラーメモ

　表や項目の巾が指定どおりにならない場合がある。
　そんな時 table, tdのwidth指定を絶対指定と相対指定を混在いないか疑う







■html技法

●画像や文字を重ねる技法




●参考
All About[ホームページ作成]画像上の自由な位置に字を重ねる
 - StyleSheetを使う方法
[超初心者のホームページ作成] 画像の重ね合わせ（合成）について
 - テーブルやセルで背景画像を使用
画像の配置に関してのスタイルシート具体例
 - 
スタイルシート（CSS） 画像の重ね合わせ・重ねる順番指定
 - 
[月刊Web Creator]
 - [WEBデザインTIPS & TRICS第12回]画像を重ねる
 - 
[Word/Excel]画像ファイルやテキストボックスの挿入・操作
 - 

 - 




●表中文字サイズを小さくする方法



実践スタイルシート
 - いろんなパターンの実験をしています。わかりやすい解説と推奨。

TD要素を固定でサイズ定義してしまう
<STYLE type="text/css">
<!--
TD { font-size:12px; }
--> 
</STYLE> 

<FONT size=2>
<TABLE border="1">
	<TR> 
		<TD>ああああああ</TD>
		<TD>いいいいいい</TD>
		<TD>うううううう</TD>
	</TR>
	<TR>
		<TD>ええええええ</TD>
		<TD>おおおおおお</TD>
		<TD>かかかかかか</TD>
	</TR>
</TABLE>
</FONT>







■htmlリンク作成支援ツール

　ここでは、Frontpage等のWEBエディターではなくて、主にリンク集などのDB化を念頭に
置いている。


●リンク集・リソースガイドに対する考え方



　自分でリンク集・リソースガイドを数多く作ってきた。
　範囲が広いため、問題が発生する。

　1)リンクを作成すべきか？
　作成後、１〜２年経過すると、リンク切れが多く発生するようになる。
　つまり更新維持に手間がかかるのだ。　それだけの意味があるのか？

　2)リンクの深さは？
　アプリケーションの多種多様さをはるかに超えて、ホームページの作り方は多様。
　他人の作ったページは、実に利用し難い。
　で、ついつい情報を加工したくなる。
　手間がかかる。　で、泥沼状態に陥りがちになる。

　3)資料収集のためのリンク
　新しいテーマを調べる場合、予備知識がないので、当初は情報の評価ができない。
そのため情報収集も非効率な状態でスタートする。

　●今後の方針
 1) 既製リンク集を探す。　	...ない場合は、簡単な予備リンクを作成。
 2) 予備調査を開始　　　　	...全体の把握を行う
 3) 本格調査を実施　　　　	...簡潔な報告+主要リンク(コメント付き)

　●DBの扱い
 1) Access, Excel等に収集した資料は、本来そのまま再利用する。(html変換しない)
 2) 目次のみhtmlに作成。　asp等により本文検索で利用する。



●リンク集作成支援ツール



●Linklink　Ver.0.92a
 --- サイトメンテナンスの効率を上げる定型HTML作成支援ソフト 
Windows 98/95　フリーソフト
Linklinkでポイントとなるのが「Format」タブの編集欄と下のデータ入力欄 

定型的な書式で書かれたHTMLを、データとそれ以外の部分（デザイン）に分けて管理することにより、メンテナンスの効率化を図る定型HTML作成支援ソフト。定期的更新が必要なHTMLの修正に威力を発揮する。 

Linklinkでは「プロジェクト」単位でHTMLを管理するが、その中で変更の可能性の低い部分を「テキスト」、データ更新などで修正が頻繁に起こる定型のデータ部分を「テーブル」(表形式で管理)と呼ぶ。
　CSV経由のインポート機能あり。

●SiteMapper
 ---Windows95/98/Me/2000NT　シェアウェア 6,000円,汎用　by Trellian Australia Pty Ltd
 発売:20-Jul-2001
HPを分析をし、ページやカタゴリー別に全てをインデックス化したリスト付きの詳しいマ
ップを作る
SiteMapper 1.04.004
smapr104jp.exe 1,389K 2001.7.26
期間の制限はなし。但し、確認可能なリンク数に制限あり。

●[Share][Sreg]（1,000円)KILKengin 0.3　HTMLファイルのリンクタグを抽出し検索エンジンを作成　(28K)

●用語集・リンク集作成支援ツールWord Bank Ver.1.2.2(\1000)
 --- 用語集を作るのに最適だと思う

●中小リンク集作成ツールの決定版Link Page Workshop
 --- Directory型リンク生成tool。　ジャンル毎にリンクアイテムを統合管理。
リンクアイテムには、タイトル、タイトル読み仮名、作者名、作者名読み仮名、作者連絡
先 E-mail アドレス、ページ URL、バナー URL、バナーピクセルサイズ、アトリビュート、
コンテンツ、コメント、更にシリアルナンバーの情報を設定することが出来ます

●! リンク集作成支援ツール[オークニ・プラン]
 --- DB型。　[URL欄]アドレス [コメント欄] コメント等を入力
・htmlタグもそのまま記入可。　Box内文字列単位で改行<br>タグが挿入。文字列の先頭
に’+’を記述すれば<br>は挿入されません

●Link Helper 0.80
 --- Free ; リンクページなど同じ情報が続くページの作成を支援するソフト　(175K)
●LinkListWrite 1.0
 --- Free; HTMLは書けないけどLINK集を作りたいあなたへ　(122K)
●LinkPageDesigner 2.07
 --- Shareware \1,000; HTML形式のリンク集を作成　(482K)





●リンクページ自動生成



●我のために環を作れ〜ホームページに使用するリンクページのHTMLを、自動で作成
 --- Windows95/98/Me> インターネット＆通信> HTML作成> 作成支援ツール>  by Tamami
主な機能は
1.カテゴリ別の管理(お友達リンク、便利リンク等)
2.入力されているHPが存在するか、デッドリンクチェック
3.入力された情報から、自動でリンクページのHTMLを作成
詳細はHPへどうぞ
http://members.tripod.co.jp/m_image/





■Excel(Xls)→html



[Share][Sreg]（1,000円)[New]KIexplorer 0.8
　---Excelシートに記述したリンク表をエクスプローラ風のHTMLファイルに変換　(106K)
[Share][Sreg]（1,000円)KIweb 2.22
　---Excelワ−クシートをシ−ト単位でHTMLへ変換　(69K)



●→XML



●simple XML
 ---Win98/2000 ; Free by 丸本 徹
CSVファイル、もしくはMSAccessのクエリー、テーブルからXMLを自動生成します。
　クエリーで作成した任意のデータをXMLに変換。　テーブルをそのままXMLに変換。
　CSVをXMLに変換。　タグ名はデータベースの列名から自動で作成。
　CSVの変換では、任意で指定可能。
　または、置換機能を用いて、タグ名の一括変換も可。
　エディターでビジュアルにソースを表示、編集可能。
　面倒なインストールは必要ありません。 
simple XML 1.21	sXML1.21.exe 1,702K 2001.3.18
[Vector]Windows95/98/Me> インターネット＆通信> HTML作成> XML>

●ConvertDB〜MDBファイルをXMLファイルにコンバート
 ---Win95/98/Me/NT ; シェアウェア 3,000円  by 濱中 洋一
ConvertDB 1.0	ConvertDB.lzh 2,153K 2001.1.10
ライセンス登録されていない場合、XMLファイルの保存が出来ません。
[Vector]Windows95/98/Me> インターネット＆通信> HTML作成> XML>


●DB2XML〜データベース、Excel、CSVファイルからXML文書を作成するGUIソフトウエア
 ---Win95/98/NT ; シェアウェア 1,200円  by 仁くん
DB2XMLはODBCを使ってOracle、SQL Server、MS Access等のデータベースからXML文書を作
成するWindows用のアプリケーションです。
DB2XMLは以下の特徴があります:
1.GUI操作又はSQLコマンドで元となる表と列の選択ができます。
2.データベースの他にもExcelやCSVファイルからもXML文書を作成できます。
3.XML文書を作成する他にもDTD又はSchemaの作成が可能です。
4.作成したXML文書にXSLスタイルシートを適用して、その結果をHTMLで表示することもできます。
5.XML、XSL、及び変換結果をWebサーバを介してOracleデータベースに挿入することもできます。
6.作成したXML文書をMS Excel2000及びMS Word2000のHTML形式で保存できます。作成され
るHTMLファイルは直接MS Excell2000及びMS Word2000から開けます。
7.XML文書をBLOB形式でMS Accessに保存して、その文書を再びDB2XML読み込めます。 
DB2XML 2.0.3	db2xml.zip 3,859K 2001.3.5	必要なソフト　MSXML3
　1週間の試し期間。機能の制限はなし。　その後の使用はユーザ登録が必要





●その他




■HTML作成支援ツール

 From Vector: Windows95/98/Me > インターネット＆通信 > HTML作成
Vector: Windows95/98/Me > インターネット＆通信 > HTML作成 > 作成支援ツール[88]



●HTML自動生成



●CSVループコンバータ 1.02 by jozefin
 -- Free; テンプレートファイルとCSVファイルからHTMLファイルを生成　(79K)
 テンプレートファイルにCSVファイルの各項目を順次はめ込んで行くソフトです。
テンプレートファイルの一部をループさせて、同じ形のタグで一部が違うものが作れます。
リンク集など同じタグを繰り返すようなページを作るのに、最初にテンプレートファイル
を作っておけばデータベースとなるCSVファイルから違う部分だけをはめ込むことが出来ます。

●ピクセル
JavaScript・DHTMLを使用したHPの自動生成システム
 フォームへ入力するだけでファイルが生成・表示される。
　JavaScript・ダイナミックHTMLなどの記述を覚えなくてもサンプルのようなページをこ
のサイトで自動生成できます。メニューのAutoCreaterから起動します。
　このサイトの運営にあたってはスクリプトなどを覚えなくても「誰でも簡単に…」を心
がけております。それとスクリプトのわかる方も作成の手間が省けると思います。
　また、ＨＴＭＬタグ辞典・ＨＴＭＬテクニックものぞいてください。
 その他、HTMLタグ辞典や・ダイナミックHTML・JavaScript研究室などもあり。





●HTMLエディター



●Active Html Maker for IE5.0 Ver.1.20 by KySS
 --- (1,000円／税別) ; 初心者もラクラク！DynamicHtmlのページも作れる！XMLサンプル1点付き。
ダウンロード
WYSIWYG形式の楽しいHTMLエディタです。
ブラウザと同じ画面上に、画像や文章をレイアウトしていくだけです！
フォントや色、文章や画像の配置も、ワンタッチ。
表組みや、リスト、フォーム、フローティングフレーム、マーキーも、タグを意識する必要はありません。
さらに、このページに使っているようなDynamicHTMLを使ったタイトル文字も、スクリプ
トを意識することなく作成できます。
また、ポジショニングにも一部対応、画像の上に表を重ねたり、文字の上に画像を重ねた
りといった、重ねあわせが、ボタンをクリックするだけで、できてしまいます。
※本ソフトでは、XMLデータを検索表示させるHTMLファイルも、レイアウトできます。 


●HTML Maker AZUKI 1.60 by 森川 元也
 --- Free; Windows 95/98/2000/NT4.0; hmk160.lzh 998K 2000.3.19
 HTML作成ソフトウェア(JavaScriptのサンプル、リファレンス付き)
 --- 作者は、JavaScriptサンプル集も作成
特徴:
1.ホームページ作成ソフト。 
2.タグ挿入型 
3.DDE ( Dynamic Data Exchange )による、編集ファイルのブラウザ確認が可能。 
4.S-JIS、JIS、EUCの文字コードに対応。 
5.ファイルビュー、デバッグビューによる作業の効率化。 
6.タグの色分け。 
7.HTML文法チェック機能。 
8.ローカルファイルのリンクチェック機能。 
9.画像ファイル(GIF、JPG、PNG)のサイズ自動検出。 
10.作業中ファイルのアップロードが可能(FTP)。 
11.JavaScriptのサンプル、リファレンス（ HTML形式 ）が付属。 
12.インストール、アンインストール対応。 
13.LinkSonarを起動しリモートファイルのリンクチェックが 可能。 
14.Map Maker AZUKIによるクリッカブルマップの作成。 
15.画像ファイル（GIF、JPG、PNG）のカタログHTML作成機能。 
16.タグの再編集機能。 
17.内部ブラウザ実装。 

●HTML Browser AZUKI 1.09 by 森川 元也
 --- Free; Windows 95/98 ; hbrowse.lzh 154K 1999.3.20
 --- 秀丸でHTMLを作成している人向けツール
秀丸で作業中のファイルをIE、Netscapeでブラウズさせるためのツールです。
特徴
1.DDEに対応。
2.タグの挿入が可能。
3.カラーパレットから選択した色が挿入できる。
4.ファイルダイアログからリンクの挿入が可能。
5.GIF、JPGの画像サイズを自動検出して、リンクとして挿入することができる。
またEmEditorに対応した「HTML Browser AZUKI EmEditor版」も作者のホームページにあります。ただしEmEditor版はブラウザー表示機能のみです。





●表作成



●Table Maker AZUKI 1.06 by 森川 元也
 --- Free; Windows 95/98/NT4.0 ; tma.lzh 233K 2000.2.26
 Excelの作業中データをHTMLの表構造に変換するツール
　1.HTMLの表作成ソフト。
　2.Excelで作業中のデータをHTMLの表に変換。
　3.HTML Maker AZUKIにダイレクトでデータの転送が可能。
　4.内部ブラウザで確認が可能。





●リンクツリー



HomePaging 2.01 by 朝倉 大成
 --- Free; ローカルディスク内のHTMLを構造解析しツリー表示とリソース一覧を作成　(1,946K)





●クリッカブルマップ



●Map Maker AZUKI 1.05 by 森川 元也
 --- Free ; クリッカブルマップ作成ツール； mma.lzh 280K 1999.4.21
1.HTMLのクリッカブルマップ作成ツール。 
2.GIF、BMP、PNG、JPGのフォーマットに対応。 
3.ドッキングウインドウに編集結果を表示。 
4.編集結果をHTML Maker AZUKIにダイレクトに転送することが可能。 
5.画像を2倍表示して編集することが可能。
6.画像ファイルをGIF、BMP、PNG、JPGのフォーマットに変換可能。





●CSS作成



スタイルシート・メイカー 1.00 by 楼雅 在土
 --- Free; スタイルシート(cssファイル)作成　(16K)xs_ssm.lzh 16K 2000.6.12
必要なソフト　VB6.0ランタイム
 ちなみにスタイルシートとは、ページの色などの修飾の設定をするもの。
いろいろと出来るのでとりあえず手当たりしだい試してみよう♪





●特定フレーム作成



●フローティングフレーム作成
HTMLのページの中に、さらにページを表示するフローティングフレーム(フレームの中に
フレーム)を生成するソフト
フロートメーカー by 佐々木 康史
 -- Free; HTMLのフローティングフレームを生成


●ターゲットフレーム作成
左側の窓のテキストをクリックすると、右側の窓にリンク先のイメージや、HTMLファイル
が表示される、ターゲットフレーム

ターゲットフレームメーカー 1.2 by 佐々木 康史
 --- Free; HTMLのターゲットフレーム作成ソフト　(24K)





●スクリプト作成支援



●CGI作成支援
HTML2CGI 1.00
 --- HTMLファイルから、それを結果として出力するCGIプログラムの自動生成　(217K)

●JavaScript,DHTML, CSS
Javasc by 山腰 弘
 --- Shareware \1,000 ;JavaScriptやDHTMLを含むHTMLファイルをタグ知識なしで作成できるHTMLエディタ
 JavaScriptやDHTMLのスクリプトを、60種類以上搭載しています。
さらに細分化すれば200種を軽く超えます。
ごく普通のHTML作成は右クリックで、簡単にタグを挿入できます。
加えて、グラデーション作成(完全ビュー機能付き)機能、縦書き変換、ブラウザで動作確認した後、気に入らなければ、ワンクリックで元のコードに戻す機能。
複雑なフレームページ作成(最大16分割)。
クリッカブルマップ作成、ビジュアルフィルター機能の充実、トランジション機能、ダイレクトアニメーション等々
JPLUS機能(プラグイン)機能を使う事により必要な機能だけをインストールできます。
詳しくは、作者のホームページをご覧下さい。 
※[スクリプト作成]
縦書き文字 
グラデーション文字 
点滅文字 
文字Filter 
文字フェードイン、フェードアウト 
文字クィックイン、クィックアウト 
文字AutoShow 
文字ダイレクトアニメーション 
立体文字作成 
文字マーキー 
マウスが触れたら画像が変わる 
画像Filter 
画像フェードイン、フェードアウト 
画像クィックイン、クィックアウト 
画像AutoShow 
画像アルバム作成 
画像ダイレクトアニメーション 
クリッカブルマップ 
クリッカブルマップ(テキストボックスにマップの指定領域の説明１行) 
クリッカブルマップ(テキストエリアにマップの指定領域の説明を複数行) 
画像を指定した日付まで表示する 
画像にマウスイベントでダイアログメッセージ 
画像マーキー 
画像点滅 
時間によって変わるメッセージ 
日にちによって変わるメッセージ 
曜日によって変わるメッセージ 
１行メッセージ(テキストボックス、ステータスバー) 
今日は何月何日、何時何分 
ページを開いてからの経過時間 
記念日まであと何日 
今日は何の日 
指定した日付までメッセージを表示 
ページに入室したらダイアログメッセージ 
文字列をマウスイベントしたら、ダイアログメッセージ 
文字列にマウスが触れたらポップアップメッセージ 
カレンダー作成 
棒グラフを作る 
データバインディング 
テキストファイルをテーブルに変換 
クリップボードデータをテーブルに変換 
文字にマウスが重なったらリンク先の説明を指定領域に表示 
文字にマウスが重なったらリンク先の説明をBOXに表示 
画像にマウスが重なったらリンク先の説明を指定領域に表示 
セレクトフォームを使ってリンク先を選ぶ 
簡易パスワードを使って仲間だけがリンク先へ移動 
サブウィンドウ 
ポップアップリンクメニュー 
テーブルレイアウト作成 
ページ移動時にトランジション 
ページ更新日を日本語で表示 
パスワードを入力しないと入室できないページ 
その他、コピー＆ペーストだけで利用する簡単なスクリプトコードを１０種 





●文章作成支援



S0-Ra(ソラ) by 策略架
 --- Free ; GUIによるWEB絵本、WEB小説、WEB分岐小説作成エディタ





●WEB素材



●デザイナーズソフト仁
　非常に面白い素材・ソフトがある
js顔文字 | 絵文字 | 動く文字

　　ソフト | ｉモード  | リンク

●Emojiya〜絵文字







●HTML関連リソース


■リソースガイド

●HTML[All About Japan]



 ---
HTML仕様
HTMLリファレンス
HTMLの基礎知識 | HTMLの基礎知識 (英語)
●HTMLタグ解説：全体
HTMLタグ解説：テキスト | HTMLタグ解説：画像 | HTMLタグ解説：テーブル
HTMLタグ解説：フォーム | HTMLタグ解説：フレーム | HTMLタグ解説：その他
ブラウザー
HTMLエディター
HTML便利ツール
HTMLの関連書籍
他の言語
WEB制作会社
HTMLを学べる学校



●BizTech WebGuide - HTML



 ---
リファレンス(24件) - HTMLの仕様
XHTML(12件) - XHTMLの仕様，解説など
入門/文法(14件) - ページ作成に必要最小限な知識のほか，HTML文法を自動チェックするページなど
エディター(10件) - HTMLエディター
Dynamic HTML(8件) - Dynamic HTML関連ページ
携帯電話向けホームページ作成言語(11件)
 - Compact HTML，HDML，WAPなど，携帯電話で閲覧するホームページを作成するための言語に関するページ
CGI(4件) - CGI作成のテクニックやサンプル
アクセス数向上/デザイン/素材集(8件)
 - デザインに関する説明，ページ作成で利用できる画像などの素材，アクセス数を高めるためのテクニック
リンク集(4件)



●リンク集



HTML Tips（HTMLの書き方、素材リンク集 等)[Tomy]
 --- http://www5.airnet.ne.jp/tomy/knowhow/html.htm ; 各用途別リンク





●ニュースサイト



HotWired Japan : Webmonkey : WEB101 - 米国ニュース[日本語版]
HotWired Japan : Webmonkey : dynamic_html - 米国ニュース[日本語版]
HotWired Japan : Webmonkey : html - 米国ニュース[日本語版]
HotWired Japan : Webmonkey : Perl - 米国ニュース[日本語版]
HotWired Japan : Webmonkey : Animation - 米国ニュース[日本語版]




■HTML解説サイト

●解説１



HTML Tag Reference
 --- http://www.t3.rim.or.jp/~k-m-/html/ ; sample, 書式、IE/NN対応と行き届いて
 いて一押しです。カラーパレットもあり。

HTML入門
 ---by Kenji Yasaka <t93287nt@sfc.keio.ac.jp>(1995/6/1 編集)
９００行程度１ファイルにまとまっているのがコンパクトで便利。
「A Begginer's Guide to HTML」(1994)/ NCSAを日本語訳したものです。

What is WWW?  in JAPANESE
 ---[ＷＷＷノススメ(初心者向けガイド)]
HTML作成マニュアル
 ---by  武藤 健志；かなり正確で各項目毎の例示解説もわかりやすく丁寧です。
 VRML(Virtual Reality Modeling Language) FAQ
 ---日本語訳 by Yukio Andoh





●解説２



hp-design.net: html
 ---HTML->LEC TABLE - テーブル講座などいろんなパターンの作り方。　用例が豊富
A Primer to HTML
 --- tableなど解説,書式つき
Html Reference
 --- 表組み など解説つき
htmlタグ一覧表
 --- Table要素など解説つき
Guide to HTML 3.2[Umejam]
 --- tableなど理路整然とした完全解説。
HTML概説リファレンス[ストリクトなHTMLの基礎講座]
 ---テーブル要素（table,tr,td,タグ等）の概説などオプション説明も完全。
KeepTheFaith/HTML
 ---HTML:Table[7p]などオプション説明も完全。　用例が豊富
Web作成のヒント
 ---ページ幅の検討など表示関係の解説




●素材集


■素材集サイト

●リンク集



●Yahoo! Japan コンピュータとインターネット > インターネット > WWW > ホームページ作成 > グラフィックス、素材

●Yahoo! JAPAN - コンピュータとインターネット >インターネット >WWW >ホームページ作成 >グラフィックス、素材
●Yahoo! Japan > コンピュータとインターネット > インターネット > WWW > ホームページ作成 > グラフィックス、素材
●Yahoo!コンテンツ
Yahoo!コンピュータ - デジタル素材
●Yahoo!カテゴリ
Flash (9)
アイコン (134)
クリップアート@
背景 (66)
リンク集と総合情報 (10)

●Yahoo! Japan:グラフィックス、素材>リンク集と総合情報 (10)

informationCenter蘭
 - ジャンルやファイルサイズごとに分類した素材リンク。
	--- その他：ポイントアクセサリのピン、その他
	--- 壁紙：ノート

MATERIAL SEARCH
 - 女性向け素材サイトの登録式リンク集。
Web Satellite
 - 素材、CGIの配布サイトのランキング。
World free icons LINKS
 - 世界中の素材集へのリンク。
WEB MATERIAL NAVIGATOR
 - サイト名、ジャンル別検索。
加工自由な素材屋さんRING
素材共同組合
 - 会員制の登録式リンク集。
素材データベース
 - アイテム、雰囲気、カラー別。
素材ファン
 - 登録式リンク集。素材制作のアドバイスも。
素材屋ランキング
とくまるのほ〜むぺ〜じＷＷＷ素材集
 --- 174サイト。　検索可

 --- 

 --- 

●海外サイト
Google :Industries > Arts and Entertainment > Photography > Stock 
 --- http://directory.google.com/Top/Business/Industries/Arts_and_Entertainment/Photography/Stock/
 10 以上のサイト。　主に写真

Google :Computers >Graphics >Clip Art
 --- http://directory.google.com/Top/Computers/Graphics/Clip_Art/ ;サブ分類、関連分類も参照

Google :Computers/Graphics/Web/Free/Animated_GIFs[185]
 --- http://directory.google.com/Top/Computers/Graphics/Web/Free/Animated_GIFs/
Google :Computers/Graphics/Web/Free[1068]
 --- http://directory.google.com/Top/Computers/Graphics/Web/Free/
Google :Computers/Graphics/Web/Banners[78]
 --- http://directory.google.com/Top/Computers/Graphics/Web/Banners/
Google :Computers/Graphics/Web/Flash[24]
 --- http://directory.google.com/Top/Computers/Graphics/Web/Flash/
Google :Computers/Graphics/Web/Directories[46]
 --- http://directory.google.com/Top/Computers/Graphics/Web/Directories/ ;コレクションサイトが多い
Google :Computers/Graphics/Web/Templates[73]
 --- http://directory.google.com/Top/Computers/Graphics/Web/Templates/
Google :Computers/Software/Graphics/Image_Manipulation[52]
 --- http://directory.google.com/Top/Computers/Software/Graphics/Image_Manipulation/
Google :Computers/Graphics/Web/Free/Page_Elements[236]
 --- http://directory.google.com/Top/Computers/Graphics/Web/Free/Page_Elements/





●素材検索サイト



●MediaBuilder
 --- 50,000 web designs and 120,000 animationsのサイト; 年会費$39.95で無制限の利用
 ; 表示が遅いのが欠点; しかしレベル的には非常に優秀
★無料画像
 Backgrounds, Bar, Button, Bullets(小ボタン), Divider[多様な分離バー], Elements[バナー等], Icons, interfaces[面白いメニュー等], Menus, Photoclips, Strip horizontal[横棒], Themes [バナー/横線] 。　各編集可能(size, 色,効果、Text挿入)で、Javascript付きなど
	Dividers〜Ballタイプが面白い
	Menu〜Rounded Bars[bluesquare] /Ballset [bar_blue]がいいかな？
★無料ツール
 Gifworks / 3D Text Maker/ Postcard Maker
★製品
 Animations /Presentations /3D Software
	
	

●FreeGraphics.org
 --- http://www.freegraphics.org/index2.html ;分類別 Button(1860) , Banner template(290)
 	Over 3000 images to use on your website without linking back. With inter
 	faces, buttons, bars, bullets, and signs.
 	普通のメニューに使う無地ボタンやバナーは揃っている

Draeconin's Background Designs
 --- http://members.tripod.com/Draeconin/ ;　よくわからん、xxx
	Over 3000 free, original background tiles. Seamless tiles, side-borders,
	 top-borders, buttons, rules, and art. [Best viewed with Microsoft IE]

●Free Web Graphics Center
 --- http://kevin.rockcomputerma.com/ ; 大量で良質の素材。　配列が名前順なのが残念
 	[背景] [アイコン] [ボタン] [線] [アニメGIF]
	5000 web graphics include animated GIF, lines, tiled backgrounds, button
	s, and icons

●Cool Archive
 --- http://www.coolarchive.com/ ;
	LOGO Generatorでロゴをonline生成(1回毎にE-Mailを記入しsubmitする必要があり、その前の画像確認ができない)
	Button Makerでバナー・ボタンをonline生成(30種)
	Gif Animation〜300以上
	Free archive of 1000+ clipart, 4000+ icons, 950+ fonts, animations, soun
	ds, applications, html and photoshop tips, plus an online Button Maker
	 and Logo Generator to create your own graphics.

ProDraw Graphics
 --- http://www.prodraw.net/ ;
	Thousands of free graphics include award-winning cartoon clips, 3D galle
	ry, web buttons, free for all links page, animation GIFs and free tools 
	needed to create cool graphics

Renza Web Gallery and HTML Help
 --- http://www.renza.com/ ;
	Offering over 2000 web images of animation, arrows, backgrounds, bullet
	s, buttons, counters, dividers, icons, logos, and web help discussion boards

The Free Graphics Store
 --- http://www.ausmall.com.au/freegraf/freegrfa.htm ;
	Australia's largest source of free web graphics, backgrounds, strip back
	grounds, bullets, lines and pointers, web software and add-ons to help 
	you build great web sites quickly and easily.

Stanfords
 --- http://sanfords.net/Spot/photo.htm ;
 	Over 350 pages of free graphics in easy to find categories
A Lil Bit Country Graphics
 --- http://thefollowells.com/graphics/ ;
	Over 200 pages of free graphics, clipart, calling cards, linkware theme
	 sets and resources to aid in website creation
PopPop's Smiley Collection
 --- http://www.100megsfree3.com/fwc493/SmileyDirectory1/A_Images1.html ;
	 A library of sorts, containing over 1700 Smiley related images, backgro
	 unds and dividers
Graphics For Web Designers
 --- http://communities.msn.com/graphicsforwebdesigners ;
	 1000's of free graphics. GIFs, dolls, animations, signs, banners, flowe
	 rs, bars, buttons, icons, borders, clipart, theme sets, backgrounds, 
	 banner exchange, promotion, also offering website help, quick tips, and
	  tutorials.

●FreeGraphics.com
 --- http://www.free-graphics.com/ ;
	300,000 free clipart images. Icons, balls, backgrounds, bars, and animat
	ed gifs are available on site
	Linesが良い
	Design sets〜文字挿入済み既製バナー[darkblue]がいいかなぁ

The Emporium
 --- http://www.crosswinds.net/~theemporium/ ;
	Download animated gifs for free. Over 1000 graphics to choose from. Back
	ground textures, midi and wav files are also available
CoolGraphics.com
 --- http://www.coolgraphics.com/ ;
	Over 1000 free graphics including animations, buttons, backgrounds, and bullets

1 Million Free Cool Graphics
 --- http://annegs0.tripod.com/ ;
	A directory to only the best free graphics sites on the web. Each site
	 is personally visited and evaluated. Also a clip art search engine

●Animation
Alien'z Worldz Animated Gif Gallery
 --- http://www.snowcrest.net/alien/ ;
	Over 6500 free animated gifs, well categorized, with many hard to find categories

●Animation Factory
 --- http://www.eclipsed.com/ ;
	Over 5,000 original free animated GIFs for personal web pages and email,
	 arranged in categories. Premium animations are available in the Premium Gold Site

●Animation Factory
 --- http://www.animfactory.com/ ; 無料3,000 ; 年会費$39.95で無制限の利用(12万点); 分類別

●Animation Library
 --- http://www.animationlibrary.com/ ; 13754
	Nearly 4000 free animations for you to use on your website, plus article
	s, reviews, and tutorials
	WEB Elements -  Arrows /・ Bullets/・ Counters/・ Lines/・ Random Shapes/・ Under Construction

●Animation Online - Free Animated Banners
 --- http://www.animationonline.com/　;Onlineでgif animationを無料作成できる
 画材も十分だし簡単。　但し勿論、日本語はｘ。 Buttons, Displays[表示板]もある。
 別サイト http://web-animator.com/

Animated Gifs and Graphics ByDezign
 --- http://www.geocities.com/SoHo/Gallery/1600/ ;
 	Thousands of animated GIFs, original web graphics, clipart, backgrounds,
 	 themes and an ever-growing selection of fonts, all free for the taking.

AnimatedGif.Net
 --- http://www.animatedgif.net/ ;
	This library of free animated gifs features over 40 categories and over
	 5000 graphic web images

Best Animations
 --- http://bestanimations.com/ ;
 	Free animated gifs, Over 2000 gifs available
	Site navigation
	Balls&Buttons
	Backgrounds
	

dbMall Animted GIF Collection
 --- http://www.angelfire.com/anime3/dbmall/ ;
 	Currently there are 59 categories with 1520 animated gif.

Simply The Best 1
 --- http://www.simplythebest1.com/ ;
	 Provides over 18,000 free graphics including over 10,000 free backgroun
	 ds, clipart, buttons, textures, icons, wallpaper, animated gifs, and animated dividers.
	Dividersのアニメ仕様
	


●バナー・ロゴ
LogoSoup
 --- http://www.kfree.com/logosoup/ ;
 	A collection of 5000 corporate logo graphics from all over the world
6000 Logos Inside
 --- http://www.logosbook.com/ ;
 	Tons of creative logos, trademarks and symbols from designers all over
 	 the world, a treasure trove of inspiring for anyone concerned with trademark and logo design

 --- 

 --- 

 --- 






●一般サイト



ほかにもいろいろあったのですが、キャッシュの取りこぼしのせいでデータが失われまして．．．

●ポータルサイト系
AllAbout Japan: CG - 著作権フリーの素材集
Yahoo!ジオシティーズ: ホームページ用の素材集。
Yahoo!コンピュータ: 無料のデジタル素材集。

そのまま使えるホームページ素材集
 - NIFTY-Serveが提供する素材集。壁紙、ボタン、クリップアート等。
便利に使えるテンプレートホームページ集
 - NIFTY-Serveが提供するホームページ作成のためのテンプレート集。

イメージ素材集[FujiXerox]
 --- OA機器関連がある
検索エンジン総合リンクSunAce - 素材集

●自動生成
Auto Logo
 - ロゴやバナーの自動作成。
くるみの無料オーダーメイド素材集
 - 素材と、素材に記入する文字・色を指定してGIF素材を自動的に作成。
タイトルバナーを作ろう
 - タイトルバナー、ボタンの自動作成。

 --- 

 --- 


●一般サイト
Art and Technology for Networking
 - 多数のフリー素材集、Javaアプレット、JavaScriptを提供。初心者向けのCGI講座、サイト作成に関するアドバイス等も。
G-TOOL
 - アイコンやGIFアニメーション等、ホームページ作成用の無料画像提供サービス。3万点
Home__ZSPC インターネット資料集
 ---カラーサンプル、タイトル、ｈｔｍｌに関するデータ
Signboard Factory
 - 北海道大学コンピュータセンターが提供。2D、3Dのサインボード、タイトルをオンライン上で制作。
Webデザイン素材-anyway
 - ボタン、背景、タイトル等、ホームページ作成に役立つ実用的な画像素材を提供。
3DCG WORLD
 - 3DCG、素材集等。
3DFUN
 - 3Dタイトルアニメーション等。
3D夢倶楽部
 - 3Dタイトル画像の作成および提供。
b05+b03
 - 映画公式サイト作成者による。
さるきち Design Works
 - ホームページ用のタイトル、リンクアイコン、ボタン（バナー）等を無料で作成。その他、フリーの素材やホームページの作り方等も。
すちゃらか素材集
 - ウェッブページ制作に向く、オリジナルのCG素材集。
タイトル GIF作成支援
 - ホームページ名を入力すると、タイトルを作成してくれる。デザイナー・チーフのエッセイコーナーもあり。
ひららこーぼー
 - スーパーの値札、はんこ等のGIF。
ホームページデザイン用著作権フリー素材集
 ---　ボタン、タイトル用文字、カウンター用数字、背景、工事中、罫について利用可能。
ホームページの飾り職人
 - アイコンや壁紙等の素材集、HTMLの小技やJavaScript紹介、CGIについて等。
ホームページの調味料
 - ボタン、ライン、GIFアニメ等、ホームページの素材集。

●バナー
Auto Logo
 --- [ロゴ][バナー][飾り文字][ボタン]等の自動生成サイト
 ; Javascriptサンプル(追っかけニャンコ、文字など)





●音声などの素材



●Yahoo! Japan:>グラフィックス・素材>Flash (34)

●動画
JYAKI++- WELCOME、タイトル、ボタン等。
 --- [Wellcom]-6/
Kei Laboratory
 --- Animation Logo
Flash工房
 --- [Flash material]等はDL利用可能
addict silvervine- ボタン、メニュー素材
 --- 
Flash Cafe- メニュー、ボード、飾り、WELCOME等のFlash
 --- 
Flash Design Will- ダイアリー、タイトル、時計、検索エンジン等のシンプルなFlash素材。
 --- [Title][Menu][Text][Button]


●音声






●画像素材



　例えば、人、車、飛行機、家、海、木、森…こうした素材が欲しい時、「素材集」には
失望することが多い。　数万点といったって、殆どがペケなのだ。
　車なんかの場合、モデルカーや自動車カタログなら完璧だ。
●トミカ〜ミニカーメーカー
Tomica Collection
●Yahoo!自動車カタログ
ポルシェ
BMW Photo Gallery
●MSN自動車







●作成ツール



●GIFアニメーション
GIFpro〜GIFアニメーション自動作成ツール
 --- 9種類、 \1000

●バナー作成ツール[英文]
Banner Maker Pro
 --- http://www.bannermakerpro.com/ ; $49
  Creates banner ads, buttons, and other web based graphics





●使ってみたい素材



●動画
Flash工房
 --- [Flash material]等はDL利用可能


●バナー
Auto Logo
 --- [ロゴ][バナー][飾り文字][ボタン]等の自動生成サイト
 ; Javascriptサンプル(追っかけニャンコ、文字など)
Postpet〜Free Banner Factory






●医療専門系



●ホスピタルカフェ[290]
 --- Material--病院関連の素材をいろいろ置いてます。/Link1--おすすめサイトや病院素材リンク。
かわいいものからクールなものまで色のバリエーションが豊富なアイコン、壁紙、ＧＩＦ
アニメ、バナー、ボタン、ライン、BBS用など、たくさん取り揃えています。





●その他



WEBアートデザイナー講座
 ---素材の作り方

BIGLOBE softplazaソフトウェア - 素材




■素材〜用途別

●総合テンプレート



　WEBサイトPortal構築用テンプレートがある。
FreeGraphics.org - templates
 - この中でnewtemp〜黒ベース/newtemp5


●参考
Google :Computers/Graphics/Web/Templates[73]
 --- http://directory.google.com/Top/Computers/Graphics/Web/Templates/






●バナー




●バナー
Auto Logo
 --- [ロゴ][バナー][飾り文字][ボタン]等の自動生成サイト; Javascriptサンプル(追っかけニャンコ、文字など)
Postpet〜Free Banner Factory