今すぐ実践できる!HTMLで改行を行う方法【初心者向け】

初心者向けにHTMLで改行する方法について解説しています。HTMLに触れてまだ日が浅いという人でもすぐに対応できるので、このタイミングに使えるようになりましょう。実際にソースコードを書いて表示を確認しながら説明しています。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が1,000以上あります。

HTMLで文字を入力するときに普通に改行を入力したとしても、改行として認識されません。そのためHTML初学者の方は戸惑ってしまう事が多々あります。

そこで今回は、HTMLで改行を行う方法について解説していきたいと思います。

HTMLについてそもそもよく分からないという方は、HTMLとは何なのか解説した記事をまずご覧ください。

 

なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。

 

目次

 

改行を行うタグとその書き方

改行はとても簡単に行う事ができます。

改行を行いたい場合はその文字内に「brタグ」を挿入することで出来ます。

<br> //改行タグ

このようにとても簡単に改行を行うことができます。

たまに<br />という記述で解説しているページも存在しますが、これはXHTMLというHTMLとは少し違った書き方の場合の方法なので、基本的には<br>で改行ができると覚えておいてください。

 

[PR] プログラミングで挫折しない学習方法を動画で公開中

実際に書いてみよう

それでは実際に改行をしてみましょう。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <p>サンプル<br>サンプル</p>
  </body>
</html>

上のように記入すると、一つ目のサンプルの後に改行が入って、サンプルが縦に二つ並んで居る画面が表示されます。

また、改行文字は重ねることも可能です。

<p>サンプル<br><br>サンプル</p>

上のように記入すると一つ目の例より、一行分大きい行が空いたサンプルが作成されます。

スマートフォン対応などで改行をすべて無視して表示したい場合などは、CSSで以下のように指定することで、すべての改行文字を無効化することが出来ます。

br { display : none ; }

改行がよく使用される場面としてはinputやlabelの後が挙げられます。

<label for="name">Name:</label><br>
<input type="text" id="name" /><br>

初めて見る場合改行文字がコードをややこしくしているように見えて戸惑ってしまいますが、よく見る形なのでしっかりと覚えておくようにしましょう。

 

まとめ

今回はHTMLで改行を行なう方法について解説していきました。プログラム内ではコードを綺麗に保つ為、改行を何度も行います。

その改行が文字として認識されてしまうと、表示した文章が改行だらけになってしまいます。

その為改行は認識せずに<br>タグで改行を認識するようになりました。<br>はHTMLの基本知識と言える部分ですので、しっかり覚えておくようにしましょう。

[お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。