HTMLでWebサイトを作る際に、
- 文章を改行させたいけど、いまくいかない…！
そのような状態で困ったことはありませんか？
そこで今回は、
HTMLでの改行
改行させる方法2つ
改行の注意点
行間の調整方法
についてご紹介していきます。
目次
HTMLでの改行
HTMLで作成するときに改行させたい場合ですが、通常の文章の書き方で書いてしまうとどうなるでしょうか。
|
1 2 3 4 |
<p> ここで改行したい。 …けどうまくいきません。 </p> |
このように表示されます。
ここで改行したい。 …けどうまくいきません。
これは、HTMLの仕様が原因です。
HTMLでは、
- 「連続した半角スペース」
- 「タブ文字」
- 「改行文字」
は1つの半角スペースとして表示されてしまうのです。
ですので、ページ上での表示で改行させたい場合は、違った方法を使う必要があります。
改行させる方法
基本的な方法として2つありますので順にご説明します。
<br>タグで改行する
<br>タグは「改行タグ」と呼ばれるタグです。
（「break（改行）」の略です）
さきほどの例を<br>タグを使ってみましょう。
|
1 2 3 4 |
<p> ここで改行したい。<br> //←ここで<br>を入れます。 …今度はうまく改行されました！ </p> |
このように表示されます。
ここで改行したい。
…今度はうまく改行されました！
うまく改行されましたね！
<p>タグで改行する
続いては段落タグである<p>タグを使用した方法です。
（「paragraph（段落）」の略です）
同じ例を今度は<p>タグを使ってみます。
|
1 2 |
<p>ここで改行したい。</p> <p>…今度もうまく改行されました！</p> |
このように表示されます。
ここで改行したい。
…今度もうまく改行されました！
今回もうまく改行されましたね！
改行させたくない場合
逆に、「ここは改行させたくないな」という場面も出てくると思います。
その際にはこちらのリンクの内容を参考にしてください。
CSSで改行させない方法！white-spaceとinline-blockで実現
改行での注意点
複数行あけたい場合も出てくるかと思います。
<p>タグで空白を開ける
その場合は、<p>で表現しようとした場合にこのように書いたとします。
|
1 2 3 4 5 |
<p>ここで3行ほど空白をあけたい。</p> <p></p> <p></p> <p></p> <p>あれ？うまく空白があきませんでした。。。</p> |
このように表示されます。
ここで3行ほど空白をあけたい。
あれ？うまく空白があきませんでした。。。
この原因ですが、<p>タグは中身がなければ高さが0になるという仕様だからです。
<br>タグで空白を開ける
では、<br>タグではどうでしょうか。
|
1 2 3 4 5 |
<p>ここで3行ほど空白をあけたい。 <br> <br> <br> 今度は上手く聴きました！しかし...</p> |
このように表示されます。
ここで3行ほど空白をあけたい。
今度は上手く聴きました！しかし…
イメージしたとおりになりましたね。
しかし、この方法はHTMLのルール上、あまり推奨できない方法です。
行間を空けたい場合は次の方法を使ってください。
行間の調整方法
文章と文章の間の行間の調整方法ですが、CSSを使うのが基本です。
<p>タグで空白を開ける
<p>タグを使用した文章間で空白をあけたい場合は、CSSの「margin」プロパティで調整しましょう。
HTML
|
1 2 |
<p class="sample">この下に50pxほど空白をあけたい。</p> <p>今度は上手く聴きました！</p> |
CSS
|
1 2 3 |
.sample{ margin-bottom : 50px; } |
<br>タグで空白を開ける
<br>を使用した改行の文章で空白をあけたい場合は「line-height」プロパティで調整しましょう。
HTML
|
1 2 3 |
<p>このpタグの中の文章を<br> 3行に分けて<br> 行間を1.5文字分の高さにしたい</p> |
CSS
|
1 2 3 |
.p{ line-height : 1.5; } |
まとめ
以上、HTMLで思い通りに改行ができるよう、
HTMLでの改行
改行させる方法2つ
改行の注意点
行間の調整方法
についてご紹介いたしました。
画面文章のレイアウトにこだわりたい場合には必要な情報ですので是非マスターしてみてくださいね。
