改行

トップ > 逆引きリファレンス > 改行

改行するには

文章を適度な位置で改行するには、<br> を用います。

HTML
この位置で<br>
改行します。

<br> は行頭ではなく行末に用いるようにしましょう。行頭に用いた場合、ブラウザの横幅によって 1行改行したつもりが 2行改行されてしまうことがあります。

HTML
国敗れて山河あり<br>
城春にして草木深し<br>

改行を用いる場合、常に「ページを見ている人のブラウザの横幅は自分とは異なる」ことに注意しましょう。例えば、

HTML
遠路はるばる、ようこそいらっしゃいました。<br>
当店では選りすぐった商品を・・・

といった表現は、ブラウザの横幅によっては次のような個所で改行されてしまったりします。

HTML
遠路はるばる、ようこそいらっしゃいまし
た。
当店では選りすぐった商品を・・・

1行1行が独立した意味を持つ場合は、<div>を用いるのがよいでしょう。

HTML
<div>Copyright (C) 2003 杜甫々</div>
<div>初版:2003年9月23日</div>

ソースコードなどを表示するには、<pre> を用います。

HTML
<pre>
// ソースコード表示などにおすすめ
main()
{
    printf("hello, world");
}
</pre>

改行を禁止するには

HTML4.01 には採用されていないタグですが、<nobr> を用いると楽です。

HTML
<nobr>この文章はブラウザの横幅に関わらず改行されません。</nobr>

テーブルの内部であれば、<td><th> に nowrap 属性を指定する方法もあります。

HTML
<table>
<tr><td nowrap>この文章も改行されません。</td></tr>
</table>

中途半端な位置での改行を抑止するには

中途半端な箇所で改行したくないという場合は、<nobr><wbr> を組み合わせます。<nobr> は改行禁止を、<wbr> は改行禁止中だけれども特別に改行を許す箇所を指定します。

HTML
<nobr>織田信長、<wbr>豊臣秀吉、<wbr>徳川家康</nobr>

<nobr> のみを用いて実現することも可能です。

HTML
<nobr>織田信長、</nobr><nobr>豊臣秀吉、</nobr><nobr>徳川家康</nobr>

上記のようにすることで、下記のように名前の途中で改行されてしまうのを防ぐことが可能になります。

表示
織田信長 豊臣秀吉 徳川家
表示
織田信長 豊臣秀吉
徳川家康

改行の際の隙間を無くすには

日本語の途中で改行していると、そこの個所に妙な隙間が開いてしまいまうことがあります。

HTML
こんなところで改
行すると・・・
表示
こんなところで改 行すると・・・

これを防ぐには、文章を改行しないで記述するか、下記の様にコメントを入れると回避できるようです。

HTML
こんなところで改<!--
-->行しても大丈夫
表示
こんなところで改行しても大丈夫

Copyright (C) 2003-2017 杜甫々
初版:2003年10月12日、最終更新:2017年12月17日
http://www.tohoho-web.com/how2/break.htm