コンピューター100%

HTMLテクニック

  1. テキストのクリックでラジオボタン、チェックボックスを選択する
  2.  フォームに使われるラジオボタンとチェックボックスを使う場合に、通常では右にある説明のテキストをクリックしてもだめで、その部品自体をクリックしなければそれにチェックを入れることができません。
     これは、人間の目にはその説明だという関連性がすぐに見て取れるのですが、ブラウザ側からは知ることができないからです。そこで、それを関連付けることにより、説明文をクリックしてもラジオボタンやチェックボックスをクリックすることができるようになります。
     それには、フォームの部品にID属性をつけ、説明分を<LABEL>〜</LABEL>で囲み、この<LABEL>にFOR属性に関連させたいフォーム部品にIDで付けた値を設定します。
     ○設定方法  
     <INPUT TYPE=checkbox | radio ID=関連名><LABEL FOR=関連名>説明のためのテキスト</LABEL>

     □設定例  
     <INPUT TYPE=checkbox ID=ifzorome><LABEL FOR=ifzorome>ぞろめ(数字がそろった場合)もキリ番とする</LABEL>

     ◇動作(下のテキストの部分をクリックしてみてください)
       

  3. 線が立体的でないテーブルを作る
  4.  テーブル(<TABLE>)を使って表を作り、枠線を表示させると線が立体的に表示されてしまいます。
     その線を平面的にするには、背景色を線の色にしたテーブルの上に、セルの間を空けたテーブルを重ねて入れ子にします。
     
    ←重ねる  
      
      
     下の土台となるテーブルの背景色を線の色にし、セルをひとつだけ作成します。また、[CELLPADDING][CELLSPACING]の属性に[0]を設定します。
     上のテーブルの[CELLSPACING]属性に、線の太さを設定し、中にセルを配置してレイアウトします。そのセル一つ一つに背景色を設定します。
     ○設定方法  
    <TABLE BGCOLOR="線の色" CELLPADDING="0" CELLSPACING="0"><TR><TD><TABLE CELLSPACING="線の太さ" WIDTH="幅" HEIGHT="高さ"><TR><TD BGCOLOR="セルの背景色">1</TD><TD BGCOLOR="セルの背景色">2</TD></TR><TR><TD BGCOLOR="セルの背景色">3</TD><TD BGCOLOR="セルの背景色">4</TD></TR></TABLE></TD></TR></TABLE>  

     □設定例  
    <TABLE BGCOLOR="#E24F32" CELLPADDING="0" CELLSPACING="0"><TR><TD><TABLE CELLSPACING="5" WIDTH="300" HEIGHT="100"><TR><TD BGCOLOR="#FFFF00">1</TD><TD BGCOLOR="#FF00FF">2</TD></TR><TR><TD BGCOLOR="#00FFFF">3</TD><TD BGCOLOR="#00FF00">4</TD></TR></TABLE></TD></TR></TABLE>  

    表示  
    12
    34

    ※Internet Explorerの場合は、以下のようにすることで1ピクセルの影のない枠線にすることができますが、Netscapeではやはり立体的に表示されてしまいます。  
    <TABLE BORDER="1" BORDERCOLOR="線の色" BORDERCOLORDARK="線の色" BORDERCOLORLIGHT="線の色" CELLSPACING="0" BGCOLOR="背景色" WIDTH="300" HEIGHT="100"><TR><TD>1 </TD><TD>2 </TD></TR><TR><TD>3 </TD><TD>4 </TD></TR></TABLE>  

      
    1 2
    3 4
  5. <TABLE>と<TR><TD>の間に<FORM>を入れるのは危険!
  6. <TABLE>で<FORM>をレイアウトして組むと、項目名とテキストボックスを整列できますが、上下になぜか空白ができてしまうことがあります。
     それを回避するのに、<TABLE><FORM><TR><TD>〜</TD></TR></FORM></TABLE>のように、<TABLE>と<TR><TD>の間に<FORM>を入れ、その空白を無くすという方法があり、有名な本などでも紹介されていたりするのですが、これは大変危険です。
     なぜなら、この方法を使うと、Netscape7.0というブラウザでフォームが表示されなくなるからです。
     InternetExplorerが主流ではありますが、表示が速く、タブブラウザとしても使いやすいNetscape7.0を使っている人もいます。
     フォームが表示されないと、検索ができない、掲示板に書き込めない、買い物ができない、等の数多くの操作ができなくなり非常に不便ですし、使い物にならなくなる場合もあります。
     WindowsでNetscape7.0を使っている人ならば普通はInternetExplorerも使えるので切り替えれば何とかなりますが、LinuxなどNetscape7.0しかない人にとっては致命的です。
     ですから、もし自サイト内で<TABLE><FORM><TR><TD>の形で使っている場合は、<TABLE><TR><TD><FORM>のような形に直すことをお勧めいたします。

  7. URLの指定方法による違い
  8. HTMLファイルから他のHTMLファイルや画像などにリンクを張る際にそのファイルの位置を示すURLを記述する必要があります。
    具体的には、リンクをクリックした時に他のページを表示するようにするには、
    <a href="ファイル名">表示するリンクテキスト<a>
    と記述します。この「ファイル名」の指定方法にインターネット上でどこからでも使える絶対URLと、リンク元のファイルから見たリンク先のファイル位置を指定する相対URLとがあります。

    たとえば、 [http://www.xxx.com/]
    というドメインがあるとします。
    [bbb]というディレクトリをルート直下に作成し、そこにリンクを張ったHTML[file1.html]を置く。
    [file1.html]の絶対URLは[http://www.xxx.com/bbb/file1.html]。
    相対URLはこのファイルを基準として考えるので、自分自身となります。[file1.html]

    そのファイルから同じディレクトリにある[file2.html]へリンクするには・・・
    絶対URLで指定するにはドメイン名からフォルダ名、ファイルを順にすべて指定していくので、
    [<a href="http://www.xxx.com/bbb/file2.html">file2.html<a>]
    となります。
    相対URLでは、[file1.html]を基準として[file2.html]は同じフォルダにあるのでただファイル名を指定するだけでOKです。
    1.[<a href="file2.html">file2.html<a>]
    上のような感じです。また、[./]は同じフォルダをあらわすのでそれをファイル名の前につけても構いません。
    2.[<a href="./file2.html">file2.html<a>]
    また、上位のフォルダにあるファイルをを表すには[../]をつけます。
    相対URLはこのように何もつけないか、[./]をファイル名の先頭につけて指定できます。

    そして、この絶対URL・相対URL以外にも、絶対的相対URLというのがあります。
    これは、[/]だけをパスの先頭につけるもので、この場合リンク元のファイルからではなく、ルートディレクトリからの相対URL指定になります。
    このリンク元ファイル[file1.html]のルートディレクトリは[http://www.xxx.com/]です。 このルートディレクトリからの[file2.html]への相対URLを指定することになります。 [bbb]ファイル内に[file2.html]があるのでURLの指定方法は
    [<a href="/bbb/file2.html">file2.html<a>]
    となります。 [file1.html]からの相対URLと間違えて
    [<a href="/file2.html">file2.html<a>]
    すると、[bbb]ディレクトリにある[file2.html]ではなく、ルートディレクトリにある[http://www.xxx.com/file2.html]へのリンクになります。
    ルートディレクトリからの相対URLになり、リンク元のファイルの位置に関係しないという点では絶対URLの性質をもつリンク方法です。
ページ内検索
文章内から検索:
ランキング
著作権表記
Copy right © Ship.
PR