HTML講座第9回
☆ソースを書く時のポイント - クイックガイド
 
point.html - Kobako Editer 
<html>
<head>
 <title>腹減り日誌♪</title>
</head>
<body>
<!--メモ:お腹減った・・・-->
天丼♪<br>
牛丼♪<br>
親子丼〜〜〜♪
</body>
</html>
1. コメントの書き方
 
2. <br>は行頭?行末?
←前回『文字の大きさや色を指定しよう』へ 次回『見出しや段落を作ろう』へ→
コメントの書き方

コメントとは、ブラウザの表示には現れないけど ソースの中に覚え書きのように書いておける文字のこと。 初心者の人や複雑なソースを書く場合、 後で見た時にどこがどこだかわからなくなったりするよね。 でもコメントを使ってメモを書き込んでおけば そんなことも少しは防げるんじゃないかな。

『ここからがコメント』という意味の記号は<!--
『コメントはここまで』という意味の記号は-->だよ

コメントはタグではないので記号と呼んだけど 使い方はタグとほぼ同様。<!-- 〜 -->の間が コメントと認識されてブラウザの表示に現れなくなるよ。

<html>
<head>
 <title>腹減り日誌</title>
</head>
<body>
<!--新メニューが出たらここに追加-->
天丼<br>
牛丼<br>
親子丼
<!--
追加するときは<br>を
忘れずに書くことっと♪
-->
</body>
</html>
オレンジの部分がコメントだよ。 1行で書いても複数行で書いてもOK。 コメント内でタグを使っても無視されるので大丈夫。

腹減り日誌 - 
天丼
牛丼
親子丼



この通りコメントの部分はブラウザには表示されないよ。
*ブラウザでの表示はこちら(別ウィンドウ)

<br>は行頭?行末?

すでに何度となく登場している改行を指定するタグの<br>だけど、 これを行頭に書くか行末に書くかでちょっと表示が変ってしまう場合がある。 HP作成ソフトの中にもその方がソースの見た目にいい為か 行頭に並べて書くソフトがあるみたいだけど、 お勧めは行末に書く方。

講座の第6回でソースだけ改行しても ブラウザでの表示は改行されずに ちょっと隙間が開くだけってのは確認したよね。 これは文字の後で改行した場合、 その改行は半角スペースと見なされるためだったね。 このため、行頭に<br>を置く形をとると・・・。

<html>
<head>
 <title>とにかくやってみて</title>
</head>
<body>
天丼(天ぷらが乗ってます)
<br>牛丼(牛肉とたまねぎが乗ってます)
<br>親子丼(親子・・・なのか?)
</body>
</html>

で示したところが文字の後での改行、 つまりは半角スペースが入るポイントだ。 そうすると、普段は特に問題はないんだけど、 ウィンドウサイズが狭い場合など、 文章は端まで来ると自動的に折り返すよね。 例えば『(牛肉とたまねぎが乗ってます)』の最後の『)』の部分で 折り返してしまったとするとその後の半角スペースは 折り返して次の行に表示される。 その直後に<br>で改行されるので・・・。

腹減り日誌 - 
天丼(天ぷらが乗ってます)
牛丼(牛肉とたまねぎが乗ってます)

親子丼(親子・・・なのか?)



実際にはは表示されないので 1行分の空行が空いて見えてしまう。

ちなみに<br>の後に改行した場合は、 半角スペースはつかないのでこういうことは起きないよ。 そういう理由から<br>は行末につけるのがお勧め。

次は見出しや段落など文章構造についてだよ。
前回は部分的に文字の大きさや色を変える方法。

ウェブ木箱HTML講座
Copyright(C) 2002 あう