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



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

HTMLをはじめて書くときにも、ブログでちょっと見た目を調整するときにも、たくさん出てくるbrタグ。これは、文章を改行するときに使うタグです。でも多用すると読みづらくなってしまうこと、知ってましたか?

今回は、brタグを使わずにいい感じに文章を整える方法を、お伝えしちゃいます!

目次
  1. HTMLの改行とは何か?
  2. HTMLで改行を行うタグ
  3. brタグで改行する
  4. brタグで改行する場合の不具合
  5. おすすめ!pタグで改行する方法
  6. 段落幅を調整する方法
  7. 改行を禁止する方法
  8. まとめ

HTMLの改行とは何か?

image

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

HTMLで改行を行うタグ

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

brタグで改行する

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

<br>

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

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

brタグなしでの表示結果

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

brタグを入れた表示結果

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

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

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

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

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

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

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

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

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

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

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

<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」の2つの設定を作りました。

表示結果
<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; }

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

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

```

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

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

まとめ

スマートフォン対応のブログやサイトでは、ストレスなく記事を読んでもらうことも閲覧数アップに繋がりますので、気をつけたいですね。ぜひ、段落変更には積極的にpタグを使っていきましょう!

補足:<br>と<br />の違いは?
サイトによってまちまちなbrタグの表記。<br>はHTML4規格での表記、<br />はXHTMLというファイルの際に使う表記方法です。最新のHTML5ではどちらの書き方でもちゃんと反映されます。ただし、今後の修正のことを考えると、自分のサイトの中では統一しておいたほうが安心です。

のりぴよ
この記事を書いた人
のりぴよ

人気記事

  1. 『Java』研修ならここ!Javaの研修が受けられる企業 5選
    『Java』研修ならここ!Javaの研修が受けられる企業 5選
    Java
    プログラミング研修
  2. 【初心者も安心!】社会人でも通いやすいプログラミングスクール30選
    【初心者も安心!】社会人でも通いやすいプログラミングスクール30選
    プログラミング学習
    プログラミングスクール・サービス
  3. どこがオススメ!?9つのプログラミングスクールを価格で徹底比較
    どこがオススメ!?9つのプログラミングスクールを価格で徹底比較
    プログラミングスクール・サービス
    プログラミング学習
  4. 「エンジニアは女性のキャリアとして魅力的」モノづくり好き理系女子がWebエンジニアへ転職するまで
    「エンジニアは女性のキャリアとして魅力的」モノづくり好き理系女子がWebエンジニアへ転職するまで
    転職
    エンジニア
  5. 「今までの経験×プログラミングが自分の強み」異職種からエンジニアへの転職が成功する理由
    「今までの経験×プログラミングが自分の強み」異職種からエンジニアへの転職が成功する理由
    転職
    エンジニア
  6. Webマーケティング・制作の内製化によりコスト削減と運用スピードの向上を実現する【オリックス株式会社】
    Webマーケティング・制作の内製化によりコスト削減と運用スピードの向上を実現する【オリックス株式会社】
    企業PR
\ 無料体験開催中!/自分のペースで確実に習得!
オンライン・プログラミングレッスンNo.1のCodeCamp