MB-Support

パソコン初心者のサポートページ

文章を改行するには <br />

 HTML では、キーボードの [ Enter ] キーを押しても改行されません


html ソースで改行しても、ブラウザーには反映されません。 つまり、オフィスソフトのワードや、メモ帳みたいに文章を書くのとは少し異なります。



HTMLソース(メモ帳)

<html>
<head>
<title>題名</title>
</head>
<body>
 ワトソンへ 
 「忙しくなければ来てくれ!」
 「忙しくても来てくれ!」
 君の親友ホームズより
</body>
</html>

ブラウザ


改行したい位置に <br /> を入力します。

HTMLソース(メモ帳)

<html>
<head>
<title>題名</title>
</head>
<body>
 ワトソンへ <br />
 「忙しくなければ来てくれ!」<br />
 「忙しくても来てくれ!」<br />
 君の親友ホームズより
</body>
</html>

ブラウザ


空行を入れたい場合は <br /> を 2 個入力します。

HTMLソース(メモ帳)

<html>
<head>
<title>題名</title>
</head>
<body>
 ワトソンへ <br /><br />
 「忙しくなければ来てくれ!」<br />
 「忙しくても来てくれ!」<br /><br />
 君の親友ホームズより
</body>
</html>

ブラウザ


注意が必要なのは、ブラウザで文字サイズを変更した場合、 <br /> タグにも反映されます。つまり、制作者が確認している改行よりも、閲覧者の環境では多く空間ができてしまう可能性もあるでしょう。 一般的な文章の場合は、文章もサイズが変更されるので、見栄えに問題はありません。 しかし、単純にバランスの修正で改行を利用する場合は注意が必要です。



<br /> は、改行をブラウザに示すタグですが、文章構造的には強制的に改行を実行するタグです。通常は、段落として <p> 〜 </p>(パラグラフ)、または、一つの範囲を指定する <div> 〜 </div>(ディビジョン)の中に文章や画像を記述する事で、一段落を意味します。 その理由として、パラグラフやディビジョンの前と後には、一定の空白が挿入されます。もちろん、この空白をスタイルシートで排除する事も可能ですが、<br /> タグを使わなくても改行が可能である事に変わりありません。


HTMLソース(メモ帳)

<html>
<head>
<title>題名</title>
</head>
<body>
<p>ワトソンへ<p>
<p>「忙しくなければ来てくれ!」<br />
「忙しくても来てくれ!」</p>
<p>君の親友ホームズより</p>
</body>
</html>

ブラウザ


例えば、上の例では最初の パラグラフで宛先「ワトソンへ」を記述して、手紙の内容となる 2 〜 3 行目をパラグラフで囲み、差出人に関する「君の親友ホームズより」をパラグラフで囲んでいます。この文章では改行が4つありますが、<br /> タグを使ったのは 1 回だけです。手紙の全体を一つの文章と考えるならば、全ての文章をパラグラフやディビジョンで囲み、<br /> タグで強制的に改行しても良いでしょう。どの様に構成するかは、制作者が決めれば良いと思います。


他に、画像の横に文章を回り込ませた際、回り込みを強制的に解除する方法で <br clear="all"> 使われます。

文章に画像を回り込ませる方法 align="right"




戻る 一覧表示 次へ


BTOパソコン・ゲームPC・自作パソコンなら【TSUKUMO】 - 自作PCに必要なパーツ、豊富な品揃え

Copyright © 2013 MB-Support パソコン初心者のサポートページ All Rights Reserved.

管理人サイト閲覧方法プライバシーポリシー著作権/免責事項