HTML タグ
  • あなたのホ−ムペ−ジ作りのご参考に   上のフレ-ムの各ボタンにてペ-ジの各部へリンクいたします
  •   表示フォント(小)でご覧ください NetscapeNavigator4.0では表示フォントを小さくするで
    NetscapeNavigator3.0では表示が少し乱れますがご容赦ください
    InternetExplorer3.0又は4.0では表示-フォント-小で

    <ペ−ジ設定タグ>
    1 HTMLファイルの表示      <HTML>・・・</HTML>            
      <HTML>はファイルの一番最初に表示し</HTML>をファイルの一番最後に書く

    2 ヘッダ情報の表示の表示    <HEAD>・・・</HEAD>
      ペ-ジタイトルやサ-バ-情報の指定 ここに書き込まれた内容は<TITLE>以外表示されない

    3 タイトルの表示         <TITLE>・・・</TITLE>
      タイトルバ-の中に表示される またお気に入り・ブックマ−クなどの登録名ともなる <HEAD>タグの中に書き込む 

    4 画面内容の指定        <BODY>・・・</BODY>
      この中に書き込まれた内容がホ−ムペ−ジに表示される

    5 背景の色の指定        <BODY BGCOLOR=#カラ-ネ-ム>・・・</BODY>
      デフォルトのカラ-は灰色です
     
    カラ−ネ−ム #RGB値
    W.... WHITE #FFFFFF B.... BLACK #000000 R....> RED #FF0000
    G.... GREEN #008000 B.... BLUE #0000FF Y....> YELLOW #FFFF00
    P.... PURPLE #800080 A.... AQUA #00FFFF M....> MAROON #800000
    N.... NAVY #000080 O.... OLIVE #808000 M....> TEAL #008080
    G.... GRAY #808080 S.... SLIVER #C0C0C0 L....> LIME #00FF00
    F.... FUCHSIA #FF00FF D.... DIMGRAY #696969 S....> SLATAGRAY #708090
    D.... FUCHSIA #A9A9A9 G.... GAINBORO #DCDCDC M....> MIDNIGHTBLUE #191970
    S.... SLATEBLUE #6A5ACD M.... MEDIUMBLUE #0000CD R....> ROYALBLUE #4169E1
    D.... DODGERBLUE #1E90FF S.... SKYBLUE #87CEEB S....> STEELBLUE #4682B4
    D.... LIGHTBLUE #ADD8E6 P.... PALETURQUOISE #AFEEEE T....> TURQUOISE #40E0D0
    C.... CYAN #00FFFF L.... LIGHTCYAN #E0FFFF A....> AQAMARINE #7FFFD4
    D.... DARKGREEN #006400 S.... SEAGREEN #2E8B57 L....> LIGHTGREEN #90EE90
    C.... CHARTREUSE #7FFF00 G.... GREENYELLOW #ADFF2F L....> LIMEGREEN #32CD32
    Y.... YELLOWGREEN #9ACD32 O.... OLIVEDRAB #6B8E23 D....> DRAKKHAKI #BDB76B
    P.... PALEGOLDENROD #EEE8AA L.... LIGHTYELLOW #FFFFE0 G....> GOLD #FFD700
    G.... GOLDENROD #DAA520 D.... DARKGOLDENROD #B8860B R....> ROSYBROWN #BC8F8F
    I.... INDIANRED #CD5C5C S.... SADDLEBROWN #8B4513 S....> SIENNA #A0522D
    P.... PERU #CD853F B.... BURLYWOOD #DEB887 B....> BEIGE #F5F5DC
    W.... WHEAT #F5DEB3 S.... SANDYBROWN #F4A460 T....> TAN #D2B48C
    C.... CHOCOLATE #D2691E F.... FIREBRICK #B22222 B....> BROWN #A52A2A
    S.... SALMON #FA8072 O.... ORANGE #FFA500 C....> CORAL #FF7F50
    T.... TOMATO #FF6347 H.... HOTPINK #FF69B4 P....> PINK #FFC0CB
    D.... DEEPPINK #FF1493 P.... PALEVIOLETRED #DB7093 M....> MAGENTA #FF00FF
    V.... VICLET #EE82EE P.... PLUM #DDA0DD O....> ORCHID #DA70D6
    D.... DARKVIOLET #9400D3 B.... BLUEVIOLET #8A2BE2 M....> MEDIUMPURPLE #9370DB
    T.... THISTLE #D8BFD8 L.... LAVENDER #E6E6FA M....> MISTYROSE #FFE4E1
    I.... IVORY #FFFFF0 L.... LEMONCHIFFON #FFFACD M....> MOCCASIN #FFE4B5
     「テ−ブル枠線の色を変える」へ戻る  「テ−ブル全体の背景に色を付ける」へ戻る    行単位で背景に色を付けるへ戻る
    セルの背景に戻る

    6 背景にイメ−ジ表示   <BODY BACKGROUND=”背景イメ−ジのURL”>・・・</BODY>

    7 全体の文字の色を変更  <BODY TEXT=#カラ−ネ−ム>・・・</BODY>


    <フォント設定タグ>
    1 太字にする            <B>・・・</B>                文字のスタイルを太字(ボ−ルド)に
                                                                       ペ−ジの先頭へ 
    2 斜体文字にする            <I>・・・</I>
      文字のスタイルを斜体(イタリック)に
    3 アンダ−ラインを引く         <U>・・・</U>
      文字列に下線を追加
    4 文字に削除線を付ける        <S>・・・</S>
      文字列に削除線を追加
    5 文字サイズを大きく又は小さく    <BIG>・・・</BIG>  <SMALL>・・・</SMALL>
      文字サイズを他の文字より大きなサイズ又は小さいサイズ
    6 文字を点滅させる         <BLINK>・・・</BLINK>
      文字列の点滅
    7 タイプライタ−文字に        <TT>・・・</TT>         
       <TT>タイプライタ−文字</TT>とは等幅フォント 固定<TT>ピッチフォント</TT>と指定してあるフォントです

    8 文字を上付き又は下付き 上付き <SUP>・・・</SUP>  下付き <SUB>・・・</SUB>
         文字列を 上付き文字又は下付き文字
    9 文字の変更        <FONT SIZE=1>・・・</FONT> 〜 
                   <FONT SIZE=7>・・・</FONT>
    FONT SIZE 1        文字のサイズを指定のサイズに
    FONT SIZE 4   文字のサイズを指定のサイズに
    FONT SIZE 7 文字のサイズを指定のサイズに

    10 ペ−ジの標準文字サイズの指定    <BASEFONT SIZE=1> 〜 <BASEFONT SIZE=7>
      そのペ−ジの文字サイズを指定する。原則としてそのペ−ジでは使うのは1度だけでよい

    11文字の色の指定             <FONT COLOR=#カラ-ネ-ム>・・・</FONT>
      <FONT>から</FONT>で挟まれた部分の色を指定する
     
    12 フォントの種類を部分的に変更     <FONT FACE=”フォント名”>・・・</FONT>
       FACEに特定のフォント名を指定することによって表示フォントの種類を変更する。もし他のユ−ザ−に
       そのフォントが入っていなければ標準フォントで表示する。

    13 文字の強調<ボ−ルド>        <EM>・・・</EM>
      <注>Navigator4.0&InternetExplorer3.0では<I>タグと同じ斜体にになります。

    14 文字の強い強調<ボ−ルド>     <STORONG>・・・</STORONG>
       <注>Navigator4.0&InternetExplorer3.0では<B>タグと同じ太字にになります。

    15 サンプルリストの明示          <SANP>・・・</SAMP>
      Navigator4.0では固定ピッチフォントとして設定されているフォントで表示。
       InternetExplorer3.0では固定ピッチフォントより一段階小さいサイズで表示。

    16 コンピュ−タ−コ−ドの明示       <CODE>・・・</CODE> 
       コンピュ−タ−のソ−スコ−ドとして表示する文字列を挟む。固定ピッチフォントに設定してあるフォントで表示される。

    17 引用文の明示              <CITE>・・・</CITE> 
       引用文として表示する文字列を挟みます。斜体フォントで表示される。

    18 キ−ボ−ド入力の明示           <KBD>・・・</KBD>
       Navigator4.0とInternetExplorer4.0は固定ピッチフォントとして設定されているフォントで表示。
       InternetExplorer3.0では固定ピッチフォントを太字で表示。

    19 定義文字や単語のハイライトの明示   <DFN>・・・</DFN>
       Navigator4.0では文字装飾に変化はない。
       InternetExplorer3.0では斜体フォントで表示


    <イメ−ジ設定タグ>
    1 イメ−ジ表示 の指定           <IMG SRC="ファイル名”>     
      表示するデ−タのあるディレクトリ−により指定方法が違う。
                                                                            ペ−ジの先頭へ
    2 イメ−ジと文字の並び の指定       <IMG ALIGN="TOP | MIDDLE | CENTER | BOTTOM"> 3 イメ−ジの周りに文字を入れる       <IMG ALIGN="LEFT | LIGHT"> 4 イメ−ジに周り回り込んでいる文字列を途中で停止する
                               <BR CLEAR="ALL">
        このタグ以降の文字列はイメ−ジの次の行から表示される
    5 イメ−ジを左右に配置文字列を中央に表示する
                               <IMG SRC="・・.GIF" ALIGN="LEFT">
                               <IMG SRC="・・.GIF" ALIGN="RIGHT">
                               <CENTER>
                               ・・・・・・・・・・<BR>・・・・・・・・<P>
                               </CENTER>
      ALIGN属性を交互に使って 文字列を<CENTER>・・</CENTER>タグで挟む
    6 イメ−ジの代替え文字を表示する      <IMG SRC="ファイル名"ALT=”代替え文字列”>
      イメ−ジをサポ−トしていないWebプラウザでイメ−ジの代替えとして表示する文字列を指定する
    7 イメ−ジのサイズを指定する<IMG SRC="ファイル名"WIDTH=幅サイズHEIGHT=高さサイズ>
      サイズの指定はピクセル数(ドット数)又は画像サイズに対するパ−センテ−ジ(%)
    8 イメ−ジに枠線を付ける           <IMG SRC="ファイル名"BORDER=境界線幅>
      境界線幅の指定はピクセル数(ドット数) InternetExplorer3.0では枠線には色が付かず余白として表示
    9 イメ−ジの左右方向にスペ−スを作る   <IMG SRC="ファイル名"HSPACE=余白>
      余白の指定はピクセル数(ドット数)
    10 イメ−ジの上下方向にスペ−スを作る   <IMG SRC="ファイル名"VSPACE=余白>
      余白の指定はピクセル数(ドット数)
    11 イメ−ジをすばやく表示してから本画像を表示  
                     <IMG SRC="ファイル名"LOWSRC="ファイル名">
      デ−タ容量の少ないLOWSRCを転送した後本画像を送る

    <サウンド設定タグ゙>
    1 バックグラウンドでサウンドファイルを再生 <BGSOUND SRC="ファイル名”> 
    ペ−ジの先頭へ
       InternetExplorer3.0又は4.0でホ−ムペ−ジを
         読み込んだときバックグラウンドサウンドとして効果音を再生する NetscapeNavigatorでは対応していない
            再生できるサウンドファイルのフォ−マットは3種類
                .WAV     .AU      .MIDI (.mid) 2 バックグラウンドサウンドの再生回数の指定
                             <BGSOUND SRC="ファイル名” LOOP=回数>
      回数には ・1以上の正数 サウンドを指定した回数繰り返し再生する
              ・−1サウンドを無限に繰り返し再生する また LOOP=INFINITE としてもよい 
    3 プラグインデ−タサウンドの再生<EMBED SRC="URL"WIDTH=幅 HEIGHT=高さ>
                           <NOEMBED>・・・・</NOEMBED>
     
       <ENMBED>タグはいろいろなアプリケ−ションで作成されているデ−タを
              プラグインを使ってインライン表示するために使用する
        <ENMBED>タグには終タグがない 必ずSRC属性をつけて表示するデ−タのURLを指定する 
             又サイズを指定しておかないと表示できない場合が多い
             又<ENMBED>タグに対応していないWebプラウザのために
              <NOEMBED></NOEMBED>タグで代わりに表示させる内容を書いておく
     
     

        <ビデオ設定タグ> 
    1 ビデオ画像の再生           <IMG DYNSRC="ビデオファイル名”>
                                                                       ペ−ジの先頭へ
      VideoforWindows(.avi)ファイルや3D画像(VRML)ファイルを表示 InternetExplorer3.0又は4.0で有効 
                        NetscapeNavigator4.0ではイメ−ジ読み込みエラ−アイコンが表示される
      ビデオ画像ファイルは大変に大きくなるため読み込むまで時間がかかるため静止画を最初に読み込んで表示してから
      次にビデオ画像を読み込むよう指定する方がよい <IMG DYNSRC="bideo.avi" SRC=”静止画.gif”>

    2 ビデオ画像の再生方法の指定<IMG DYNSRC="ビデオファイル名" START=再生タイミング>
      再生タイミングはビデオ画像を読み込んでからいつ再生を開始するかの指定
               FILEOPEN     ファイルを読み込んだ辞典で再生する 省略したときでも同じ
               MOUSEOVER  ビデオ画像の上にマウスを移動するごとに再生が開始する

    3 ビデオ再生制御バ−の表示     <IMG DYNSRC="ビデオファイル名"CONTROLS>
      制御バ−には再生/停止ボタンと再生位置つまみが表示される 
       表示されていないときは画像上をクリックする事で再生/停止を切り替える

    4 ビデオ再生回数の指定        <IMG DYNSRC="ビデオファイル名"LOOP=回数>
       回数には次の値を指定できる 1以上の正数 指定した回数繰り返し再生
             0   デ−タをすべて転送しても 画像をクリックしなければ再生は開始しない
           −1  無限に繰り返し再生する 又 LOOP=INFINITE としてもよい 

    5 ビデオ繰り返し再生の間隔の指定  
           <IMG DYNSRC="ビデオファイル名”LOOP=回数LOOPDELAY=間隔>
       間隔はミリ秒(1/1000秒)単位で数値を入力 1秒間なら1000と入力する


    <レイアウト設定タグ>

    1 段落を作る            <P>又は<P>・・・</P>

       <P>タグを置くとその直後に1行分の空きスペ−ス(改行2つ)が作られる             ペ−ジの先頭へ
    2 段落内で行を揃える       <P ALIGN="left|center|right">・・・</P>
      <P>タグで挟まれた部分の行揃えを指定する     left     左揃え
                                       center   センタリング(中央揃え)
                                       right    右揃え
    3 強制的に改行          <BR>
       終タグはない   強制的に行替えを行いたい所に置く
    4 改行を禁止            <NOBR>・・・</NOBR>
       画面幅を越えた長さになっても改行されず画面を横スクロ−ルして確認する事になる

    5 <NOBR>タグ内で改行するには  <WBR>
       <NOBR></NOBR>で挟まれた文字列の中で、ここで改行されてもよいという部分に置き、意図的な改行を行う
       実際の改行ではNetscapeNavigator4.0 InternetExplorer3.0又は4.0では動きが異なる
       NetscapeNavigator4.0とInternetExplorer4.0 では文字列全体が画面に入らなく段階で
       <WBR>の置かれた部分から改行される
       InternetExplorer3.0 では基本的に画面の右端が<WBR>を置いた位置に達した段階で
       初めてその位置から改行されるので
       <WBR>より右側の文字列は改行されるまで画面がはみ出すことになる  

    6 ペ−ジ上の各要素を中央に揃えるには
                           <CENTER>・・・</CENTER>
      文字列やイメ−ジ、表などを中央に揃える ALIGN="center"で代替えすることが可能
    7 指定した範囲を1つのブロックとして扱うには
                          <DIV ALIGN="揃え方">・・・</DIV>
      <DIV></DIV>タグで挟まれた段落は本文の段落と分割されて行揃えが行われます。
       このため<DIV>タグには必ずALIGN属性でブロックの揃え方を指定する。
          <DIV ALIGN="left|center|right">    left         左揃え
                                  center       中央揃え
                                  right        右揃え
    8 段組を作る                <MULTICOL COL=段組>・・・</MULTCOL>
      文章中の任意の範囲を<MULTICOL></MULTICOL>タグで挟むことでその部分を段落表示する
      段落表示はCOLS=段組数で値には2以上の整数値が入る 段組の高さ・幅ともにできるだけ均等になるように自動調節される。
      段落表示では必須属性です。InternetExplorer3.0 又は4.0では表示に変化はありません。
    9 各段の間隔を変える           <MULTICOL COL=段組数 GUTTER=段間>・・・</MULTCOL>
      段と段の間隔をピクセル単位で指定 GUTTER属性を付けない場合は10ピクセルの間隔になる
      InternetExplorer3.0 又は4.0では表示に変化はありません。
    10 各段の間隔を変える      <MULTICOL COL=段組数 WIDTH=段幅>・・・</MULTCOL>
      段組の幅はピクセル単位で指定する 又画面の横幅に対する割合の指定する 格段の個別の幅ではなく格段の幅の合計です
      InternetExplorer3.0 又は4.0では表示に変化はありません。
    11 本文にスペ−スを入れる   
                 <SPACER SIZE=スペ−スの大きさ TYPE="horizontal|vertical">
     <SPACER>タグは終タグがありません。本文中の任意の場所に配置することで任意の大きさ、方向のスペ−スヲ自由に挿入できる
      SIZEはピクセル数の指定 スペ−スの挿入方向はTYPE=で指定する
                                    horizontal  横方向にスペ−スを挿入する
                                    vertical    縦方向にスペ−スを挿入する 
    12 本文にブロック状のスペ−スをを入れる
           <SPACER TYPE="block"WIDTH=スペ−スの幅
            HEIGHT=スペ−スの高さ ALIGN="top|middle|bottom|left|right">
     blockを指定すると任意の面積を持つブロック状スペ−スを本文に挿入する 幅高さはピクセル数で指定
     ブロック状のスペ−スの挿入により<SPACER>タグでTYPE="horizontal"とTYPE="vertical"を続けて
     指定したような効果を得られる これは透明なブロック状のイメ−ジを張り込んだ場合と同じ
     そのため挿入されたスペ−スと文字列との並び方については、通常のイメ−ジと同様にALIGN=を使って指定する
              top       スペ−スの最上部から文字列を表示
              middle      スペ−スの中央に合わせて見時列を表示」する
              bottom     スペ−スの最下部から文字列を表示する
              left        スペ−スの画面左側に配置し、スペ−ス右側に文字列を回り込ませる
              right       スペ−スを画面右側に配置し、スペ−ス左側に文字列を回り込ませる
          ALIGNを指定しないとbotomと同じようにスペ−スの最下部から表示される
     
    13 引用文をまとめてインデント表示させる   <BLOCKQUOTE>・・・</BLOCKQUOTE>
      文章をブロック化し、引用文を明示  <BLOCKQUOTE></BLOCKQUOTE>で挟まれた部分は
      前後の文章から切り離されて ブロック化される。これで引用文の部分を明確に表示される。
      ブロック化されるとそのブロックの上下にスペ−スがとられる。

    14 水平線の太さを変える       <HR SIZE=太さ>
      ピクセル単位で水平線の太さを調節  
      NetscapeNavigator4.0では値の上限は100 100より大きな数字を入れてもSIZE=100の太さで表示 

    15 水平線の長さを変える     <HR WIDTH=幅>
      ピクセル単位で水平線の太さを調節 又画面の幅に対する割合を%で指定  
           
    16 水平線の位置を指定       <HR ALIGN=”left|center|right”>
         left     左揃え
         center   センタリング(中央揃え)
         right    右揃え
      ALIGNを付けない場合はセンタリング(中央揃え)になる

    17 水平線に色を付ける       <HR COLOR=#RGB値又はカラ−ネ−ム>
      NetscapeNavigator4.0では無視されて表示には変化なし

    18 平面的な水平線を作成       <HR NOSHADE>
      通常の直線を引く 長さWIDTH= 太さSIZE= を指定できる  

      この下の水平線は <HR NOSHADE WIDTH="80%" SIZE=5>とソ−スに記載されている       

    <テ−ブル設定タグ>
    1 テ−ブル(表)を作る          <TABLE>・・・</TABLE>
       <TABLE>タグはテ−ブルの設定を宣言するタグ 表を作成する場合は必ず記載            ペ−ジの先頭へ
       テ−ブルとはデ−タを行や列で区切り見やすく配置した表現をさす

    2 テ−ブルの枠線を効果的に表示  <TABLE BORDER=外枠線の幅>・・・</TABLE>
       テ−ブル(表)にこの設定を追加することによって枠線(ボ−ダ−)を表示できる 
       BORDER設定されていないとデ−タが単に行と列に区切られ規則的に配置されるだけ枠線は表示されない
       幅はピクセル単位で1以上を指定 値を表示しなければ1と同じに 又0では枠線は表示されない 
     
    3 枠線の色を変える     
       <TABLE BORDER BORDERCOLOR=#RGB値又はカラ−ネ−ム>・・</TABLE>

       テ−ブル(表)の外枠線の色を設定 カラ−ネ−ムか#RGB値(6桁)を指定 

     ペ−ジ設定タグに記載 
         ちなみに「ペ−ジ設定タグ」のご案内の中にあるテ−ブルはすべてソ−スのタグで作成いたしました                     
       NetscapeNavigator4.0とInternetExplorer4.0 では表示結果が異なる 又3.0でも少し表示が異なる

    4 枠線の立体表示に変化を
           <TABLE BORDER BORDERCOLORLIGHT=#RGB値又はカラ−ネ−ム
                 BORDERCOLORDARK=#RGB値又はカラ−ネ−ム>・・・</TABLE>
       テ−ブル(表)の外枠線の明るい部分の色(LIGHT)と暗い部分の色(DARK)を指定できる
       NetscapeNavigator4.0では濃淡のみで色の表示はない
       InternetExplorer4.0 では正常に表示する

    5 枠線の表示位置を指定
              <TABLE BORDER FRAME="box|void|above|below|
                              lhs|rhs|hsises|vsides">・・・</TABLE>
       テ−ブル(表)の外枠線の特定部分の表示/非表示を指定できる
          box   外枠線全体を表示              lhs   外枠線の左側だけを表示  
          void   外枠線は表示しない               rhs   外枠線の右側だけを表示 
         avove   外枠線の上だけを表示             hsides 外枠線の上下を表示 
         below   外枠線の下側のみ表示             vsides  外枠線の左右を表示
       InternetExplorerでのみ有効  NetscapeNavigator4.0では無視

    6 テ−ブル内の枠線の表示位置を変える
             <TABLE BORDER RULES="all|none|groups|rows|cols">・・・</TABLE>
          all    枠線をすべて表示               l 
          none   テ−ブル内の枠線は表示しない                   
         groups  グル−プ化された列.行の枠線を表示                 
         rows    行の枠線を表示
         cols    列の枠線を表示
      InternetExplorerでのみ有効  NetscapeNavigator4.0では無視

    7 枠線とセル内容の間隔を変える
         <TABLE CELLSぱING=枠線とセル内容との間隔>・・・</TABLE>
     枠線とセル内のデ−タとの間隔、いわゆる余白をピクセル数で調節する
     間隔は=0のときが一番狭く値が大きくなるほど間隔が広がる。CELLPADDINGを指定しないと=1と同じ

    8 セルとセルとの間隔を変える
         <TABLE CELLSPACING=セルの間隔(枠線幅)>・・・</TABLE>
     セルとセルと間隔をピクセル数で調節する
     間隔は=0を指定しても枠線は消えない CELLSPACINGをつけないと=2と同じ間隔

    9 テ−ブルの横幅を変える       <TABLE WIDTH=テ−ブル幅>・・・</TABLE>
     幅はピクセル単位で絶対的な数値指定と又はペ−ジの幅に対する%で指定する 
     %値を指定すると画面サイズ変更でテ−ブル幅も変化
     指定した幅が狭すぎても必要とされる適当な幅は確保される

    10 テ−ブルの高さを変える       <TABLE HEIGHT=テ−ブルの高さ>・・・</TABLE>
     幅はピクセル単位で絶対的な数値指定と又はペ−ジの高さに対する%で指定する 
     %値を指定すると画面サイズ変更でテ−ブル幅の高さも変化
     指定した幅が狭すぎても必要とされる適当な高さは確保される

    11 テ−ブルの周囲に文章を回り込ませる <TABLE ALIGN="right|left">・・・</TABLE>
     <TABLE></TABLE>の直後に入力したテキストがテ−ブルの周囲に回り込む
         right    テ−ブルを画面右側に表示しテ−ブルの左側に続く文字列を表示
         left    テ−ブルを画面左側に表示しテ−ブルの右側に続く文字列を表示

    12 テ−ブルの周囲にスペ−スをとる 
      <TABLE ALIGN="right|left" VSPACE=上下余白 HSPACE=左右余白>・・・</TABLE>
     テ−ブルの周囲に文字を回り込ませるとテ−ブルと文字がくっつきすぎる 
     これを解消するためピクセル数の余白を設定する
     InternetExplorer3.0では表示に変化はありません
     
    13 テ−ブル全体の背景に色を付ける 
          <TABLE BGCOLOR=#RGB値又はカラ−ネ−ム>・・・</TABLE>
     ペ−ジのバックグラウンドカラ−とは別個にテ−ブル全体のバックグラウンドカラ−を指定#RGB値又はカラ−ネ−ムで指定 

    14 テ−ブル全体の背景にイメ−ジを表示 
          <TABLE BACKGROUND="背景イメ−ジのURL">・・・</TABLE>
     ペ−ジのバックグラウンドカラ−や背景イメ−ジとは別個にテ−ブル全体の背景としてイメ−ジを指定
     指定できるファイルはGIF又はJPEGファイル
     また全く別のサイトにあるイメ−ジを指定することも可能 例(BACKGROUND="http://www.**.**.jp/**/**/**)
     NetscapeNavigator4.0(注.完全ではないが)とInternetExplorer4.0又は3.0で表示

    15 行単位でセル内の文字の配置(横位置)を揃える 
          <TR ALIGN="right|center| left">・・・</TR>
     セル内のテキストの水平方向(左右)の揃え方 <TR></TR>に挟まれたセル一行分のセルに対して有効 
     ただしセルの幅がない場合は表示に変化なし なにも指定しない場合は左揃えになる
            left     左揃え
            center   センタリング(中央揃え)
           right    右揃え

    16 行単位でセル内の文字の配置(縦位置)を揃える 
          <TR VALIGN="top|middle| bottom |baseline">・・・</TR>
     セル内のテキストの垂直方向(上下)の揃え方 <TR></TR>に挟まれたセル一行分のセルに対して有効 
     ただしセルの高さ十分でない場合は表示に変化なし なにも指定しない場合は中央配置になる
            top     上部配置
            middle   中央
          bottom  下部配置
          baseline 各セルのテキストの1行目のベ−スラインを揃える(InternetExplorer4.0又は3.0のみ)
    17 行単位で背景に色を付ける
          <TR BGCOLOR=#RGB値又はカラ−ネ−ム>・・・</TR>
     TRタグ内でBGCOLORを使えばペ−ジのバックグラウンドカラ−やテ−ブルの全体の背景色とは別に
     行単位で色を指定することができる #RGB値又はカラ−ネ−ムについてはペ−ジ設定タグに記載

    18 見出しとして表示するセルを指定  <TH>・・・</TH>
      一般的に見出しセルはテ−ブルの最上行や最左列に置く
      見出しセルの内容はデフォルトで水平.垂直方向とも中央揃えで表示される またテキストは太字で表示される

    19 デ−タ用のセルを指定  <TD>・・・</TD>
      <TD>タグはデ−タを入れる通常のセルを指定するタグです デ−タセルの内容はデフォルトで水平方向が左揃え
      垂直方向が中央揃えで表示される 
      <TD></TD>で挟まれる部分にはテキスト・イメ−ジ・HTMLのどのような要素も入れることができる
     
    20 セル単位でセル内の配置(横位置)を揃える 
               <TH ALIGN="right|center| left">・・・</TH>
            <TD ALIGN="right|center| left">・・・</TD>
     セル内の配置されたテキストなどのデ−タの水平方向(左右)の揃え方を指定 
            left     左揃え
            center   センタリング(中央揃え)
          right    右揃え
     ただしセルの幅がない場合は表示に変化ない

    21 セル単位でセル内の配置(縦位置)を揃える 
               <TH VALIGN="top|middle| bottom">・・・</TH>
            <TD VALIGN="top|middle| bottom">・・・</TD>
     セル内の配置されたテキストなどのデ−タの水平方向(左右)の揃え方を指定 
            top     上部配置
            middle   中央
           bottom  下部配置  
     ただしセルの高さが十分ない場合は表示に変化ない

    22 セル内での改行を禁止する 
               <TH NOWRAP>・・・</TH>
            <TD NOWRAP>・・・</TD>
     セル内のテキストが改行されたくない場合に使用<BR>で改行位置を指定する セルの幅も変化しないので
     表の右端が画面からはみ出すこともあるこの時はスクロ−ルする

    23 複数行にまたがる単一セルを作る 
               <TH ROWSPAN=縦方向にまたがるセル数>・・・</TH>
             <TD ROWSPAN=縦方向にまたがるセル数>・・・</TD>
     特定のセルが複数の行にまたがって単一のセルを作る指定これを使うことにより複雑なテ−ブルを作成できる
     セル数は縦方向にいくつのセルにまたがるかその行数を指定する

    24 複数列にまたがる単一セルを作る 
               <TH COLSPAN=横方向にまたがるセル数>・・・</TH>
             <TD COLSPAN=横方向にまたがるセル数>・・・</TD>
     特定のセルが複数の列にまたがって単一のセルを作る指定これを使うことにより複雑なテ−ブルを作成できる
     セル数は横方向にいくつのセルにまたがるかその行数を指定する

    25 セルの幅を変える 
               <TH WIDTH=セル幅>・・・</TH>
             <TD WIDTH=セル幅>・・・</TD>
     列ごとにセルの幅を調節する
     ピクセル単位かテ−ブルの幅に対する%を指定

    26 セルの高さを変える 
               <TH HEIGHT=セルの高さ>・・・</TH>
             <TD HEIGHT=セルの高さ>・・・</TD>
     行ごとにセルの高さを調節する
     ピクセル単位かテ−ブルの高さに対する%を指定

    27セルの背景に色を付ける 
               <TH BGCOLOR=#RGB値又はカラ−ネ−ム>・・・</TH>
             <TD BGCOLOR=#RGB値又はカラ−ネ−ム>・・・</TD>
     ペ−ジやテ−ブル全体のバックグラウンドカラ−とは別にセルごとに背景を指定する
     RGB値及びカラ−ネ−ムには−参照

    28 セルの背景にイメ−ジを表示する 
               <TH BACKGROUND="背景イメ−ジのURL">・・・</TH>
             <TD BACKGROUND="背景イメ−ジのURL">・・・</TD>
     ペ−ジやテ−ブル全体のバックグラウンドカラ−とは別にセルの背景として特定のイメ−ジをを指定する
     なおこの指定はInternetExplorer3.0のみになっていますが
     NetscapeNavigator4.0とInternetExplorer4.0(注.完全ではないが)でも一応表示する(イメ−ジに注意が必要)

    29 テ−ブルにタイトルを付ける  <CAPTION>・・・</CAPTION>
       テ−ブル(表)のタイトルとして上部にセンタリングされて表示される 

    30 テ−ブルのタイトルの位置の指定−1  <CAPTION ALIGN="top|bottom">・・・</CAPTION>
       テ−ブル(表)のタイトルの位置指定 top 上部 bottom 下部に配置される    

    31 テ−ブルのタイトルの位置の指定−2  
       <CAPTION ALIGN="left|center|right" VALIGN="top|bottom">・・・</CAPTION>
       <FRAME SRC="URL" MARGINWIDTH=左右余白>


    <フレ−ム設定タグ>
    1 フレ−ムを設定          <FRAMESET>・・・</FRAMESET>
       1つペ−ジを複数のフレ−ムセルに分割して各フレ−ムセルに別々のHTMLファイルを表示させる 
       ペ−ジを縦分割、横分割、縦横重複分割する事が出来る                    
                                                                            ペ−ジの先頭へ
    2 上下方向の分割数と高さを指定 <FRAMESET ROWS=高さ1、高さ2、・・>・・・</FRAMESET>
       ペ−ジの上下方向の分割と高さを指定する 高さをカンマ(、)で区切って高さの数値の数で分割数を指定
       高さはピクセル数又は画面のパ−センテ−ジ(%)で指定 パ−センテ−ジの場合は合計で100%になるように
       フレ−ムセルサイズを自動計算させるには片一方に「*」を使う
       指定したHTMLファイルが分割した画面をはみ出した場合はスクロ−ルバ−が表示される

    3 左右方向の分割数と幅を指定 <FRAMESET COLS=幅1、幅2、・・>・・・</FRAMESET>
       ペ−ジの左右方向の分割と幅を指定する 幅をカンマ(、)で区切って幅の数値の数で分割数を指定
       幅はピクセル数又は画面のパ−センテ−ジ(%)で指定 パ−センテ−ジの場合は合計で100%になるように
       フレ−ムセルサイズを自動計算させるには片一方に「*」を使う
       指定したHTMLファイルが分割した画面をはみ出した場合はスクロ−ルバ−が表示される
      上下方向と左右方向の分割を同時に指定するにはROWSとCOLSを同時に記載分轄比率を変化させるときは入れ子にする 
        左右、上下の順で割り当てられる

    4 フレ−ムセルを設定       <FRAME>
       フレ−ムセルへ実際に表示するHTMLファイル(URL)を指定する
       <FRAME>タグに終タグはないに分割して各フレ−ムセルに別々のHTMLファイルを表示させる
       左右、上下の順で割り当てられる

    5 フレ−ムセルに表示するHTMLファイルを指定  <FRAME SRC="URL">
       SRC=はフレ−ムセルへ実際に表示するHTMLファイル(URL)を指定する

    6 フレ−ムセル名を設定       <FRAME SRC="URL" NAME="フレ−ム名">
       NAME=はフレ−ムセルの名前を設定する セル名を設定するとタ−ゲットウィンドウ機能が使えるようになる
       タ−ゲットウィンドウ機能は表示するフレ−ムセル名を指定して目的のフレ−ムセルに指定したHTMLファイルを
       表示させる機能です 
        <サンプル>
       タ−ゲットウィンドウ機能を使って左側のフレ−ムセルに目次 右側のフレ−ムセルに本文を表示させるときのサンプル
      左側のハイパ−リンクボタンをクリックすると右側のフレ−ムセルに指定したHTMLファイルが表示される

    7 フレ−ムセルの余白を設定       <FRAME SRC="URL" MARGINWIDTH=左右余白>
                                <FRAME SRC="URL" MARGINHEIGTH=上下余白>
       MARGINWIDTH=はフレ−ムセルと本文との左右余白サイズを設定する
       MARGINHEIGHT=はフレ−ムセルと本文との上下余白サイズを設定する
       左右余白と上下余白には1以上のピクセル値を指定 
       両方を省略すると10ピクセルの左右、上下余白が設定される 
       どちらか片方だけを省略すると省略した方の余白は「0」とされる

    8 フレ−ムセルのスクロ−ルバ−を表示 <FRAME SRC="URL" SCROLLING="yes|no|auto">
        フレ−ムセルのスクロ−ルバ−表示を制御する 省略した場合は "auto"と同じ動作をする 
            yes   表示するHTMLファイル内容のサイズに関わらず常に上下左右方向のスクロ−ルバ−を表示する
            no   常にスクロ−ルバ−を表示しない
          auto  表示するHTMLファイル内容がフレ−ムセルからはみ出すときにスクロ−ルバ−を表示する

    9 フレ−ムセルサイズを変更できなくする <FRAME SRC="URL" NORESIZE>
       フレ−ムセルの境界線をドラッグしてもフレ−ムセルサイズを変更できなくする 省略すると許可したことになる

    10 フレ−ムの境界線を設定する <FRAMESET FRAMEBORDER=設定> ・・・</FRAMESET>
                  又は<FRAME FRAMEBORDER=設定> ・・・</FRAMESET>  
      フレ−ムの間にある境界線の表示/非表示を切り替える 
       非表示にした場合はNetscapeNavigator4.0では境界線と同じ幅で白色の空白が表示される
       NetscapeNavigato3.0では境界線はなくなりフレ−ム同士がくっついて表示される
       InternetExplorer3.0では灰色の細い線が表示される 設定される値は"yes"又は1で表示"no"又は0で非表示

    11 フレ−ムの境界線の色を指定する 
            <FRAMESET FRAMEBORDERCOLOR=色> ・・・</FRAMESET>
      フレ−ム境界線の色を#RGB又は色名で指定する
       NetscapeNavigator4.0又は InternetExplorer4.0で表示される
       InternetExplorer3.0では無視される

    12 フレ−ムの間隔を指定する 
            <FRAMESET FRAMESPACING=間隔> ・・・</FRAMESET>
      フレ−ムとフレ−ムの間隔をピクセル数で指定 間隔に0を指定するとく境界線がなくなる
       InternetExplorer3.0でのみ動作する
       NetscapeNavigator4.0では無視される

    13 フレ−ムに表示するHTMLファイルをを指定する(タ−ゲットウィンドウ) 
            <A HERF="URL" TARGET="フレ−ムセル名"> ・・・</A>
      フレ−ムセル指定リンクは分割されているフレ−ムセルに付いたフレ−ムセル名を指定して 任意のフレ−ムセル名の
       ウィンドウへ指定したHTMLファイルを表示する このような機能をタ−ゲット・ウィンドウ機能と呼ぶ
       例えば左側のフレ−ムセルに目次を表示してその目次のハイパ−リンクをクリックすると右側のフレ−ムセルに
       リンク先の内容を表示させる
       フレ−ムセル名はNAMEで指定
       フレ−ム機能を使っていないときにTARGETが使われるともう一つのWebプラウザが起動し 
      指定したHTMLファイルが表示される


    <フォ−ム設定タグ>
    ペ−ジの先頭へ
    1 入力フォ−ムを作る          <FORM>・・・</FORM>
       ホ−ムペ−ジを表示しているユ−ザ−に情報を書き込んでもらうための記入フォ−ムを記述する範囲を挟む
        記入フォ−ムにはテキストボックスやラジオボタン、ボタン、リスト、選択メニュ−などを
        表示するためのタグや文字列、一般のタグなどを書き込む                   

    2 フォ−ムデ−タの送信先を指定 <FORM ACTION="URL"METHOD="メソッド">・・・</FORM>
       フォ−ムに記入したデ−タを処理するためのCGIスクリプトの位置をURLで指定するか
       "mailto"に続けてメ−ルとして転送するためのメ−ルアドレスを指定する
       CGIスクリプトへ転送するとき
       <INPUT>タグでTYPE="submit"を指定するとデ−タを送信するためのボタンが表示される
       このボタンをクリックすると<FORM>タグのACTION=で指定したURLへフォ−ムに書き込んだデ−タが転送される
       メ−ルへ転送するとき
       CGIスクリプトの利用を解放していないプロバイザ−やサ−バ−を利用しているときは
       メ−ル機能を使って特定のメ−ルアドレスへフォ−ムデ−タを送信する

    3 フォ−ムデ−タを個別のデ−タとして転送する
       <FORM enctype="デ−タタイプ" ACTION="URL"METHOD="メソッド">・・・</FORM>
       フォ−ムに記入したデ−タを個別のファイルとして転送 パラメ−タ−として"multipart/form-data"を指定
       "mailto:メ−ルアドレス"を指定したときに転送できるデ−タはテキストのみです このためTYPE=で" file"を指定して
       任意のファイルを転送するときはテキストファイルを指定してください

    4 フォ−ムデ−タの受け渡し方法を決める
       <FORM ACTION="URL"METHOD="メソッド">・・・</FORM>
       フォ−ムデ−タをサ−バ−に渡すために2種類のメソッドを指定できます 
       METHOD="GET |POST"
           GET  :フォ−ムデ−タをACTION="URL"に加えて送信する
           POST :フォ−ムデ−タをACTION="URL"に受け渡す

    5 入力エリアやボタンを表示
       <INPUT>
      デ−タを入力するときの入力フィ−ルドとしてテキストボックスやパスワ−ド用のテキストボックス ラジオボタン 
      イメ−ジの座標入力 不可視フィ−ルド 送信ボタン リセットボタン ファイル名入力ボックスの9種類の表示が出来る 

    6 入力エリアやボタンを表示形式の指定
       <INPUT TYPE="機能" NAME="フィル−ド名">
      <INPUT>タグで表示する9種類の中から指定する 
         TYPE="text|password|checkbox|radio|image|hidden|submit|reset|file"
         
         text      テキストボックスを表示
         password   パスワ−ドを入力するためのテキストボックスを表示 普通のテキストボックスでは入力した
                   文字が画面に表示されますがパスワ−ドでは入力した文字数だけ「*」(アクタリス)で表示
         checkbox   チェックボックスを表示 項目から必要な項目をクリックしてチェックマ−クを付ける機能
         radio     ラジオボタンを表示する ラジオボタンは複数の項目の中から1つだけ該当するものを選択する
         image     イメ−ジを表示してクリックした座標を返す 指定したURLのイメ−ジを表示
                   イメ−ジ状の任意の位置でクリックするとそのイメ−ジの左上を基準として
                   クリックした位置の座標が転送 またクリックすることでフォ−ムとして表示されている
                   他のデ−タも送られる
         hidden     不可視フィ−ルドを指定する ホ−ムペ−ジ上に表示されることはありませんが 
                   他のデ−タと共にCGIスクリプトへ転送される
         submit    送信ボタンを表示 <FORM>のACTIONで設定した動作を実行する 
                   CGIスクリプトへフォ−ムデ−タを転送するか メ−ルとしてフォ−ムデ−タを転送するための
                   ボタンを表示する
         reset     リセットボタンを表示 入力したフィ−ルド内容をすべてリセットする <FORM></FORM>で
                  挟まれている入力フィ−ルドの項目をすべてクリアして初期状態に戻す
         file       ファイル名入力ボックスを表示 入力したファイル名のファイル本体を転送できる

    7 デ−タに付ける名前を指定する
       <INPUT TYPE="機能" NAME="フィル−ド名">
      <INPUT>タグで入力したデ−タをCGIスクリプトなどへ渡すときに使われるフィ−ルド名(デ−タ名)を指定
      NAME=を省略すると<INPUT>で入力したデ−タが転送できないので必ずNAME=を指定すること
      フォ−ムに入力されたデ−タは次のような形式でCGIスクリプトなどで渡される 
         URM?フィルド名=デ−タ&フィ−ルド名=デ−タ&・・・・
         各フィ−ルドの区切りとして「&」が使われる デ−タの中にスペ−スが含まれているときは「+」に
         変換されて送られる

    8 デ−タの初期値を指定する
       <INPUT TYPE="機能" NAME="フィル−ド名"VALUE="初期値やボタン名">
      <INPUT>タグで表示した入力項目の初期値を指定
        VALUE="初期値やボタン名"
           <INPUT>タグに記述されているTYPE=の設定内容に合わせて下のように動作が変わる
            TYPE="text|password"
             VALUE=はあらかじめテキストボックスに入力されているデ−タを指定するテキストボックス内の
             文字列を変更していなければVALUE=で指定されているデ−タが「フィ−ルド名=」に続けて
             転送される
            TYPE="checbox|radio"
             VALUE=はチェクボックス又はラジオボタンがチェクされているときに転送されるデ−タを指定
             VALUE=が指定されていないときは「フィ−ルド名=」に続けて"on"が転送される
            TYPE="hidden"
             VALUE=が指定されているデ−タが「フィ−ルド名=」に続けてそのまま転送される
            TYPE="submit|reset"
             ボタンに表示する文字列を指定
             又ATYPE="submit"の場合NAME=も設定されているときはVALUE=で指定したデ−タも
             「フィ−ルド名」に続けて転送される

    9 テキストボックスの幅を指定
       <INPUT NAME="フィル−ド名"SIZE=文字数>
          テキストボックス又はファイル名入力ボックスの幅を文字数で指定
           文字数には1以上の正数を指定 SIZE=20と同じ幅でテキストボックスが表示される
           入力した文字数がテキストボックスの幅を超えるときは文字列がスクロ−ルして表示される

    10 入力できる文字数を制限する
       <INPUT NAME="フィル−ド名"MAXLENGTH=最大文字数>
          テキストボックス又はファイル名入力ボックスへ入力できる文字数を制限する
           MAXLENGHT=の値を超えてデ−タを入力しようとした場合警告音が鳴り最大文字数以上の
           文字は文字を入力できない

    11 チェックマ−クの初期値を指定
       <INPUT TYPE="radio"NAME="フィル−ド名"VALUE="デ−タ"CHECKED>
       <INPUT TYPE="checkbox"NAME="フィル−ド名"CHECKED>
         テキストボックスとラジオボタンの初期値をオンの状態にする
           CHECKED=はHTMLファイルを表示したときからチェックボックス又はラジオボタンのチェックをオンにします
           デ−タを変更したあと<INPUT TYPE="reset">(デ−タのリセット)を実行するとHTMLファイルを
           読み込んだ初期状態なります
           ラジオボタンは表示しているデ−タに中でどれか1つに項目がオンになっていることを前提にします
           このためラジオボタンとして表示する<INPUT>タグにはどれか1つだけにCHEKEDを設定する

    12 表示するイメ−ジを指定
       <INPUT TYPE="image" SRC="URL"NAME="フィル−ド名">
         <INPUT>タグのTYPE=で"image"を指定したときに表示するイメ−ジデ−タのURLを指定する
           表示するイメ−ジデ−タの保存されているディクトリの構造によりいくつかの指定方法があります
           ▲同じディレクトリ内のイメ−ジデ−タを表示する
              現在表示しているHTMLファイルと同じディレクトリにあるイメ−ジデ−タを表示する
                SRC="ファイル名"
           ▲下層ディレクトリ内のイメ−ジデ−タを表示する
              現在表示しているHTMLファイルより下層にあるディレクトリにあるイメ−ジデ−タを表示する
                SRC="ディレクトリ/ファイル名"
           ▲上層ディレクトリ内のイメ−ジデ−タを表示する
              現在表示しているHTMLファイルより上層にあるディレクトリにあるイメ−ジデ−タを表示する
                 IMG SRC="../ファイル名"
           ▲同層ディレクトリ内のイメ−ジデ−タを表示する
              現在表示しているHTMLファイルと同じ階層で他のディレクトリにあるイメ−ジデ−タを表示する
                 IMG SRC="../ディレクトリ/ファイル名"

    13 選択リストを作る
       <SELECT NAME="リスト名"><OPTION>...</SELECT>
         <SELECT>タグは複数の選択項目を表示するリストを作成する選択項目となる文字列や数値の先頭に
           <OPTION>タグを付け全項目を<SELECT></SELECT>で挟みます
            タグの基本的な配置は
              <SELECT NAME="リスト名">
              <OPTION>選択項目
              <OPTION>選択項目
              <OPTION>選択項目
                 .
                 .
                 .
              </SELECT>
            作成される選択リストの形式はドロップダウン型と複数行を表示するドロップダウン型リストになる

    14 リスト名を指定
       <SELECT NAME="リスト名"><OPTION>...</SELECT>
         NAME=はリストで選択された項目内容をCGIスクリプトなどに渡すときのリスト名(デ−タ名)を指定する
              NAME="リスト名"
          選択された項目内容は次のような形式でCGIスクリプトなどに渡される
              URL?リスト名=デ−タ(項目内容)&フィルド名=....

    15 フィ−ルド型リストを作る
       <SELECT NAME="リスト名"SIZE=リストの行数><OPTION>...</SELECT>
           SIZE=に値を指定することによりフィ−ルド型リストを作成される 行数は正数で指定される 
           フィ−ルドの幅は自動的に最も文字数の多い項目に合わせられる

    16 複数の項目を選択できるように
       <SELECT NAME="リスト名"MULTIPLE><OPTION>...</SELECT>
           通常選択リストでは1つの項目しか選択できませんが MULTIPLEを指定することで複数の項目を
           同時に選択できる
           MULTIPLEを付けるとSIZE=を付けていなくても必ずフィ−ルド型リストになります

    17 選択済みの項目を指定
       <SELECT NAME="リスト名"><OPTION SELECTED>...</SELECT>
           選択リストで特定の項目(文字列や値)を選択済み(初期値)として表示1つの<OPTION>タグだけに
           設定するのが原則
           ドロップダウン型リストでは最初からリストフィ−ルドに表示されるようになり
           フィ−ルド型リストでは反転表示される

    18 各選択項目に対応する値を設定
       <SELECT NAME="リスト名">
        <OPTION VALUE=数値または"簡単なアルファベット文字列">...</SELECT>
        選択リストで項目を選択しフォ−ムの送信を行うとCGIスクリプトなどへはリストに表示されている文字列が
        そのまま選択デ−タとして引き渡されることになる
        しかし選択リストを使ったアンケ−トなどはリストの各項目は固定されており何番目の項目が選択されたか
        さえわかればよいので表示文字列をそのままデ−タとして送る必要が薄いと言える
        又選択結果を見てさらに何らかの動作を行うようなCGIスクリプトを使う場合文字列(特に日本語)のままの
        デ−タではスクリプト側の処理が煩雑化することがある
        そこでVALUE=を使ってあらかじめ選択項目に対応する選択値を指定し送信デ−タの内容を
        わかりやすくすることで上記の問題に対応する
        デ−タ内容をわかりやすくすると言うことはそのデ−タを数値化する又は数値化しやすくすると
        言うことに他なりません 一般的に値には数値又は簡単なアルファベット文字列を指定する
        VALUE=で指定されている値が「リスト名」に続けてそのまま転送される
        簡単なアルファベット文字列を使うことによりフォ−ムデ−タをメ−ルとして送信するときの文字化けを防ぐ

    19 入力ボックスフィ−ルドを作る
       <TEXTAREA NAME="ボックス名">...</TEXTAREA>
        複数行にわたる文字列を入力できるボックスフィ−ルドを作成する ボックスにはスクロ−ルバ−が表示される
        文字列を<TEXTAREA>タグで挟むとその文字列は入力ボックスフィ−ルドにあらかじめ入力された状態で表示される
        単にボックスフィ−ルドだけを作成するならば<TEXTAREA NAME="ボックス名"></TEXTAREA>と書くだけでよい
           
    20 ボックス名を指定
       <TEXTAREA NAME="ボックス名">...</TEXTAREA>
       NAME=は入力ボックスフィ−ルドに入力された文字列をCGIスクリプトなどに渡すときのボックス名(デ−タ名)を
       指定   入力された文字列は次のような形式でCGIスクリプトなどに渡される
       この時他の入力デ−タとの区切りには「&」が使われる
          URL?ボックス名=デ−タ(入力文字列)&フィ−ルド名=デ−タ&....
       又デ−タの中にスペ−スが含まれているときは「+」に変換されて送られる
       NAME=はプラウザでの表示に影響を与えませんが入力されたデ−タの識別に不可欠です

    21 入力ボックスフィ−ルドの高さを変える
       <TEXTAREA NAME="ボックス名"ROWS=行数>...</TEXTAREA>
       ROWS=は入力ボックスフィ−ルドの高さつまり行数を調節する 整数値を指定
             ROWS=行数
       ROWS=を設定しなくてもInternetExplorer4.0では2行分InternetExplorer3.0では5行分表示され

    22 入力ボックスフィ−ルドの幅を変える
       <TEXTAREA NAME="ボックス名"COLS=ボックスの幅>...</TEXTAREA>
       COLS=は入力ボックスフィ−ルドの幅を調節する 整数値を指定
             COLS=ボックスの幅
       COLS=を設定しなくてもNetscapeNavigator4.0又はInternetExplorer4.0ではCOLS=20
       InternetExplorer3.0ではCOLS=40を指定したときと同じ幅を取る

    23 入力ボックスフィ−ルド内の文字列の改行方法を指定
       <TEXTAREA NAME="ボックス名"WRAP="off|soft(virtual)|hard(physical)">
         ...</TEXTAREA>
       WRAP=は入力文字列がフィ−ルドの右端までいったときの改行方法(文字列の折り返し)について指定
        WRAP="off|soft(virtual|hard(physical)"
         off       入力文字列がフィ−ルドの右端までいっても改行しない
         soft(virtual) 入力文字列がフィ−ルドの右端までいくと自動的に改行するただし送信されるデ−タには
                  改行情報は含まれない
         hard(physical)入力文字列がフィ−ルドの右端までいくと自動的に改行する送信されるデ−タにも
                  改行情報が含まれる
       WRAP=を設定しないとWRAP="off"を指定したときと同じように動作する
       InternetExplorer3.0では常に入力文字列はフィ−ルドの右端までいくと改行される


    <スタイル設定タグ>
    ペ−ジの先頭へ
    スタイルシ−トとは
    PageMakerのようなDTPソフトや最近のワ−プロが備えている機能に「スタイル」機能があります 
    一般的には書式設定などともいわれますが、これはあらかじめ特定のドキュメント形式(「タイトル」「小見出し」「本文」など)に
    対応するフォント、サイズ、色、インデントなどの値を任意のスタイルとして登録しておき、
    それを本文中の特定部分に設定することで、スタイルとして指定されている内容に従って表示させるという機能です
    例えばある文字列に小見出しのスタイルを設定するだけでその文字列を小見出しとして登録されている
    体裁(フォント、サイズ、色など)で表示させる
    スタイルシ−トの発想もこれと同じようなものと考えてよい
    従来のHTMLではタグの表示は基本的にWebブラウザやユ−ザ−側に依拠していましたスタイルシ−トを使えば
    表示を発信者側の意図に合わせてるように出来る
    現在実用化されつつあるスタイルシ−トの規格は「CSS1」(CascadingStyleSheetlevel1)と呼ばれているものです
    CSS1にはフォントの種類や形状、サイズ、マ−ジンの設定、インデント、バックグラウンドカラ−、バックグラウンドイメ−ジなどの
    コントロ−ルが可能です
    InternetExplorer3.0/4.0又NetscapeNavigator4.0ではこのCCS1のサポ−トを表明しているが現段階では
    全ての機能をサポ−トしていないようです

    1 タグにスタイル指定 タグ名{プロパティ:値}
             タグ名{プロパティ:値;プロパティ:値;・・・・・;プロパティ:値}
       1スタイルの基本になる記述{プロパティ:値}部分がいわゆるスタイルの宣言といわれるもの
       ここで宣言されたスタイルが左側のタグに反映される
       「プロパティ」にはスタイルとして定義したいものを 「値」には定義したスタイルをどう表示するか記述する
       つまり「何を」:「どうする」という記述になる いくつも宣言するときは「:」(セミコロン)で区切る

    2 宣言したスタイルをホ−ムペ−ジで使えるようにするには
      タグに対してスタイル宣言を行ってもそれだけではホ−ムペ−ジには反映されない 
      あらためて宣言の内容を利用したいホ−ムペ−ジに適用する手続きが必要
      スタイルの適用方法は3種類あります それぞれの方法は単独でも組み合わせてでも使える
       ●スタイルシ−トファイルによる適用
         <LINK REL="stylesheet"TYPE=" text/css"HREF="スタイルシ−トファイル名.">
        スタイルを記述したスタイルシ−トファイルを別個に作成し<LINK>タグを使って
        そのスタイルシ−トファイルを指定する方法
        スタイルシ−トファイルにはスタイルの宣言(タグ名{プロパティ:値})を記述する
        スタイルシ−トファイルの拡張子は「.CSS」になる
        この場合宣言されたスタイルはペ−ジ全体に適用される
        なおWebサ−バ−側の設定としてMIMEタイプ(text/css)の追加が必要になる場合がある
       ●ドキュメント情報による適用
         <STYLE TYPE=" text/css">
        タグ名{プロパティ:値}
        タグ名{プロパティ:値}
             ・
             ・
             ・ 
         </STYLE>
       <STYLE>タグを使いドキュメント情報としてスタイルの適用を行う方法です<STYLE></STYLE>で挟まれた部分は
       <HEAD>タグ内に配置します
        この場合宣告されたスタイルはペ−ジ全体に適用される
       ●タグの属性による適用
         <任意のタグ STYLE="プロパティ:値>・・・・・</任意のタグ>
        任意のタグの属性としてスタイルの適用を行う方法です 
        この場合そのタグの範囲にのみ宣言されたスタイルが適用される

    3 部分的にスタイルを指定   
                 <SPAN STYLE="プロパティ:値">・・・・</SPAN>
      <SPAN>タグは通常のタグの属性としてスタイルを適用する場合よりより狭い範囲にスタイルを適用したい場合に使う
       たとえば<P></P>タグで挟まれた段落の一部の表示を変えたいとき

    4 キ−ワ−ドを使ってスタイルを指定   
       任意のタグ.キ−ワ−ド{プロパティ:値}<任意のタグ CLASS="キ−ワ−ド">
        ・・・・</任意のタグ >
          .キ−ワ−ド{プロパティ:値}<適用タグ CLASS="キ−ワ−ド">・・・</適用タグ>
       同じタグに複数のスタイルを指定したい場合や適用するタグを限定せずにさまざまなスタイルを利用したい場合に
       便利なのがキ−ワ−ドを使ったスタイルの指定・適用方法です
       ◆スタイル指定の方法
       同じタグに対して複数のスタイルを使い分けたい場合は対象となるタグに続けてピリオド、キ−ワ−ド、
       スタイル宣言({プロパティ:値})を記述する
         任意のタグ.キ−ワ−ド(プロパティ:値)
       また任適用タグを限定せずにスタイルのバリエ−ションを指定したい場合はピリオドから始めて
       キ−ワ−ド、スタイル宣言({プロパティ:値})を記述する
         .キ−ワ−ド{プロパティ:値}
       実際の記述はドキュメント情報としてヘッダ部の<STYLE>タグの中で行われる
       ◆スタイル適用の方法
       指定されたスタイルの適用は対象タグにCLASS=を指定して行う
       適用したいスタイルのキ−ワ−ドをCLASS=の値として記述する
        タグを限定した場合が
         <任意のタグ CLASS="キ−ワ−ド">....</任意のタグ>
        タグを限定しない場合が
         <適用したいタグ CLASS="キ−ワ−ド">....</適用タグ> となる
       この方法の最大にメリットは一度スタイルを宣言してしまえばCLASS=を指定するだけでスタイル適用が
       行えるようになる点です

    5 同じスタイルを複数のタグに一度に適用する   
       タグA、タグB、タグC、....{プロパティ:値}
       同じスタイルを適用するタグをグル−プ化して記述することで複数のタグに対して同じスタイルを同時に適用できる
       実際の記述はドキュメント情報としてヘッダ部の<STYLE>タグの中に行う

    6 スタイルシ−トにコメントを書く   
       /*....*/
       スタイルシ−トは便利な反面指定が非常に煩雑です 慣れないうちはスタイル指定の内容などをコメントとして
       記述しておく方がよい スタイルシ−トの中にも通常のHTML同様コメントを記述することが可能
       HTMLの「<!-- -->に対応するのがこの「/* */」です

    7 フォントの種類を指定   
       font-family:フォント名または種類
        font-family:フォント名または種類、
       ..、..、フォント名または種類
       表示フォントを指定する場合のプロパティが「font-family」です 値にはフォント名又は種類を指定する
       また複数のフォント名又は種類を「:」(セミコロン)で区切ることで指定することが出来る
       この場合前に記述されたものから表示の優先順位が高くなる
       フォントの種類というのはいわゆる系統別の総称で次の5種類が定義されています
        serif,sans-serif,cursivefantasy,monospace
       なお名前にスペ−スを含むフォントを指定する場合には「"」で挟んで指定することが出来ます(ヘッダ部に記述する)

    8 フォントのサイズを指定   
       font-size:数値またはサイズ名
       表示フォントのサイズを指定する場合のプロパティが「font-size」です 値には数値又はサイズ名を指定する
       数値による指定はポイントなどの単位を付けてサイズを直接指定する
       指定可能なサイズはpx(ピクセル)pt(ポイント)in(インチ)cm(センチ)と%(デフォルトに対する割合)がある
       単位を付けない場合はピクセルが単位になる
       サイズ名による指定は以下の7種類のサイズが利用できる
        xx-smallf,x-smal,small,medium,large,x-large,xx-large
       mediumがデフォルトサイズになる

    9 行送りを指定   
       line-height:行送りの数値
       行送りとは文字のベ−スライン(下辺)からベ−スラインまでの距離のことです
       この行送りをを指定する場合のプロパティが「line-height」です 値には数値を指定する
       使用可能なサイズはpx(ピクセル)pt(ポイント)in(インチ)cm(センチ)または%による指定も可能
       これはフォントのサイズに対する割合で行送りが指定される

    10 テキストを装飾する   
       text-decorationtnone|underline|line-through
       表示する文字列に装飾を施す場合のプロパティが「text-decoration」です
          none         :装飾なし
          underline       :下線
          line-through     ;削除線

    11 インデントを指定   
       text-indent:インデントする距離
       文字列のインデントを設定するプロパティが「text-Indent」です このスタイルを利用すると段落の第一行を
       インデントさせることが可能になります 値にはインデントさせる距離を直接指定する
       使用可能なサイズはpx(ピクセル)pt(ポイント)in(インチ)cm(センチ)です また%による指定もできます
       この場合はインデントが設定されるタグに含まれる文字列の実質的な横幅に対する割合になります

    12 マ−ジン(余白)を設定   
       margin-top:マ−ジンをとる距離
        margin-right:マ−ジンをとる距離
        margin-left:マ−ジンをとる距離
       任意のタグが影響する範囲に対して上下左右のマ−ジン(余白)を設定するプロパティが
       「margin-top」「margin-right]「margin-left」の各プロパティです 
       それぞれ「margin-top」は上に「margin-right」は右に「margin-left」は左にそれぞれマ−ジンを設定する
       値にはマ−ジンのとる距離を指定する
       使用可能な単位はpx(ピクセル)pt(ポイント)in(インチ)cm(センチ)です また%による指定もできます
       このスタイルは複数のタグに対して同時にしかも別の値を指定できる

    13 背景イメ−ジを指定   
       background:url(イメ−ジファイル名)
       任意のタグが影響を与える範囲の背景にイメ−ジを表示するプロパティが[background」です
       ペ−ジ全体でなく適用したタグの背景にイメ−ジを表示する
       イメ−ジファイル名に続き以下の値を記述することで
         背景イメ−ジの固定  fixed  背景イメ−ジの固定(InternetExplorer3.0のみ) 
                       scroll  背景イメ−ジを動かす 
         背景イメ−ジの繰り返しコントロ−ル
                   repeat      通常のイメ−ジの展開 
                       no-repeat   繰り返しなしの1枚表示
                   repert-y    垂直方向にのみ繰り返し表示 
                   repert-x    水平方向にのみ繰り返し表示 


                                                                      ペ−ジの先頭へ   
    1 文字をスクロ−ルさせる          <MARQUEE>・・・</MARQUEE>
       ペ−ジ上で横スクロ−ルさせることが出来る。マ−キ−(スクロ−ルテキスト)はInternetExplorerの拡張使用タグ
    NetscapeNavigator4.0では表示に変化なし

    2 スクロ−ルテキストと本文の並び方を変える          
       <MARQUEE ALIGN="top|middle|bottom">・・・</MARQUEE>
       ALIGN=は<MARQUEE>タグの前後に位置する文字列のマ−キ−エリアに対する並び方(垂直位置)を指定
          top     上部配置
         middle   中央
         bottom  下部配置
    NetscapeNavigator4.0では表示に変化なし

    3 スクロ−ルのパタ−ンを変える          
       <MARQUEE BEHAVIOR="scroll|slide|alternate">・・・</MARQUEE>
       ALIGN=は<MARQUEE>タグの前後に位置する文字列のマ−キ−エリアに対する並び方(垂直位置)を指定
          scrollop     ペ−ジを横切る動きを繰り返す
         slide       一方から現れペ−ジの端で停止する
         alternate   マ−キ−エリアの中を行ったり来たりする
       何も指定しない場合のデフォルトは"scroll"です
    NetscapeNavigator4.0では表示に変化なし

    4 マ−キ−エリアの背景に色を付ける          
       <MARQUEE BGCOLOR=#RGB値またはカラ−ネ−ム>・・・</MARQUEE>
       BGCOLOR=を使えばバックグラウンドカラ−とは別にマ−キ−エリアに背景色を指定
          RGB値およびカラ−ネ−ムによるカラ−指定は
     
    5 文字がスクロ−ルする方向を変える          
      <MARQUEE DIRECTION="leftlright">・・・</MARQUEE>
       ALIGN=文字列のスクロ−ル方向はDIRECTIONで変更できる
         left       画面右側から左にスクロ−ル
         right      画面左側から左にスクロ−ル  一方から現れペ−ジの端で停止する
         
       何も指定しない場合のデフォルトは"left"です

    6 マ−キ−エリアの高さと幅を変える          
       <MARQUEE HEIGHT=エリアの高さ WIDTH=エリアの幅>・・・</MARQUEE>
       ピクセル単位で数値を指定または現在表示されているペ−ジに対する割合を指定
       値にはピクセル数orパ−センテ−ジ(%)を指定

    7 マ−キ−エリアの周囲にスペ−スをとる          
       <MARQUEE VSPACE=上下余白  WIDTH=左右の余白>・・・</MARQUEE>
       マ−キ−エリアの外側は上下および左右に余白を設定する事が出来ます
       VSPACEが上下余白をHSPACEが左右余白を調節します
       値にはピクセル数を指定します
        VSPACE=上下余白   HSPACE=左右余白

    8 スクロ−ルする回数を指定する          
       <MARQUEE LOOP=回数>・・・</MARQUEE>
       LOOPは文字列のスクロ−ルを何回繰り返すかその回数を指定
       値に整数値を指定 値に-1または"infinite"を指定すると無限にスクロ−ルを繰り返します
       またBEHAVIORの値によって指定回数終了後の表示が異なってきます

    9 文字のスクロ−ル速度を変える<1>        
      <MARQUEE SCROLLAMOUNT=進行ピクセル数>・・・</MARQUEE>
       SCROLLAMOUNT=文字列のスクロ−ル速度を調節
       1回再描画がされるごとに文字列が進む距離の値をピクセル数で指定 数字が大きくなれば速くなる
     
    10 文字のスクロ−ル速度を変える<2>        
      <MARQUEE SCROLLDELAY=再描画間隔>・・・</MARQUEE>
       SCROLLDELAY=文字列のスクロ−ル速度を調節
       文字列を移動させるために再描画する間隔をミリ秒(1000分の1秒)単位でで指定 数字が大きくなれば遅くなる


    <ハイパ−リンク設定タグ>
     ペ−ジの先頭へ
       
    1 他のホ−ムペ−ジへリンクする    <A HREF="URL">・・・</A>
       <A></A>(Ancher:アンカ−)タグ文字列やイメ−ジを挟みハイパ−リンクを作成する 
       タグで挟まれた文字列をホットテキストと呼ぶ
       ホットテキストには下線が付けられブラウザ側の設定で指定されている色または<BODY>タグで指定した色が付く
       <A>タグと<IMG>タグを組み合わせることでイメ−ジをホットテキストの代わりに使える

    2 他のホ−ムペ−ジへリンクする(ロ−カルリンク)    <A HREF="URL">・・・</A>
        自分のホ−ムペ−ジが複数のペ−ジに分割されているときに他のペ−ジへリンクする
        基本的には他のサイトへのリンクと同じだがディレクトリ名やファイル名だけを指定
          ▼同じディレクリ内のHTMLファイルへリンクする
             現在表示しているHTMLファイルと同じディレクトリにあるHTMLファイルへリンクを行います
           <A HREF="ファイル名.html">ホットテキスト</A>
          ▼下層ディレクトリ内のHTMLファイルへリンクする
             現在表示しているHTMLファイルよりも下層にあるディレクトリに保存されているHTMLファイルへリンクを行います
             <A HREF="ディレクリ名/ファイル名.html">ホットテキスト</A>
          ▼上層ディレクトリ内のHTMLファイルへリンクする
             現在表示しているHTMLファイルよりも上層にあるディレクトリに保存されているHTMLファイルへリンクを行います
             <A HREF="../ファイル名.html">ホットテキスト</A>
           複数の階層があるときは階層の数だけ「../」を入れる
          ▼同階層ディレクトリ内のHTMLファイルへリンクする
             現在表示しているHTMLファイルと同じ階層で他のディレクトリに保存されているHTMLファイルへリンクを行います
             <A HREF="../ディレクリ名/ファイル名.html">ホットテキスト</A>

    3 同一ペ−ジの他の場所へリンクする    <A HREF="#マ−カ−名">・・・</A>
        同じHTMLファイルの特定の場所を画面の最上部に表示する
        表示する文書位置にはあらかじめ<A>タグのNAME=マ−カ−名を指定
            <A NAME="マ−カ−名"></A>
             ホットテキスト側は<A>タグのHREFに指定するURLとして「#」(シャ−プ)とマ−カ−名を指定
           <A HREF="#マ−カ−名">ホットテキスト</A>
      このタグ集の「ペ−ジの先頭へ」は この設定です

    4 他のペ−ジの場所を指定してへリンクする    <A HREF="URL#マ−カ−名">・・・</A>
        他にあるHTMLファイル(他ペ−ジ)の特定の場所を画面の最上部に表示する
        表示する文書位置にはあらかじめ<A>タグのNAME=マ−カ−名を指定
            <A NAME="マ−カ−名"></A>
             ホットテキスト側は<A>タグのHREFに指定するURLとして HTMLファイル名 「#」(シャ−プ)とマ−カ−名を指定
           <A HREF="HTMLファイル名#マ−カ−名">ホットテキスト</A>

    5 マ−カ−名付ける    <A NAME="#マ−カ−名">・・・</A>
        HTMLファイルにマ−カ−名を指定する
        同一ペ−ジ内でマ−カ−位置の文書をすばやく表示したり他のHTMLファイル内でマ−カ−位置の文書を表示するための
        目標として使われます
        マ−カ−の指定方法法は次のように指定する
            <A NAME="マ−カ−名">テキスト</A>
          テキストの部分は他のハイパ−リンクのように色が変わったり下線が付いたりせず本文の表示と同じ
          マ−カ−指定のハイパ−リンクを使うとテキストの文字がプラウザの最上部に表示される
          またテキストを入れないでマ−カ−名の指定だけが出来る
           <A NAME="マ−カ−名"></A>
                 このような場合はこのタグの次にある文書がプラウザの最上部に表示される 

    ペ−ジの先頭へ 

     ホ−ムペ−ジ作りのご参考にお役立てください
    InternetExplorerでは 表示 ソ−スにて編集してください
    NetscapeNavigator4.0Composerでは 編集−HTMLソ−スにて編集してください   
    ファイル(F)−印刷 にて保存してください