改行、半角スペース、コメント

改行、半角スペース、コメントについて説明したページです。htmlでの改行、連続した半角スペースはpreタグを利用するとブラウザでも表示されますが、ここではpreタグを用いない方法について説明します。合わせてコメントの挿入方法についても説明します。

改行の指定方法

 「整形済みテキストと特殊文字」で説明した通り、htmlで<pre>タグを使うとブラウザで表示した時に記述した通り改行されます。<pre>タグを使わない場合は改行してもブラウザで表示すると改行されません。

 改行する場合は以下のように記述します。

1行目<br>
2行目

 上記は以下のように表示されます。

1行目
2行目

<br>タグを使う事でブラウザでは改行として扱われます。

連続半角スペースの表示

 半角スペースは1文字であればブラウザで表示されますが、「テスト     左に5つ半角スペース」等と半角スペースを連続して記述した場合は「テスト 左に5つ半角スペース」と半角スペースが1つに詰めて表示されてしまいます。

 <pre>タグを使うとそのまま連続した半角スペースも表示されますが、<pre>タグを使わない場合は以下のように記述します。。

テスト&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;左に5つ半角スペース

 上記は以下のように表示されます。

テスト     左に5つ半角スペース

 &nbsp;を使う事で連続した半角スペースでも詰めて表示されなくなります。

 &nbsp;は覚えにくいですが、HTML Project2を使っていればタグから特殊文字を選択すると簡単に半角スペースを挿入出来ます。HTML Project2の詳細は「HTML Project2について」をご参照下さい。

コメントの挿入

 htmlにコメントを挿入するためには以下のように記述します。

<!-- コメント -->

 ボックスの中にボックスを配置して入れ子にしている場合、どれが終了タグか分からなくなる場合があります。そのような場合は開始と終了タグにコメントを入れる事で分かり易くなります。

【ボックスの入れ子へのコメント利用例】
<!-- 中央と左開始 -->
<div id="centerleft">

<!-- 中央開始 -->
<div id="center">

<!-- 本文開始 -->
<div id="main">
・・・・
<div><!-- 本文終了 -->

<!-- サブ開始 -->
<div id="sub">
・・・・
<div><!-- サブ終了 -->

<div><!-- 中央終了 -->

<div><!-- 中央と左終了 -->

 又、コメントは複数行に渡って記述可能です。このため、上手く表示されないので一時的に削除したいが、元に戻す可能性もあるため消したくないと言った場合、コメントにして残しておくといった時にも使えます。

【複数行に渡るコメント】
<!-- 一時的にコメントアウト
<div id="sub">
・・・・
<div> -->
  • このエントリーをはてなブックマークに追加