[5] テキストを改行（＜br＞）してみよう
最終更新日：2019年03月22日 （初回投稿日：2010年09月27日）
今回は、本文を改行する要素 <br> を使います。
「br」は「break」の略。ブレークですね。折る、切る、断つと言った意味です。
| 使用する要素 | <br>
（終了タグはありません） |
|---|
br要素を入れたところで改行される
前回 [4] テキストに見出し（<h1>から<h6>）をつけてみよう のファイルの1番下、最後にコピペで足したテキストに、下のように適当に<br>を入れてみましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
〜省略〜
</head>
<body>
本日は晴天なり〜！
<h1>本日は晴天なり〜！</h1>
<h2>本日は晴天なり〜！</h2>
<h3>本日は晴天なり〜！</h3>
<h4>本日は晴天なり〜！</h4>
<h5>本日は晴天なり〜！</h5>
<h6>本日は晴天なり〜！</h6>
本日は晴天なり〜！<br>
本日は晴天なり〜！
本日は<br>晴天なり〜！
</body>
</html>
これを保存してブラウザでプレビューしてみると、下記のように、<br>が入ったところで改行されているのがわかります。
このように <br>要素は「改行」させる要素です。
テキストを HTMLコード上で改行してもブラウザでは改行されません。本文だけでなく、例えば <h2>要素の中でも同じこと。改行させたい箇所にはこの <br>要素を使います。
<br>要素は終了タグがありません。
XHTML は XMLのルールなので、終了タグも含んだ<br />と書く必要がありましたが、HTML5ではこの「 /」は不要です。（あってもエラーにはならないけど）
br要素は改行以外の用途で使わないこと
<br>要素は改行用ですので、改行以外のことで使うのはNG。
<br>要素で改行させて段落っぽく見せたりしちゃダメです。
段落にまとめる要素はちゃんとありますから（<p>要素です。次回やります）それを使います。
HTML5はこのように、1つひとつの要素の役割が決まっていて、その役割にピッタリの箇所に使っていくルールになっています。
見出しを表示したいなら見出し用の要素、段落を表示したいなら段落用の要素、と言った具合です。
これを セマンティックなマークアップ（semantic markup）と言います。
「semantic」は「意味論の」「意味論的な」と言った意味の形容詞です。
まあ「ちゃんと役割どおりの要素を使って意味のあるマークアップをしろ」的なことです。
<br>要素は、本文テキストを読みやすくするための「改行」にのみ使います。
詩や俳句など、改行が大事なものには必須ですね。
こんな風に↓使うのもOK。1行で見せるより読みやすいよね。
東京タワー所在地<br>
〒105‐0011<br>
東京都港区芝公園4‐2‐8
下の例はNGなんだって。（まだ紹介していないリンク用の要素<a>を使っていますが）
リンクメニューを <br>要素で改行して読みやすくしているのですが、本文テキストじゃないからでしょうね。ハイパーリンクの部分なので。
（これはNGな例です）
<a href="xxxxx">アクセス</a><br>
<a href="xxxxx">お問い合わせ</a><br>
<a href="xxxxx">会社概要</a>
これはリストのための <ul>要素 <li>要素で整えるのが一般的（<ul> <li>はいずれやります）
このほか <div>要素で <a>〜</a>を1つずつ囲んでもいいと思います（<div>も後日、わりと近いうちにやります）
（これはOKな例）
<ul>
<li><a href="xxxxx">アクセス</a></li>
<li><a href="xxxxx">お問い合わせ</a></li>
<li><a href="xxxxx">会社概要</a></li>
</ul>
次回予告
では次回は、段落を表す要素 <p> を使いましょう。
- 関連記事
-
- [11-3] 同じページ内でリンクしよう
- [11-2] リンクの文字の色を変えよう（CSS使用）
- [11-1] 他のページにリンクしよう
- （ちょっとメモ）index.html という名のファイル
- [10] 絶対URL と 相対URL（絶対パス と 相対パス）
- [9-2] 画像にテキストを回り込ませよう（CSS使用）
- [9-1] 画像を表示しよう img要素
- [8]コメントを入れよう
- [7] ＜div＞や＜span＞で特定の範囲を指定しよう
- [6] 段落に＜p＞要素を使おう（ついでにCSSで整えてみよう）
- [5] テキストを改行（＜br＞）してみよう
- [4] テキストに見出し（＜h1＞から＜h6＞）をつけてみよう
- [3] !DOCTYPE宣言をしよう
- [2] タイトル（title要素）を設定しよう
- [1] テキストエディタで書いてみよう
やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します！ (笑)
初心者にも使いやすい（と思う）レンタルサーバー
「初心者ですがレンタルサーバーはどこがいい？」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、
スターサーバー
や ロリポップ！
です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。
ちょっと料金は高いけど、さくらのレンタルサーバ
や、エックスサーバー
は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。
スポンサーリンク
コメントの投稿
No title
へ飛びません。
（余談です）またG4死にました
に飛ぶリンクが二つもあります。
Re: No title
この記事は「 [5] br要素」なので、「 [6] p要素」の記事に飛ぶには、
記事の直後にある「関連記事」のリンクを使うか、
INDEX を使ってみてください。
●はじめてのHTML INDEX
http://honttoni.blog74.fc2.com/blog-entry-21.html
●HTML要素 索引（ここで「P」で探すとか）
http://honttoni.blog74.fc2.com/blog-entry-69.html
くだらない余談がたくさん挟まっていてゴメンなさい。
G4死んだ話はすっかり忘れてた。懐かし〜（笑）
