FujiPro「ウェブマスター」

FujiMan Production - ウェブマスター -

ホームページ制作講座 for Windows

コーヒーブレイク(2)－[Tab]と改行は無視－

トップページ＞ウェブマスター＞ホームページ制作講座＞[TAB]と改行は無視

■半角スペース・タブ(TAB)・改行(CR)を無視する

　ＨＴＭＬは半角スペースとタブ（[Tab]キーでインデントを揃えること）や改行（[Enter]キーで行を改めること）を無視します。つまり、次のふたつのＨＴＭＬでブラウズされる結果は同じになります。

改行、タブ、スペースのないＨＴＭＬ文	改行、タブ、スペースがあるＨＴＭＬ文
<HTML><BODY> Fujiman Production ホームページ<BR><BR> お気に入りサイト<BR> 阿南健治ホームページ<BR>FujiMan Production<BR>中国労災病院<BR> </BODY></HTML>	<HTML> <BODY> Fujiman Production ホームページ<BR> <BR> お気に入りサイト<BR> 　　阿南健治ホームページ<BR> 　　FujiMan Production<BR> 　　中国労災病院<BR> </BODY> </HTML>

　両者は極端な例ですが、断然、右のほうが見やすいですよね。

　つまり半角スペースやタブ、改行をうまく使って、後から見ても分かりやすいＨＴＭＬ文を作ることを心がけると更新作業もしやすいということになります。

　とくにテーブルや入れ子（タブの中に同じタブ指定が入るような構造のこと）状態になっているような場合には、開始タブと終了タブの位置が分かりにくくなってきますので、こうした工夫は、ホームページ作成ソフト（ホームページ・ビルダーやMicrosoft FrontPageなど）を使わない場合には必要になってきます。

■使用例

　いくつか使用例を挙げてみましょう。

<BODY>の色

●<BODY>タグのオプション指定

　ドキュメント全体の色や背景画を指定するそれぞれのオプションを１行ずつインデントで揃える方法です。
　こうすると、そのページでどのような色を指定しているかが一目瞭然に分かりますよね。

　さらに、"="(イコール)の位置を揃えてもいいかも知れません。

<IMG>の画像

●<IMG>タグの画像

　<IMG>タグも、同じような手法が使えますよ。右のようにすると、そこで貼り付けられる画像ファイルが何か一目瞭然ですね。

<A>のリンク先

●<A>タグのリンク先

・・・と、いうことは、<A>タグにも、同じような手法が使えるぞ。もうお分かりですよね。

<FONT>の入れ子

<FONT SIZE=-1>
　　文字を小さくして、
　　ここは<FONT COLOR=red>赤字</FONT>にして、
　　ここは<FONT COLOR=blue>青字</FONT>にします。
</FONT>

●<FONT>タグの入れ子構造

　<FONT>タグは、その作り方によっては入れ子構造になることがよくあります。

　右の例は、文章全体は小さくするんだけれども、部分的に色を変えたいという場合です。

　サイズを指定する<FONT>の中に、さらに色を指定する<FONT>が入っているわけですが、全体の（サイズを決めている）<FONT>を行を変えて、単独で記述することで、入れ子構造の親にあたることを示すことができます。

　さらに文章をインデントで１段下げると、さらに見やすくなりますね。

<TABLE>

●<TABLE>タグはインデントを活用

　テーブルもその列数や行数が多くなってくると、その数を把握するだけでも大変な作業になってきます。

　そこでインデントを活用して、右のように<TR>と<TD>を行頭にもってきて目立つようにします。こうすると「<TR>の数を数えれば行数」が、「<TD>の数を数えれば列数」が一目瞭然になってきます。

　まだ、いくつかありますが、注意点として、これらを多用すると行数の多いＨＴＭＬ文になってしまい、今度は編集作業がやりにくい・・・なんてことになりますので、うまく組み合わせて活用しましょう。

<-RETURN