基本中の基本！ブログの書き方 【 p タグと br タグ 】

こんにちは、HARU（ @HARU ）です。

一般的にブログを書くとは

このような作業のことを言います。

しかし、実際には HTML で書くための文法を足す必要があります。

４００字の原稿用紙に文章を書いていくとき

など決まりがあるように、HTML で文章を書くにも決まりがあります。

今回はブログを書けば必ず使うことになる、P タグ と br タグ について簡単に説明します。

せっかくブログを書くなら、これくらいは守って書いても罰は当たらないでしょう。

タグとは

まずタグとは何か、簡単に説明します。

タグとは、“ そのもの ” が “ そのもの ” であるとコンピュータに認識させるためのものです。

例えば、以下のようなものがあります。

それぞれ <タグ> 中身 </タグ> と囲むことによって、中身を認識させることができます。

例外に <タグ> 中身 </タグ> と囲まないタグも存在しますが、ここでは割愛しますね。

実際に本記事のソースを以下に示します。

  <h2>タグとは</h2>
  <p>まずタグとは何か、簡単に説明します。</p>
  <p>タグとは、<span class="marker">“ そのもの ” が “ そのもの ” であるとコンピュータに区別させるためのもの</span>です。</p>
  <p class="dan">たとえば、以下のようなものがあります。</p>
  <div class="box">
    <ul>
      <li>&lt;p&gt;（ 段落を意味する ）</li>
      <li>&lt;strong&gt;（ 強調する ）</li>
    </ul>
  </div>
  <p>それぞれ <span class="bold">&lt;タグ&gt; 中身 &lt;/タグ&gt;</span> と囲むことによって、中身が何か認識させることができます。</p>
  <p>例外に &lt;タグ&gt; 中身 &lt;/タグ&gt; と囲まないタグも存在しますが、ここでは割愛しますね。</p>
  <p class="dan">実際に本記事のソースを以下に示します。</p>

画面上で見ると、<h2> や <p> などは表示されません。

しかし実際にはこのように、タグで囲むことによって意味付けし、コンピュータに認識させています。

ちなみに本文の「 h2 」見出し、「 p 」段落、「 ul 」リストという意味です。

タグを使うことのメリット

タグを使うことの大きなメリットとして、CSS によるブログデザインの調整ができることです。

タグを使うことでブログデザインの管理が容易になると思ってもらえればいいでしょう。

タグを使わない場合はどうなるの？

実際に人間が読む分にはタグがあっても無くても、問題になることは少ないです。（ 正確には <br> タグだけは使っています。後記による。 ）

しかし、コンピュータからしてみれば、タグの無い文は以下のようになります。

  タグとはまずタグとは何か、簡単に説明します。タグとは、“ そのもの ” が “ そのもの ” であるとコンピュータに区別させるためのものでです。たとえば、以下のようなものがあります。<p>（ 段落を意味する ）<strong>（ 強調する ）それぞれ <タグ> 中身 </タグ> と囲むことによって、中身が何か認識させることができます。例外に <タグ> 中身 </タグ> と囲まないタグも存在しますが、ここでは割愛しますね。実際に本記事のソースを以下に示します。

タグを使わない場合、すべての文字が一文として認識され、見出しやリストなどの認識が一切ありません。

繰り返しになりますが前記の通り、タグが無くても人間が読む分には問題になることは少ないです。

しかし、コンピュータにはこのように認識されてしまうため、気持ちのいいものではありませんよね。

そういった意味でも、しっかりタグを使ってブログを書いていくことを推奨します。

p タグ

ブログのジャンルによっては、見出しやリストなどを使うことは無いかもしれません。

例えば、日常を記録する日記系ブログなど。

そんな日記系のブログを書く人でも、必ず段落というものは必要になるのではないでしょうか？

そこで使うタグが p タグ です。

    <p>これだけで文章の段落と認識されます。</p>
  

br タグ

p タグと同様に、使われる頻度が高いタグがこの br タグ です。

<br> や <br /> と２種類ありますが、どちらを使用しても問題ないらしいです。

このタグは改行を意味するタグで、タグを知らずにブログを書いている人でもほとんどが使っているはずです。

ちろん、間違った使い方ですが。

下記の例を確認してください。

  タグとは<br />
  まずタグとは何か、簡単に説明します。<br />
  タグとは、“ そのもの ” が “ そのもの ” であるとコンピュータに区別させるためのものでです。<br />
  <br />
  <br />
  たとえば、以下のようなものがあります。<br />
  <br />
  <br />
  <p>（ 段落を意味する ）<br />
  <strong>（ 強調する ）<br />
  <br />
  <br />
  それぞれ <タグ> 中身 </タグ> と囲むことによって、中身が何か認識させることができます。<br />
  例外に <タグ> 中身 </タグ> と囲まないタグも存在しますが、ここでは割愛しますね。<br />
  <br />
  <br />
  実際に本記事のソースを以下に示します。<br />

説明のため、br タグが見えるようにしていますが、人間の目には普段は見えません。

br タグを使ったところには、一種の空白のようなものが作られます。

この例では br タグを使って改行をし、空白を作ることによりブログのレイアウト調整を行っています。

この使い方は br タグの使い方として間違っています。

br タグの間違った使い方

前述した通り、br タグを使ってのブログのレイアウト調整を行うことは間違った使い方です。

そもそも br タグには改行という意味しかないので、当然と言えば当然です。

しかし、この br タグの使い方こそ、よく間違えて使っている人の使い方になります。

もちろん、私も昔やっていましたｗ

タグを知らない方であれば、エンターキーで改行することにより、文章の見え方を整えようとします。

このエンターキーで改行する動作により、人間には見えない br タグを打ち込んでいることに皆さんは気づいていません。

実際、Blogger 公式エディタ上、HTML で作成しない人向けの画面（ 作成ビュー ）では、自動的にエンターキー ＝ br タグを挿入することになっています。

    <p>改行したい場合<br />
    pタグの中であれば、brタグを使っても問題ありません。</p>
  

    <p>ただし、pタグ内でも<br />
    <br />
    <br />
    このように見え方を整えるのはNG。</p>
  

br タグの説明を読んで

今までの説明で、気づいた読者もいるかと思います。

基本的に br タグは使う必要がないタグなのです。

もちろん、文が長くなり改行したいというときは使えるでしょう。

しかしその場合、p タグで区切った方が CSS 等を使用した際に便利です。

まとめ

いかがだったでしょうか？

ブログを書くにも、ちょっとしたルールがあることがわかったかと思います。

p タグ、br タグについて触れる程度だったので、入門編には丁度よかったのではないでしょうか？

うまく説明できていないかもしれませんが、少しでも参考になったら嬉しいです。