改行 | プログラミング入門ナビ by Proglus（プログラス）

はじめに

HTML文書の中で長い文章を書く時、せっかく見やすいように改行を入れたのにブラウザで見てみると改行されていない…ということはありませんか？

実は、HTMLでは改行を明示的に入れたい場合、あることをしなければなりません。

この記事ではその方法を説明します。

また、見やすくするための関連機能として区切り線のつけ方も覚えましょう。

動画解説

本記事の内容を動画でも解説しています。

改行する方法

https://www.youtube.com/watch?v=AcHf-lz0GEs&feature=youtu.be

区切り線をつける方法

https://www.youtube.com/watch?v=6EzeJ0cR7Cc&feature=youtu.be

HTMLでの改行方法

まずは改行する方法についてです。

普通に改行をした場合

HTML文書内で普通に改行をした場合にどうなるか見てみましょう。

下記のコードをエディタ等で記述し、ブラウザで表示させてみてください。

段落内には国会の住所を記載しており、見やすいようにコード内で改行を入れていますね。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>改行の練習</title>
  </head>
  <body>
    <p>
      100-0014
      東京都
      千代田区
      永田町1丁目7-1
    </p>
  </body>
</html>

ブラウザではこうなります。改行を入れたはずなのに、改行されず1行で表示されていますね。

このように、コード内で普通の改行をしてもブラウザには反映されないことがわかりました。

明示的に改行をするには

実は、自分がここだ！というところで改行をするには「ここで改行をします」とブラウザに指示するためのある記載をする必要があるのです。

それは という改行タグです。「Break」の略になっています。

先ほどのコードで改行したい位置に入れてみましょう。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>改行の練習</title>
  </head>
  <body>
    <p>
      100-0014<br>
      東京都<br>
      千代田区<br>
      永田町1丁目7-1
    </p>
  </body>
</html>

保存したら、もう一度ブラウザで見てみましょう。下記の通り、今度はきちんと改行が入りました。

このように、 タグを使えば明示的に改行することができます。

は空要素

MDNで調べてもわかる通り、この は空要素です。

つまり、などのように「開始タグ+コンテンツ+終了タグ」で要素を成すのではなく、それ単体で改行を表すためコンテンツや終了タグを書いてはいけません。

間違えないように注意してください。

: 改行要素 – HTML: HyperText Markup Language | MDN

HTMLでの区切り線

ここで、もう一つコンテンツを見やすくするのに役立つ機能を紹介します。

それは区切り線：<hr>です。「Horizontal Rule」の略で、水平な罫線の意味ですね。

どんなものかを知るために、下記のコードを書いてみましょう。

段落が2つあり、その間に<hr>があることに注目してください。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>区切りの練習</title>
  </head>
  <body>
    <p>私はHTMLを学習します</p>
    <hr>
    <p>私はCSSを学習します。</p>
  </body>
</html>

ブラウザで表示すると下記のようになります。

1つ目の段落と2つ目の段落の間に、罫線が表示されましたね。

このように、<hr>をつけると区切り線をつけることができます。

話の場面の切替えや節内での話題転換などに使用されることが多いです。

こちらも と同様、空要素ですのでコンテンツを含めたり、終了タグを書かないように注意してください。

まとめ

HTML文書で明示的な改行をする方法と区切り線のつけ方を解説しました。

いずれも文章やコンテンツを見やすくするのによく使われる機能です。

正しく使いこなして見やすいWebページを作るのにお役立てください。

本記事の内容は下記の講座からの抜粋です。HTMLについてより体系的に学びたい方はぜひチェックしてみてください。

新HTML入門（Proglus）

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する

はじめに

HTML文書を書いたことのある方なら誰でも一度は「改行やインデント（行の開始位置を数段ずらすこと）をいちいち入れないといけないなんて面倒だな…自分の好きなように書いちゃダメなの？」と考えたことがあるのではないでしょうか？

この記事ではそんな疑問に対するお答えと、改行やインデントの必要性について説明します。

動画解説

本記事の内容を動画でも解説しています。

https://www.youtube.com/watch?v=YkmQ5ZIdD0I&feature=youtu.be

改行やインデントがないとどうなる？

例えばこのようなHTML文書を考えてみましょう。VSCodeなどのエディタで実際に打ち込んでみてください。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title> はじめてのHTML</title>
    <style>
     h1 {
       color: red;
     }
    </style>
  </head>
  <body>
    <h1>はじめての見出し</h1>
    <p>はじめての段落</p>
  </body>
</html>

これをブラウザで表示すると下記のようになります。

