• Skip to main content
  • Skip to primary sidebar

プログラミング入門ナビ

プログラミング学習初心者のための情報メディア by Proglus(プログラス)

You are here: Home / Archives for 改行

改行

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

2020-08-26 By プログラミング入門ナビ編集部

改行ボタン

はじめに

改行ボタン

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

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

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

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

動画解説

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

改行する方法

区切り線をつける方法

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行で表示されていますね。

BRなしの例

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

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

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

それは<br>という改行タグです。「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>

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

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

BRあり

<br>は空要素

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

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

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

<br>: 改行要素 – 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>をつけると区切り線をつけることができます。

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

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

まとめ

微笑む女性たち

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

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

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

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

新HTML入門(Proglus)

動画で学ぶプログラミング入門

オンラインスクールProglus(プログラス)でプログラミングを学んで、創れる人になろう!

在宅学習応援!今なら複数の基礎コースが無料!!

今すぐ詳細を確認する

Filed Under: プログラミング入門 Tagged With: br, hr, HTML, 区切り線, 改行

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

2020-07-25 By プログラミング入門ナビ編集部

returnキーのクローズアップ

はじめに

returnキーのクローズアップ

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

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

動画解説

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

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

例えばこのような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(プログラス)でプログラミングを学んで、創れる人になろう!

在宅学習応援!今なら複数の基礎コースが無料!!

今すぐ詳細を確認する

Filed Under: プログラミング入門 Tagged With: HTML, インデント, 改行

Primary Sidebar

Proglus

Twitter

Follow @programmingnavi Tweets by programmingnavi

人気の記事

  • Visual Studio CodeでHTMLを書くときの便利な設定方法!ミスの防止や開発効率UPに役立てよう
  • MySQLをXAMPPを使ってWindows環境にインストールする方法
  • MySQL WorkbenchをMacにインストールする方法
  • 無料のSSL証明書Let’s Encryptを設定・更新・自動更新する方法(CentOS7, Apache2.4対応)
  • VirtualBoxでNATとホストオンリーアダプターによる安全なネットワーク環境構築方法
  • AWS Cloud9のプレビューが上手く表示されない時の対処法
  • よくあるSQLのエラーの種類と自力でエラーを取り除く方法について説明します
  • VSCodeで画像が表示されない場合の対処法
  • MySQL 5.7 for Windowsのアンインストール方法
  • macOSで2つのファイルの差分を確認するには?便利なdiffツールを紹介

最近の投稿

  • 【04/02更新】Udemyプログラミング入門講座等の割引クーポン配布
  • Cloud9が容量不足? EBSボリュームを拡張する方法を解説します!
  • Linuxの標準エディタvi(vim)の超基本的な使い方!動画で初心者にもわかりやすく解説!
  • swpファイルが作成されてvimでファイルが編集できない時の対処法とは?
  • 【無料モニター(2期生)募集!】「就職活動用のポートフォリオ制作講座」

カテゴリー

  • AWS
  • エンジニアのしごと
  • エンジニアへの道
  • ツールの使い方
  • ニュース
  • プログラミング入門

タグクラウド

AI AWS AWS Cloud9 Bootstrap Cloud9 CodeWing CSS Git GitHub Heroku HTML JavaScript li Linux macOS MySQL MySQL Workbench Nuxt.js ol Proglus Python Ruby Ruby on Rails SQL Udemy vscode Vue.js Web開発 Windows インストール エラー エンジニア オンライン学習 サーバー スクリーンショット セール プログラミング プログラミング入門 プログラミング学習 ユーデミー 初心者 改行 未経験 機械学習 開発環境構築

アーカイブ

  • 2021年4月
  • 2021年3月
  • 2021年2月
  • 2021年1月
  • 2020年12月
  • 2020年11月
  • 2020年10月
  • 2020年9月
  • 2020年8月
  • 2020年7月
  • 2020年5月
  • 2020年4月
  • 2020年3月
  • 2020年2月
  • 2020年1月
  • 2019年11月
  • 2019年9月
  • 2019年7月
  • 2019年6月
  • 2019年5月
  • 2019年4月
  • 2019年3月
  • 2019年2月
  • 2019年1月
  • 2018年12月
  • 2018年11月
  • 2018年10月
  • 2018年9月
  • 2018年8月
  • 2018年7月
  • 2018年6月
  • 2018年5月
  • 2018年4月
  • 2018年3月

検索

Copyright © 2021 · programmingnavi.com ・About・プライバシーポリシー