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

使用する要素 <br>

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

前回のファイルの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文書上で改行しても、ブラウザで見ると改行されていませんので、このbr要素を使います。

br要素は、普通のHTML要素と違って終了タグがありません。無いっていうより省略可能なんです。
XHTMLはXMLのルールで書くので、終了タグも含んだ<br />という書き方が必要でしたが、HTML5ではこの「 /」はいらないそうです。

br要素は改行以外の用途で使わないこと

br要素は、改行用ですので、改行以外のことで使っちゃいけないことになってます。
br要素で改行させて段落を作ったり、1行ずつ改行してテキストを箱組に組んだりしてはダメ。
段落やブロックにまとめる要素はちゃんとありますから(<p>や<div>など)それを使いましょう。

br要素は、本文テキストを読みやすくするための改行で使いましょう。
詩や俳句など、改行が大事なものには必須ですね。
こんな風に↓住所などで使うのもOKです。

東京タワー所在地<br>
〒105‐0011<br>
東京都港区芝公園4‐2‐8

下のような例はNGです。(まだ紹介していないリンク用の要素<a>を使っていますが)
リンクメニューをbr要素で改行して見栄えをわかりやすくしているのですが。

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

これは、下のように、段落を表すp要素で整えてあげるのがベストです。(<p>は次回紹介します)

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

では次回は、段落を表す要素 <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
07 | 2017/08 | 09
- - 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.