次にコードから改行やインデントを取り除いてみましょう。下記のように、とても雑然としたコードになります。これでは実際のページもレイアウトが崩れてしまいそうですが、実際はどのようになるのでしょうか？

 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title> はじめてのHTML</title> <style> h1 { color: red; } </style> </head> <body> <h1>はじめての見出し</h1> <p>はじめての段落</p> </body> </html>

エディタで保存したら先ほどのブラウザをリロードしてみましょう。

なんと表示はそのまま変わりません。実は、改行やインデントがなくても正しく書けてさえいればこのようにきちんと表示されるのです。

改行やインデントはなぜ必要？

これではますます冒頭のように「改行やインデントなんて、Word文書みたいに自分の好きなタイミングで付けたらいいのでは？」という思いが強まってしまうかもしれませんが、お待ちください。

どんなプログラミング参考書でも改行やインデントは必ずつけるよう指南があります。

それだけ、改行やインデントには実は非常に重要な役割があるのです。ここからはその理由を説明していきます。

コードを読みやすくする

これは直感的に理解しやすいかもしれません。先ほどの改行・インデントなしのコードを見て「何が書いてあるのかわかりづらくなったな…」と思われた方が多いのではないでしょうか。

先ほど改行やインデントを取り除いてもきちんと表示できたのは、ブラウザが改行やインデントを無視してコードを読み込むためです。

「HTML文書の存在理由はブラウザに読み取ってもらってWebページとして表示されることなので、それさえできればいい」といってしまえばそれまでなのですが、その考えは少々短絡的といえます。

というのも、実際のWebサイトはいくつものWebページを保有する大規模なものであるため、基本的には複数人で開発します。そのため、誰かが書いたコードは人間である他の開発者が目にすることが多いです。

ページ同士の連携や機能拡張のために修正する等、目的は様々ですがそんな時に先ほどのような改行やインデントのないコードを書いていれば、間違いなくブーイングが起きます。

エンジニアのお作法として、他の人にも読んでわかりやすいように必ず改行やインデントを入れるようにしましょう。

バグを少なくする

それなら、せめて改行は入れるけどインデントまではなくてもいいのでは？と思われたかもしれません。

インデントのない下記のコードを見てください。実はこのコードでブラウザに表示させようとすると、真っ白な画面になってしまいます。

どこかにバグがあるからなのですが、見つけられますか？

<html lang="ja">
<head>
<meta charset="utf-8">
<title> はじめてのHTML</title>
<style>
h1 {
color: red;
}
</head>
<body>
<h1>はじめての見出し</h1>
<p>はじめての段落</p>
</body>
</html>

次にインデントを付けた下記ならばどうでしょうか。インデントの有無以外で上記のコードと差はありません。

<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title> はじめてのHTML</title>
    <style>
      h1 {
        color: red;
      }
  </head>
  <body>
    <h1>はじめての見出し</h1>
    <p>はじめての段落</p>
  </body>
</html>

8行目でh1のスタイル指定が終わった後「}」から、9行目の</head>まで通常ならばインデントが1段ずつ戻るのが、一気に2段下がっているのが不自然です。

本来はこの8行目の下に終了タグ</style>があるべきでしたが、無いということが見つけやすいですね。

このように、インデントがあれば書かれたコードを見ても不自然な箇所からバグを見つけやすいですし、書いている途中でもインデントを意識していれば間違いに気付きやすいです。

また、要素ごとにインデントがあるのでHTML文書の要素同士の階層構造が見やすいという利点もありますね。

まとめ

HTML文書での改行とインデントの重要性について説明しました。

無くともブラウザに表示はされますが、エンジニアの嗜みとして改行とインデントは必ず入れるようにしましょう。また、他の言語でも同様の理由から入れるようにしてください。

本記事の内容は下記の講座からの抜粋です。HTMLについてより体系的に学びたい方はぜひチェックしてみてください。

新HTML入門（Proglus）

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する

HTML文書内で改行しても反映されない？明示的に改行するには？区切り線のつけ方も解説！

はじめに

動画解説

HTMLでの改行方法

普通に改行をした場合

明示的に改行をするには<br>

<br>は空要素

HTMLでの区切り線

まとめ

動画でプログラミング入門をしよう

HTML文書で改行やインデントがないとどうなる？なぜ必要なのか理由を解説

はじめに

動画解説

改行やインデントがないとどうなる？

改行やインデントはなぜ必要？

コードを読みやすくする

バグを少なくする

まとめ

動画でプログラミング入門をしよう