テックキャンプ無料カウンセリング
資料請求はこちら

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

更新: 2021.11.12

>>No1エンジニア養成プログラム テックキャンプ

プログラミングを学習して収入を上げる秘策

この記事をご覧になっているあなたは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>一つにつき、一回改行が行われます。

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

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

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

d2baaa3454ccbc80e0dc16b03e220ae1

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

pタグ

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

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

&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;p&gt;
      sample text
    &lt;/p&gt;

    &lt;p&gt;
      サンプルテキスト
    &lt;/p&gt;
  &lt;/body&gt;
&lt;/html&gt;

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

8c7829e94d1b0904ea4fab04299b40fa

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

brタグとpタグの違い

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

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

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

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

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

image

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

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

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

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

image

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

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

10年後も食べていける職業

エンジニアは、今もっとも注目を集めている職業の1つ。市場価値の高いエンジニアにキャリアチェンジできれば、あなたの人生の選択肢は飛躍的に増えることでしょう。 3,200名以上のIT転職を支援したテックキャンプが、未経験からエンジニアになる方法を解説! 資料はこちらから無料ダウンロードが可能。※2016年9月1日〜2021年5月14日の累計実績。

改行幅の調節方法

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

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

&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;p&gt;
      sample text&lt;br&gt;
      &lt;br&gt;
      &lt;br&gt;
      &lt;br&gt;
      &lt;br&gt;
    &lt;/p&gt;

    &lt;p&gt;
      サンプルテキスト
    &lt;/p&gt;
  &lt;/body&gt;
&lt;/html&gt;

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

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

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

    &lt;p&gt;
      サンプルテキスト
    &lt;/p&gt;
  &lt;/body&gt;
&lt;/html&gt;

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

1373af78eac41fa6b3471e7d3eaed86a

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

スペースの非表示方法

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

改行をしない

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

&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;span&gt;サンプルテキスト&lt;/span&gt;&lt;span&gt;サンプルテキスト&lt;/span&gt;&lt;span&gt;サンプルテキスト&lt;/span&gt;
  &lt;/body&gt;
&lt;/html&gt;

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

sample

タグの中で改行させる

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

&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;span&gt;サンプルテキスト&lt;/span
    &gt;&lt;span&gt;サンプルテキスト&lt;/span
    &gt;&lt;span&gt;サンプルテキスト&lt;/span&gt;
  &lt;/body&gt;
&lt;/html&gt;

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

sample

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

preタグ

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

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

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

sample text

改行を禁止する方法

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

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

改行させない方法

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

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

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

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

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

sample text

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

まとめ

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

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

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

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

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

↑目次へ戻る

IT転職やキャリアについて相談できる【無料カウンセリング】

こんな不安や疑問はありませんか?
・自分のキャリアでエンジニア転職できるか
・自分はエンジニアに向いているのか
・どうしたら効率良くプログラミングを習得できるか

カウンセリングでは、IT転職・プログラミング学習に特化したプロのカウンセラーが、中立な立場であなたの悩み解決をサポートします。満足度93%※2、累計利用者数は40,000人以上!※3

些細なご相談でも構いませんので、気軽にご参加ください。
※1.テックキャンプ エンジニア転職は経済産業省の第四次産業革命スキル習得講座の認定も受けており、条件を満たすことで支払った受講料の最大70%が給付金として支給されます 2.2018年10月24日〜11月16日(N=106) 3.2016年9月1日から2020年12月31日の累計実績

無料カウンセリングの詳細はこちら

この記事を書いた人

あなたの理想のキャリアに合わせた、テックキャンプの2つのサービス

Advertisement