- 公開日: 2017年5月31日
HTMLの<p>タグと<br>タグで改行する方法を詳しく解説
HTMLを書いている際に改行しようと思って、できなかった経験はありませんか？HTMLの改行ルールは、テキストファイルで改行するルールと違います。そのため、HTML文章上でテキストファイルと同様に記述しても、ChromeやSafariなどのブラウザ上では上手く反映されません。この問題を解決するためには、HTMLのルールを理解する必要があります。
今回は、HTMLの改行方法をコードと写真をふんだんに使いながら説明していきます。読んでもらえれば、今すぐHTMLで改行が簡単にできるようになるはずです。
HTMLの改行とは何か？
通常皆さんが使っているLINEやTwitterなどのテキストでは「Enter」ボタンを押すことで改行できますよね。HTMLファイルでも、「Enter」ボタンを押して、改行を作ることはできます。この時点で、改行できているので、ブラウザでも表示されるかと思ってしまうかと思います。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
改行改行
ここで改行
</body>
</html>
しかし、ブラウザに表示させると・・
改行できていません。多くの方が、ここでつまづかれているのではないでしょうか。
HTMLは、「Enter」ボタンで作られた改行は認識しません。改行も、HTMLタグで表現する必要があるのです。
ブラウザは、HTML文章を解析して、HTML文章の仕様通りに画面にコンテンツを表示させます。HTMLタグは、このとき、どのように表示させるかの命令の役割を担っています。ブラウザは、HTMLタグを読み込んで、それに応じた表現をブラウザ上で表示させます。例えば、<strong>タグで文字を囲むと、文字が太文字で表示されます。
同様に、HTMLで改行を作るためには、改行の命令を作るHTMLタグを利用する必要があります。
次に、HTML改行のコードにはどんなものがあるか紹介してきます。
HTMLの改行コード
HTMLで改行を指示できるタグは、主に２つあります。
brタグ
brタグとは、「改行を指示するタグ」です。このタグを挿入すると、その箇所で改行されます。brタグは、単体で機能するので、二つのタグで文章を囲む必要はありません。
例をみてみましょう。改行をしたい部分にbrタグを挿入させます。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
改行改行<br>ここで改行
</body>
</html>
しっかりと改行できていますね！テキストエディタ上で、改行していなくても、brタグを挿入した箇所はブラウザ上で改行されます。
pタグ
brタグと同様、改行するために使えるのがpタグです。pタグは、「段落」を作るタグです。pとは、英語で段落を示す「paragraph」の頭文字です。
pタグで囲んだ文章は、段落として認識されます。そのため、改行させて表示させたい文章をpタグで囲めば、改行されて段落として表示されます。
例をみてみましょう。pタグで、それぞれの文章を囲んでいます。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p>改行改行改行改行改行改行改行改行改行</p>
<p>改行改行改行改行改行改行改行改行改行</p>
</body>
</html>
二つの文章が、別の段落として表示されていますね！
brタグとpタグ、改行する二つのタグを紹介しました。どちらも、改行させることはできますが、場面に応じて使い分けると良いかと思います。
なぜなら、pタグは、段落を作るタグなので、文章の途中で使うのは、勝手が悪いからです。pタグで囲んだ段落内で、さらにpタグを用いて、文章を改行させることは可能です。
しかし、その場合もpタグで囲んであげなくてはいけません。段落内で、複数の箇所で改行したい場合は、手間になります。
一方、brタグの場合、単体で利用できるので、より簡単に改行できます。
pタグは、段落を使って改行させたい場合、そしてbrタグは、段落内の文章を改行させたい場合と使い分けると良いでしょう。
複数列の改行方法
今まで紹介した改行方法では、１列分の改行を行うことができました。それでは、複数列を改行させたい場合はどうすればいいのでしょうか？
この場合も、brタグを使います。brタグは、複数回続けて利用することが可能です。brタグを記入した箇所が、１行分の空白となります。
brタグを２回使えば、２行分の空白を作ることができ、brタグを４回使えば、4行分の空白を作ることができます。
ちなみに、pタグで囲んだ段落の間に空白を作りたい場合も、brタグを利用できます。
サンプルコードをみてみましょう。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p>改行
改行改行改行改行改行改行改行改行</p>
<br/>
<br/>
<p>改行
改行改行改行改行改行改行改行改行</p>
</body>
</html>
このように、pタグで囲んだ段落の間に２つbrタグを記述することで、ブラウザ上では合わせて３行分の空白ができました。
改行を禁止する方法
ブラウザ上では、ウィンドウの横幅が表示文字行を全て表示するにに足りない場合は、自動改行されます。
今まで改行する方法を紹介してきましたが、場合によっては改行をさせたくないこともあるかと思います。
自動改行をさせたくない場合はどうすれば良いのでしょうか。
改行を禁止させるHTMLタグには<nobr>があったのですが、HTML5で廃止されました。利用は推奨されていません。そのため、CSSのプロパティwhite-spaceを使っていきます。
white-spaceプロパティとは、テキストの半角スペース・タブ・改行の使い方を指定する形式のことです。ここに、"nowrap"という自動改行を禁止するという値を指定することによって、改行を禁止させることができるのです。
サンプルコードをみてみましょう。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p style="white-space:nowrap">改行しない改行しない改行しない改行しない改行しない</p>
</body>
</html>
ウィンドウの横幅を、文章の長さよりも狭めてみても、文字は自動改行されていません。
今回は、HTMLにインラインでCSSを記入しましたが、CSSのファイルに記述することも可能です。(インラインとは、HTMLのタグ内に、CSSのプロバティを記入すること）
改行禁止のクラスを作っておいて、HTML内に利用するという方法もあります。
style.css ファイル
.クラス名 {
"white-space:nowrap"
}
必要に応じて使い分けてみてください！
＼一流デザイナーのスキルが身に付く／
まとめ
HTML文章上では、テキストファイルで使い慣れた方法で改行できないのは最初は不便に感じるかもしれません。しかし、brタグとpタグを上手く使えば、簡単に文章や段落を整理することができます。この二つのタグは、頻繁に使うので、是非覚えていただければと思います。
また、今回は改行を禁止する方法も学びました。こちらも、デザインする際に重要な知識ですので、ご自身でも試してみてください。
- この記事を書いた人
- Ayumi
