初心者さんのためのミニWEB語録 *** HTMLタグ紹介 -1- ***

2017.10.02

このエントリーをはてなブックマークに追加

 

皆さん、こんにちは(・ω・)ノ

中村@新人です。

 

今回は私が覚えたHTMLタグを一つ紹介します。

 

● <br> 改行タグ

<br>は文章の途中で改行したい時に使用する改行タグです。

通常タグは <p> 文章 </p> のように前後で挟まないといけないですが、<br>は文章の改行したいところに入れるだけでOKです。

 

どんな時に使うかというと…

例えば、長い文章があるとします。

 

昔々、あるところに、おじいさんとおばあさんが住んでいました。ある日、おじいさんは山へ柴刈りに、おばあさんは川へ洗濯に行きました。おばあさんが川で洗濯をしていると、ドンブラコ、ドンブラコと、大きな桃が流れてきました。おばあさんはその大きな桃を拾い上げて、家に持って帰りました。おじいさんとおばあさんが桃を切ってみると、中から元気の良い赤ちゃんが出てきました。子どものいなかったおじいさんとおばあさんは大喜びで、桃から生まれた男の子を桃太郎と名付けました。 (民話:桃太郎 冒頭部分)

 

こんな風に文章を区切らずにずらずら表示すると、ちょっと読みづらいですよね?

この文章を見やすくするのが<br>タグです(>ω<)

 

昔々、あるところに、おじいさんとおばあさんが住んでいました。
ある日、おじいさんは山へ柴刈りに、おばあさんは川へ洗濯に行きました。
おばあさんが川で洗濯をしていると、ドンブラコ、ドンブラコと、大きな桃が流れてきました。
おばあさんはその大きな桃を拾い上げて、家に持って帰りました。
おじいさんとおばあさんが桃を切ってみると、中から元気の良い赤ちゃんが出てきました。
子どものいなかったおじいさんとおばあさんは大喜びで、桃から生まれた男の子を桃太郎と名付けました。
(民話:桃太郎 冒頭部分)

 

全ての「。」の後に<br>を付けてみました。少し区切るだけでだいぶ読みやすくなりましたね。

ちなみにタグを表示するとこんな感じです↓

 

改行されるなら前に出てきた<p></p>の段落タグでもいいんじゃないの?と思いますよね。

一言でいうと、それもOKです (・ω・)ノ

 

昔々、あるところに、おじいさんとおばあさんが住んでいました。

ある日、おじいさんは山へ柴刈りに、おばあさんは川へ洗濯に行きました。

おばあさんが川で洗濯をしていると、ドンブラコ、ドンブラコと、大きな桃が流れてきました。

おばあさんはその大きな桃を拾い上げて、家に持って帰りました。

おじいさんとおばあさんが桃を切ってみると、中から元気の良い赤ちゃんが出てきました。

子どものいなかったおじいさんとおばあさんは大喜びで、桃から生まれた男の子を桃太郎と名付けました。

(民話:桃太郎 冒頭部分)

 

「。」ごとに<p>タグで囲うとこんな感じで表示されます。

段落で区切ることになるので<br>で改行したものに比べて幅がありますが、同じような見た目ですよね。

 

なら、一緒でいいんじゃないの?と思いますが、ちょっとだけ違いがあります。

目で見て分かりやすくするなら…

 

<br>の場合

「昔々、あるところに、おじいさんとおばあさんが住んでいました。
ある日、おじいさんは山へ柴刈りに、おばあさんは川へ洗濯に行きました。
おばあさんが川で洗濯をしていると、ドンブラコ、ドンブラコと、大きな桃が流れてきました。
おばあさんはその大きな桃を拾い上げて、家に持って帰りました。
おじいさんとおばあさんが桃を切ってみると、中から元気の良い赤ちゃんが出てきました。
子どものいなかったおじいさんとおばあさんは大喜びで、桃から生まれた男の子を桃太郎と名付けました。
(民話:桃太郎 冒頭部分)」

 

<p></p>の場合

「昔々、あるところに、おじいさんとおばあさんが住んでいました。」

「ある日、おじいさんは山へ柴刈りに、おばあさんは川へ洗濯に行きました。」

「おばあさんが川で洗濯をしていると、ドンブラコ、ドンブラコと、大きな桃が流れてきました。」

「おばあさんはその大きな桃を拾い上げて、家に持って帰りました。」

「おじいさんとおばあさんが桃を切ってみると、中から元気の良い赤ちゃんが出てきました。」

「子どものいなかったおじいさんとおばあさんは大喜びで、桃から生まれた男の子を桃太郎と名付けました。」

「(民話:桃太郎 冒頭部分)」

 

段落を一つの文章として「」をつけると、こんな感じで違いが出てきます(>ω<;)

<p></p>は「。」ごとに一つの段落として区切っているので「」が多くなってます。

<br>は一つの文章の中で改行をしているだけなので「」が一つだけになるんですね。

 

 

じゃあ、一つの文章にしたいものは全部<br>で区切ったらいい……とは限らないところが気をつけたいポイントなのです!

 

パソコンとスマートフォンって画面のサイズが違いますよね?

最近はノートパソコンやタブレット・スマートフォンと色んな画面サイズがあるので、使っている物によって横幅の文字数が変わってきます。

 

例えばパソコンだと↓こう見えますが、

 

スマートフォンのサイズだと↓こう見えます。

 

今回は「。」で区切っているのであまり気にならないのですが、読みやすくしようと文章の真ん中などで改行してしまうと、パソコンではキレイに見えていても、スマートフォンやタブレットでは変なところで区切られている謎の見え方になっている場合があります。

 

そんな理由から最近は「<br>を使わない」ということが多くなっているのですが、必要になる場面もちょこちょこあるので覚えておきましょう♪

 

 

 

コメント

コメントフォーム

無料で今すぐ作ってみる

ブログ内検索

フィード

分からないこと、聞きたいことご相談頂ければわかりやすく・丁寧にお答えいたします。

PAGE TOP