色の指定 HTMLのベーシック目次 HTMLレベル3の拡張機能目次

よくあるHTMLの記述ミス

HTML文書を書くのは非常にやさしい反面、そのぶんタイプミスや記述の誤りなどが起こりやすいのも事実です。

引用符による記述ミス

URLを記述する際、引用符で囲むわけですが、その引用符を忘れたり付けすぎると表示はおかしくなります。
	
	
	<a href="http://www.cybersaizensen.com/>Hollywood Saizensen</a>
				↑
			  クォートの付け忘れ
	<img src="images/hlmap.gif name="map">
		      ↑
		 クォートの付け忘れ
	
	

終了タグの間違い

よく起こるミスの1つで、<hy>(見出し)タグの開始タグと終了タグへ違うレベルを指定しまうことがあります。
	
	
	<h2>はじまり</h3>
		 ↑
	  終了タグが開始タグと違う
	
	
また、終了タグのスラッシュ「/」を忘れるケースは少なくありません。下記の例だと、最後まで整形テキストが続いてしまうわけです。
	
	
	<pre>
	これは整形テキストです。
	<pre>
	↑
	スラッシュがない
	
	

タグの入れ子ミス

タグを入れ子にした場合、終了タグの位置を間違えると表示がおかしくなります。また、アンカータグ<a>のような入れ子にできないものを入れ子にするミスも多いようです。
	
	
	<strong>This is <em>wrong</strong> text.</em>
			    ↑          ↑
			  タグの順序ミス
	
	<a href="www.cybersaizensen.com">This is <a href="~yokochin/">Yokochin</a>'s movie page.</a>
					  ↑		       ↑
						  入れ子のミス
	
	

縦スペース

ブラウザ(閲覧ソフト)によって、<p>(段落)タグの取り扱いが違うこともあります。あるブラウザはタグを重ねて書いたのを無視して1回分だけ改行したり、またあるブラウザはタグの回数分だけ改行したりと、一定しておりません。したがって、複数行を空けたい場合、<br>(改行)タグを使ったほうが確実でしょう。

大文字と小文字

HTMLタグ」の項でタグに大文字小文字の区別がないと書きました。しかし、ファイル名は事情が違います。Windowsのエクスプローラはやはり区別がなく、HTML文書のファイル名もそのつもりでいると、サーバーによってはアップロードしたファイルのリンク機能が働かなくなってしまいます。

たとえば、マッキントッシュで「document.html」という文書をサーバーへアップロードする際、ファイル名は「Document.html」に変わったのを気づかず、別の文書から元の「document.html」名で設定したリンクが機能せず悩まされたかたはおられるでしょう。やはり、ふだんから大文字小文字をきちんと区別しておくほうが賢明です。

アンカーとマーカの関係

ハイパーリンクのポイント(アンカー)にマーカを付けたい場合、ブラウザによって、
	
	
	<a name="home"><a href="http://www.cybersaizensen.com/">Hollywood Saizensen</a></a>
	
	
このように、アンカーをマーカで囲むように記述しなければならない場合があります。

Hollywood Saizensen (アンカーをマーカで囲んだもの)

Hollywood Saizensen (マーカをアンカーで囲んだもの)

マーカをアンカーで囲んだものは、ハイパーリンク・ポイントとして機能しないことがあります。ご覧になっているブラウザはいかがでしょうか?

空白の作り方

記述ミスとは関係なく、HTML文書で簡単に空白を作る方法をご紹介しておきます。日本語の場合、全角スペースでも空白を作れますが、これだとブラウザを英語の設定で見た時に文字化けしてしまうのです。この問題は、HTML文書で半角スペースを表わす「&nbsp;」という特殊文字が定義されているのを使えば解消できます。

	
	
	ここと&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ここの間
	
	
ここと         ここの間

縦スペースを挿入するには、次の方法があります。 <br>または<p>タグを重ねます。

<pre>タグを使って、次のように指定します。

	
	
	<pre>
	 :
	 :
	空けたいスペース分の行
	 :
	 :	
	</pre>
	
	
また、透明の画像を使えば、ピクセル単位で縦横方向のスペースが空けられます。
	
	
	<img src="space.gif" width=n height=n>
	
	
邪道とはいえ、半角スペースへ<hy>(見出し)タグを一緒に使う手もあります。
	
	
	ここから<p>
	<h1>&nbsp;</h1>
	<h1>&nbsp;</h1>
	ここまで、レベル1の見出し2個分の縦スペースを挿入しました。<p>
	
	
ここから

 

 

ここまで、レベル1の見出し2個分の縦スペースを挿入しました。

ご覧のブラウザで<hy></hy>の間に何も挟まなければどうなるかは、以下の記述例でご確認ください。

	
	
	ここから<p>
	<h1></h1>
	<h1></h1>
	ここまで、レベル1の見出し2個分の縦スペースを挿入しました。<p>
	
	
ここから

ここまで、レベル1の見出し2個分の縦スペースを挿入しました。



Copyright (C) 1996-2003 by Yasukazu Yokoi. All Rights Reserved.