ITキャリアの悩みをカウンセラーが解決! 無料ITキャリア相談はこちら

【図解入り!】5つのポイントでHTML改行が理解出来る

作成: 2016.10.21 更新: 2020.06.01

>>2020年テクノロジー業界に挑戦すべき5つの理由

不安定な時代を生き残るための限定資料はこちら

この記事をご覧になっているあなたはHTMLを学び始めてまだ間もないかもしれません。

htmlソースで改行しても、ブラウザに反映されないということありませんか?

ご安心ください。HTMLの基本文法を学習し終え、プログラミングスクール「テックキャンプ プログラミング教養」講師の私が実際にソースコードを書いて表示を確認しながら解説していきます。

かくいう筆者も改行の仕方を理解することで、HTMLの技術力を向上させることができました。

ここで理解してフロントエンジニアの第1歩を踏みましょう。

この記事は現役エンジニアによって監修済みです。

HTMLの改行とは?

HTMLでコードを書いていくとき、Wordのように「enterキー」を押しても改行されません。

実際にソースコードを見ていきましょう。

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
    enterを押して改行しても改行できない
    enterを押して改行しても改行できない
    enterを押して改行しても改行できない
  </body>
</html>

上記のコードをブラウザに反映させると、以下の画像のようになります。

example

HTMLでは、ソースでenterキーを押して改行しても半角スペース一つ分として認識されます。

実際に改行したい場合はbrタグというものを使っていきましょう。

brタグ

brとは、breakの略であり、breakは改行という意味です。
<br>一つにつき、一回改行が行われます。

実際にソースコードを見ていきましょう。

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
    brタグをつけると改行できる。<br>
    改行できました。<br>
    改行できました。
  </body>
</html>

上記のコードをブラウザに反映させると、以下の画像のようになります。

d2baaa3454ccbc80e0dc16b03e220ae1

上図のようにbrタグを入れた箇所が改行されました。
なお、このbrタグは閉じる必要はなく単独で使うことができます。

pタグ

<p>の「p」は「paragraph」の略であり文章の節や段落など、文章のまとまりを明確にすることができます。

実際にソースコードを見ていきましょう。

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
    <p>
      sample text
    </p>

    <p>
      サンプルテキスト
    </p>
  </body>
</html>

上記のコードをブラウザに反映させると、以下の画像のようになります。

8c7829e94d1b0904ea4fab04299b40fa

pタグで囲まれたところは一つの文章となり、改行もされてます。

brタグとpタグの違い

brタグとpタグの改行方法をご紹介しましたが、どちらの方法で改行を行えばいいのかを解説していきます。

まず、pタグのみを使ったソースコードを見ていきましょう。

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
    <p>
      この記事を見てるあなたはHTMLを学び始めてまだ間もないかもしれません。
      htmlソースで改行しても、ブラウザに反映されないということありますよね?
      でもご安心ください。HTMLの基本文法を学習し終え、プログラミングスクール「テックキャンプ プログラミング教養」講師の私が実際にソースコードを書いて表示を確認しながら解説していきます。
      かくいう筆者も改行の仕方を理解することで、HTMLの技術力を向上させることができました。
      ここで理解してフロントエンジニアの第1歩を踏みましょう。
    </p>

    <p>
      HTMLでコードを書いていくとき、Wordのように「enterキー」を押しても改行されません。
      実際にソースコードを見ていきましょう。
    </p>
  </body>
</html>

上記のコードをブラウザに反映させると、以下の画像のようになります。

image

上図のようにpタグで段落のところは改行できていますが、pタグの中の文章が改行できていません。
そこでbrタグを使います。実際にソースコードを見ていきましょう。

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="newline.css">
  </head>
  <body>
    <p>
      この記事を見てるあなたはHTMLを学び始めてまだ間もないかもしれません。<br>
      htmlソースで改行しても、ブラウザに反映されないということありますよね?<br>
      でもご安心ください。HTMLの基本文法を学習し終え、プログラミングスクール「テックキャンプ プログラミング教養」講師の私が実際にソースコードを書いて表示を確認しながら解説していきます。<br>
      かくいう筆者も改行の仕方を理解することで、HTMLの技術力を向上させることができました。<br>
      ここで理解してフロントエンジニアの第1歩を踏みましょう。
    </p>

    <p>
      HTMLでコードを書いていくとき、Wordのように「enterキー」を押しても改行されません。<br>
      実際にソースコードを見ていきましょう。
    </p>
  </body>
</html>

上記のコードをブラウザに反映させると、以下の画像のようになります。

image

上図のようにbrタグを使うことで、pタグの中で改行ができました。

まとめると、文章の一つとして改行をしたいときにpタグを使い、文章の途中で改行させたいときにbrタグを使うといいですね。

