【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; }

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

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

```

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

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

CodeCamp提供のデザインマスターコース

当メディアを運営しているCodeCampではデザインマスターコースを現役エンジニアのマンツーマンレッスンという形で提供しています。このコースの特徴は

  • デザインからコーディングまでWebデザイナーに必要なスキルを獲得できる
  • Webデザイナーとして転職・フリーランスも可能になる
  • 実際にWebサイトを作るのでポートフォリオとしても使用できる

詳細はこちらから確認してみてください!▶︎https://codecamp.jp/courses/master_design

一流デザイナーのスキルが身に付く

無料カウンセリングはこちら

まとめ

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

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


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

人気記事

  1. 【2022年版】社会人でも通いやすいプログラミング教室5選|選び方の基準も解説
    【2022年版】社会人でも通いやすいプログラミング教室5選|選び方の基準も解説
    プログラミング学習
    プログラミングスクール・サービス
  2. 塾講師からエンジニアへ26才で転職。先生の支えがあって成長できました。
    塾講師からエンジニアへ26才で転職。先生の支えがあって成長できました。
    受講生インタビュー
  3. 様々なフィールドで活躍するエンジニアを育てていきたい【CodeCamp人気講師 #12 舘先生】
    様々なフィールドで活躍するエンジニアを育てていきたい【CodeCamp人気講師 #12 舘先生】
    講師インタビュー
  4. 【初心者〜上級者まで】python学習におすすめの本・レベル別3選+α
    【初心者〜上級者まで】python学習におすすめの本・レベル別3選+α
    Python
    プログラミング書籍・参考書
  5. 【PHP入門徹底ガイド】初心者のための学習ロードマップ
    【PHP入門徹底ガイド】初心者のための学習ロードマップ
    PHP
    プログラミング入門
  6. コロナに負けるな!プログラミング&YouTubeで頑張る人が作るべきアプリ
    コロナに負けるな!プログラミング&YouTubeで頑張る人が作るべきアプリ
    Python
    HTML
    CSS
    お役立ち情報
    アプリ学習入門
  7. 【Twitter×Python】自分専用のエゴサーチボットを作る方法
    【Twitter×Python】自分専用のエゴサーチボットを作る方法
    Python
  8. Webデザインから見たSEO
    Webデザインから見たSEO
    Webデザイン入門
    Webデザインお役立ち情報
  9. 未経験からのWebデザイナー転職を有利にする資格4選
    未経験からのWebデザイナー転職を有利にする資格4選
    Webデザインお役立ち情報
    転職
まずは7日間お試し!人気プログラミング講座を無料公開中
オンライン・プログラミングレッスンNo.1のCodeCamp
LINE友達追加