タグチップス



★ HTMLの文字化けを防止する
★ インデントを使う
★ メーラーを立ち上げずにメールを送信する
★ 透過画像ファイルについて
★ 画像の width、height、alt について
★ リンクの下線を消す
★ テーブルで何も文字が入ってないセルの罫線が表示されないのを防ぐ
★ 改行禁止について
★ URLの最後のスラッシュ"/"について
★ 背景画像をスクロールしない(IEのみ)
★ お気に入りのアイコンを設定する(IEのみ)

★ HTMLの文字化けを防止する

文書ヘッダに<META>タグを入れます。確実ではありませんがある程度防止できます。

<HEAD>
 :
<META http-equiv="Content-Type" CONTENT="text/html; charset=shift_jis">
 :
</HEAD>

★インデントを使う

HTMLでインデントを使うのはちょっとめんどくさいですね。次のような方法があります。

1. <BLOCKQUOTE>~</BLOCKQUOTE>を使う。
2. スタイルシートを使う。
3. 枠なしの表にする。


1. <BLOCKQUOTE>~</BLOCKQUOTE>を使う。

<BLOCKQUOTE>あああああ
<BLOCKQUOTE>いいいいい
<BLOCKQUOTE>ううううう
</BLOCKQUOTE>
</BLOCKQUOTE>
</BLOCKQUOTE>

  ↓結果
あああああ
いいいいい
ううううう

※前後に空行が入ります。


2. スタイルシートを使う。

<DIV>あああああ</DIV>
<DIV style="text-indent:40px;">いいいいい</DIV>
<DIV style="text-indent:80px;">ううううう</DIV>

  ↓結果

あああああ
いいいいい
ううううう

※margin-left でもできます。


3. 枠なしの表にする。

<TABLE>
 <TR>
  <TD colspan="3">あああああ</TD>
 </TR>
 <TR>
  <TD width="40"></TD>
  <TD colspan="2">いいいいい</TD>
 </TR>
 <TR>
  <TD></TD>
  <TD width="80"></TD>
  <TD>ううううう</TD>
 </TR>
</TABLE>

  ↓結果

あああああ
いいいいい
ううううう


★メーラーを立ち上げずにメールを送信する

フォームに HIDDEN の INPUT を1つ入れるとできます。

<FORM action="mailto:jimita@capella.freemail.ne.jp?Subject=Tips_OK" method="POST" enctype="text/plain">
<INPUT type="HIDDEN" name="Tips" value="OK" >
<INPUT type="SUBMIT" value="チップス見れたよ">
</FORM>



★透過画像ファイルについて

透過画像ファイルは GIF と PNG があります。が、NN4 は透過PNGは対応していないようです。

1. 通常のGIF



2. 透過GIF



3. 通常のPNG



4. 透過PNG




★ 画像の width、height、alt について

<IMG>タグなどの width(横幅) と height(高さ) 属性は指定したほうがいいです。これらを指定しないと、ブラウザはすべての画像を読み込まないとページを表示できない場合がある、すなわち表示速度が遅くなることがあるらしいです。
また画像を表示できないブラウザのために、alt (代替文字列)属性を指定したほうがいいでしょう。HTML4.01 では、alt 属性が必須となっているようです。


★リンクの下線を消す

アンカーに次のスタイルシートを使うとできます。

style="text-decoration:none"


<A href="http://www.yahoo.co.jp/">Yahoo</A>

  ↓結果

Yahoo


<A href="http://www.yahoo.co.jp/" style="text-decoration:none">Yahoo</A>

  ↓結果

Yahoo

★ テーブルで何も文字が入ってないセルの罫線が表示されないのを防

改行 <BR> を入れるとできます。





←改行が入ってない


←改行が入っている


★ 改行禁止について

改行を禁止するには<NOBR>~</NOBR>を使います。
が、HTML4.0では採用されなかったらしいです。スタイルシートを使えってことでしょうか。
スタイルシートでは、white-space で nowrap を指定します。
※テーブル内では<TD nowrap>を使います。


あいうえお・・・

  ↓結果

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをおんアイウエオカキクケコサシスセソタチツテトナニヌネノマミムメモヤユヨラリルレロワヲン


<NOBR>あいうえお・・・</NOBR>

  ↓結果

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをおんアイウエオカキクケコサシスセソタチツテトナニヌネノマミムメモヤユヨラリルレロワヲン


<SPAN style="white-space:nowrap">あいうえお・・・</SPAN>

  ↓結果

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをおんアイウエオカキクケコサシスセソタチツテトナニヌネノマミムメモヤユヨラリルレロワヲン


★ URLの最後のスラッシュ(/)について

http://~/ディレクトリ名/ の最後のスラッシュ(/)はなくてもいいんですが、指定したほうがいいみたいです。これを省略すると、

ブラウザ:「http://~/~ をちょうだい。」、
サーバー:「http://~/~/ じゃないとだめぢゃ。」
ブラウザ:「んぢゃ http://~/~/ をちょうだい。」

ということになるらしいです。無駄ですね。

他の理由では、例えば http://~/~/ を開くと http://~/~/index.html が読込まれますが、2つは別の URL として認識されるので、ブラウザのキャッシュが効かなくなります。


★ 背景画像をスクロールしない(IEのみ)

BODY タグに次の属性を入れるとできます。

<BODY bgproperties="fixed">

サンプル bgpropreties.html です。

★ お気に入りのアイコンを設定する(IEのみ))

<HEAD>~</HEAD> 内に次のタグを入れるとできます。

<LINK rel="short icon" href="...">