改行幅の調節方法

複数の空白行を入れるには?

複数の空白行を入れるには先ほどご紹介したbrタグを連続で書くと、改行が連続でできるので複数の空白行ができます。

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
    <p>
      sample text<br>
      <br>
      <br>
      <br>
      <br>
    </p>

    <p>
      サンプルテキスト
    </p>
  </body>
</html>

しかし、この方法ですと空白行を作るたびにbrタグを書くことになるのでDRYではありません。
(DRY…Don’t Repeat Yourselfの略で、「繰り返しを避けること」という意味です。)

そこで、スタイルシートでのやり方を紹介します。

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
    <p>
      <div style="margin-bottom:100px">sample text</div>
    </p>

    <p>
      サンプルテキスト
    </p>
  </body>
</html>

上記のコードで出てきた”margin”とは、marginプロパティのことで、ブロック要素の外側に余白を取ります。
margin-bottom:100pxとはブロック要素の下側の100px余白を取るという意味です。

1373af78eac41fa6b3471e7d3eaed86a

cssで使う記述を使うことでも、改行ができます。

期間限定で受講料が60,000円お得!オンラインでエンジニア転職を実現

テックキャンプ エンジニア転職9/16~22限定で60,000円お得!
◎受講生の3人に1人がオンライン受講。満足度は4.4/5点の高評価
まずは、ITキャリアの悩みを無料カウンセリングで相談!

スペースの非表示方法

HTMLでは、enterキーを押して改行したら、半角スペース一つ分として認識されます。
そこで、その半角スペースを非表示にしたいときにどうしたらいいのか、対処法を紹介していきます。

改行をしない

シンプルに改行をしないという方法です。
実際にソースコードを見ていきましょう。

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
    <span>サンプルテキスト</span><span>サンプルテキスト</span><span>サンプルテキスト</span>
  </body>
</html>

ここで出ているspanタグはそれ自身は特に意味を持っていませんが、インライン要素を作るHTML要素の1つです。
上記のコードをブラウザに反映させると、以下の画像のようになります。

sample

タグの中で改行させる

終了タグの”>”を書く前に改行するとスペースを非表示にできます。
実際にソースコードを見ていきましょう。

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
    <span>サンプルテキスト</span
    ><span>サンプルテキスト</span
    ><span>サンプルテキスト</span>
  </body>
</html>

上記のコードをブラウザに反映させると、以下の画像のようになります。

sample

この記事のハッシュタグ

改行をそのまま表示する書き方

preタグ

preとはpreformatted textの略で、フォーマット済みのテキストという意味です。
半角スペースや改行をそのまま表示する際に使用します。
実際にソースコードを見ていきましょう。

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
    <pre>
      sample text
      サンプルテキスト
    </pre>
  </body>
</html>

上記のコードをブラウザに反映させると、以下の画像のようになります。

sample text

改行を禁止する方法

どのような時に使うのか?

Webブラウザでは,1行の文字がウインドウの横幅よりはみ出すと次の行に自動改行されます。
そこで、自動改行をしたくない場合に改行を禁止します。

改行させない方法

改行を禁止するには、white-spaceプロパティを使います。
white-spaceプロパティとは、ソース中の半角スペース・タブ・改行の表示の仕方を指定できるものです。
今回は、改行の表示を指定したいので”nowrap”を使います。

nowrap…ソース中の連続する半角スペース・タブ・改行を、1つの半角スペースとして表示します。この指定を持つ要素の範囲では自動改行されません。

実際にソースコードを見ていきましょう。

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
    <div style="white-space:nowrap">sample text サンプルテキスト sample text サンプルテキスト sample text サンプルテキスト sample text サンプルテキスト sample text サンプルテキスト</div>
  </body>
</html>

上記のコードをブラウザに反映させると、以下の画像のようになります。

sample text

ブラウザの横幅が狭くてもこの文章が改行されていないのが分かります。

まとめ

いかがでしたでしょうか。

これからHTMLの上達を目指す方にとって、改行方法を理解することは非常に重要です。その中でもbrタグとpタグでは、改行の表示が違うのでしっかり押さえましょう。

この記事がその一助になれば幸いです。

こちらの記事もご参考ください。

【学生初心者必見】初めに覚える!HTMLタグ16選

3人に1人がオンライン受講!60,000円お得な今がチャンス!

「オンライン受講だと、学習をやりきれるか不安…」と悩んでいませんか?

転職成功率99%のテックキャンプ エンジニア転職では、「やり切れる」オンラインスタイルが大好評!

9/22までの期間限定で受講料が60,000円お得な今がチャンス。

まずは無料オンラインカウンセリングで、エンジニアへの第一歩を踏み出しましょう!

無料カウンセリングの予約はこちら

この記事を書いた人