【HTML初心者向け】brタグを使わず改行するたった1つの方法

HTMLの改行とは何か？

手書きの文章のときも、一文ごとや段落ごとなどで、意識せず新しい行に変えていますよね。HTMLで文章を書くときは、改行のためのタグを入れて行を変えます。

HTMLで改行を行うタグ

HTMLで文章の改行を行うには、brタグを使う方法と、pタグなどの段落タグを使う方法があります。

brタグで改行する

通常、改行に使うタグはこちら。行末にこれを書き加えるだけで、改行できます。

たとえばこのように使います。

セロ弾きは扉をあけて猫が風のように萱のなかを走って行くのを見てちょっとわらいました。<br>
それから、やっとせいせいしたというようにぐっすりねむりました。<br><br>次の晩もゴーシュが
また黒いセロの包みをかついで帰ってきました。<br>そして水をごくごくのむとそっくりゆうべの
とおりぐんぐんセロを弾きはじめました。

brタグなしでの表示結果

brタグを入れた表示結果

改行をわかりやすくするために、brタグを入れたところに の記号を特別に入れています。

サンプル文書出典：青空文庫「セロ弾きのゴーシュ」宮沢賢治

brタグを挿入した部分できちんと改行されましたね。

brタグで改行する場合の不具合

brタグだけでも立派に改行ができましたが、brタグのみで改行をすると、見た目がイマイチになってしまうことがあります。PCなどの広い画面で見たときには気づきづらいのですが、スマホの横幅の狭い画面で見ると、こんなふうになってしまうことも。

おすすめ！pタグで改行する方法

色々な幅の画面でも違和感なく閲覧してもらうために、おすすめなのが段落で区切るpタグを活用する方法です。

たとえばこのように使います。 <p>セロ弾きは扉をあけて猫が風のように萱のなかを走って行くのを見てちょっとわらいました。 それから、やっとせいせいしたというようにぐっすりねむりました。</p><p>次の晩もゴーシュが また黒いセロの包みをかついで帰ってきました。そして水をごくごくのむとそっくりゆうべの とおりぐんぐんセロを弾きはじめました。</p>

表示結果

pタグの範囲がわかりやすいように水色枠で囲んでいます。

段落幅を調整する方法

brタグのみを使っていた場合、段落の幅を調整するためにbrタグの数を増やして対応していた場合も多いと思います。pタグで段落を分ける場合は、pタグにCSS(スタイルシート)を設定して段落幅を調整することができます。デザインを調整するのはCSSに任せるのがHTMLの基本の考え方なので、柔軟なデザイン変更のためにもぜひ活用しましょう！

サンプルコード ``` <!-- 段落幅を調整するCSS -->

セロ弾きは扉をあけて猫が風のように萱のなかを走って行くのを見てちょっと わらいました。それから、やっとせいせいしたというようにぐっすりねむりました。

次の晩もゴーシュがまた黒いセロの包みをかついで帰ってきました。そして水を ごくごくのむとそっくりゆうべのとおりぐんぐんセロを弾きはじめました。

十二時は 間もなく過ぎ一時もすぎ二時もすぎてもゴーシュはまだやめませんでした。

<style>
.phone-kekka span{
  position: absolute;
color: red;/*文字は白に*/
  font-weight: nomal; /*太字に*/
  font-size: 1.4em;/*サイズ2倍*/
}
</style>

改行幅の小さい「p-small」、改行幅の大きい「p-large」の２つの設定を作りました。

表示結果
<div class="kekka">
<p class="p-small">セロ弾きは扉をあけて猫が風のように萱のなかを走って行くのを見てちょっとわらいました。それから、やっとせいせいしたというようにぐっすりねむりました。</p><p class="p-large">次の晩もゴーシュがまた黒いセロの包みをかついで帰ってきました。そして水をごくごくのむとそっくりゆうべのとおりぐんぐんセロを弾きはじめました。</p><p class="small">十二時は間もなく過ぎ一時もすぎ二時もすぎてもゴーシュはまだやめませんでした。</p>
</div>

<div class="phone-kekka"><p class="p-small">セロ弾きは扉をあけて猫が風のように萱のなかを走って行くのを見てちょっとわらいました。それから、やっとせいせいしたというようにぐっすりねむりました。</p><p class="p-large">次の晩もゴーシュがまた黒いセロの包みをかついで帰ってきました。そして水をごくごくのむとそっくりゆうべのとおりぐんぐんセロを弾きはじめました。</p><p class="small">十二時は間もなく過ぎ一時もすぎ二時もすぎてもゴーシュはまだやめませんでした。</p>
</div>

段落の間の幅を調整することができました！


## 改行を禁止する方法
サイト内のbrを一気に消したい場合や、brの使用を禁止したい場合にスタイルシートで制御ができます。

<div class="konkaino-tag" style="color:black;">
 br {
    display:none; 
}
</div>

この指定を行ってしまうと、サイト上のすべてのbrが反映されなくなります。もちろん、pタグの中のbrを反映させないなど、記述によって特定の場所に限って指定することも可能です。

p br { /* pタグの中のbrを反映させない */ display:none; }

セロ弾きは扉をあけて猫が風のように萱のなかを走って行くのを見てちょっとわらいました。
それから、やっとせいせいしたというようにぐっすりねむりました。

次の晩もゴーシュがまた黒いセロの包みをかついで帰ってきました。
そして水をごくごくのむと そっくりゆうべのとおりぐんぐんセロを弾きはじめました。