[5] テキストを改行(<br>)してみよう

最終更新日:2017年09月14日  (初回投稿日:2010年09月27日)

今回は、本文を改行する要素 <br> を使います。
「br」は「break」の略。ブレークですね。折る、切る、断つと言った意味です。

使用する要素 <br> (終了タグはありません)

br要素を入れたところで改行される

前回 [4] テキストに見出し(<h1>から<h6>)をつけてみよう のファイルの1番下、最後にコピペで足したテキストに、下のように適当に<br>を入れてみましょう。

<!DOCTYPE html>
<html>
<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>要素で改行して読みやすくしているのですが、本文テキストじゃないからでしょうね。ハイパーリンクの部分なので。

<a href="xxxxx">アクセス</a><br>
<a href="xxxxx">お問い合わせ</a><br>
<a href="xxxxx">会社概要</a>

これはリストのための <ul>要素 <li>要素で整えるのが一般的(<ul> <li>はいずれやります)
このほか <div>要素で <a>〜</a>を1つずつ囲んでもいいと思います(<div>も後日、わりと近いうちにやります)

<ul>
<li><a href="xxxxx">アクセス</a></li>
<li><a href="xxxxx">お問い合わせ</a></li>
<li><a href="xxxxx">会社概要</a></li>
</ul>

次回予告

では次回は、段落を表す要素 <p> を使いましょう。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

テーマ : webサイト作成
ジャンル : コンピュータ

tag : HTMLソース br要素

スポンサーリンク

コメントの投稿

No title

段落を表す要素 <p> を紹介しま〜す。
へ飛びません。
(余談です)またG4死にました
に飛ぶリンクが二つもあります。

Re: No title

ん〜と、言ってる意味がよくわからんけど、このサイトのリンクはブログシステム(FC2)におまかせ♪なんです。でもまあ、初めて来るとわかりにくいよね。(そう思って INDEX も作ってます。ご利用ください)

この記事は「 [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死んだ話はすっかり忘れてた。懐かし〜(笑)
スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
09 | 2017/10 | 11
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.