記事・特集リスト
無料お役立ち資料
本サイトについて
お問い合わせ
閉じる

HTMLで改行をする方法4選+サンプルコード付き(初心者向け)

HTMLで改行する方法を初心者の方向けに紹介。 改行する方法4種類を、それぞれメリット・デメリット、サンプルコード付きで詳しく紹介しています。文章だけではなく、サンプルコードを活用し、実際に手を動かし学べる記事になっていますので、HTML初心者の方でもわかりやすい内容になっています。

カテゴリ: HTML/CSS

こんにちは!
HTMLで改行をした際に、思う様に改行されていない、PC版とスマホ版で改行されている場所が違うなど、困った事はありませんか?
実は、wordなどのテキストファイルで改行をする方法と、HTMLで改行をする方法ではルールが違います。
今回は、HTMLでの改行の方法を4つと、それぞれのメリット・デメリット。
さらには、PCとスマホでなぜ改行の見た目が違うのかなども含めて詳しく解説していきます。

1.HTMLで改行をする方法4選

それではさっそく、HTMLで改行する方法を紹介していきますが、長くなりますので、冒頭で各方法を簡単に説明します。


方法1:brタグで改行を行う方法
brタグで改行を行う方法です。brタグ1個分で、brタグ1個分の改行を行う事ができ、わかりやすく簡単です。しかしPC版とスマホ版で改行の見た目に差がでてしまいますので、非推奨となっています。


方法2:ブロック要素で改行を行う方法
こちらが一番お勧めです。迷ったらこちらの方法だけみて下さい。 わかりやすく改行でき、CSSを使用し各段落ごとの余白をpx.em単位で細かく調整できます。

方法3:preタグで改行を行う方法 preタグで改行を行う方法です。

方法4:whitespaceで改行を行う方法
CSSのwhitespaceプロパティを使用し、改行をコントロールします。
whitespaceの値5つを、各用途に当てはめていきますが、初心者の方は少し難しくなっています。

方法1brタグで改行を行う方法

○brタグ

brタグとは改行を行うタグです。
サンプルコード表示結果

brタグで改行が行われている↓

これは1行目です
これは2行目です

HTMLサンプルコード



※解説
brタグを入れるだけで簡単に改行できます。
しかし、brタグでの意図的な改行はPC版とスマホ版での表示に見た目の差が出ます。
下記で具体的に説明します。

なぜPCとスマホで改行に違いが出てくるのか?

そもそもPCとスマートフォンでは、デバイスの大きさが違います。
ディバイスとは、画面の大きさの事です。

通常何も設定してなければ、それぞれの画面サイズに合わせて適宜改行されます。
しかしPC版では上手く改行されているのに、スマホでは上手く改行されていない事が起きてしまう原因は、brタグを使った意図的な改行にあります。下記参考写真。
PC版表示写真 スマホ版表示写真

※解説
この様に、brタグで意図的な改行を設定してしまうと、PC版とスマホ版の見ために差が出てしまいます。これがbrタグをなるべく使わない方が良い理由です。

○brタグの注意点

連続してbrタグを使わない。
brタグを連続して使うと、行間が空いてしまいます。
<br>タグは改行を目的とした用途のタグになるため、連続して行間を空けるために使用する事は、構造上好ましくなく、googleにも適切にコードを理解してもらえなくなります。

○スマホ版でbrタグを消す方法

メディアクリエでbrタグを消す事ができます。
brタグにclass名をつけて、スマホの時だけdisplay:noneを適用させます。
例えば、画面のサイズが560px以下になった時(スマホ)、brタグ(改行)を非表示にする事ができます。
メディアクリエについて詳しく知りたい方は、こちらの記事を参考にしてみて下さい。
https://sole-color-blog.com/blog/71/

HTMLサンプルコード

CSSサンプルコード

○brタグのメリット・デメリット

●メリット
 簡単に改行を行う事ができる。
●デメリット
 それぞれのディバイスに合わせた改行が上手くできない。

方法2ブロック要素で改行を行う方法

一番おすすめの方法はこの方法2です。

○ブロック要素とは

ざっくり言うと、ブロックの塊、行全体のまとまりの事です。
代表的なタグに<div>,<form>,<h1>-<h6>,<p>タグなどがあげられます。
ブロック要素は、横並びにならず、縦に積み上がります。
この特性を生かして改行をおこないます。
詳しくは、こちらの記事を参考にしてみて下さい。
http://www.htmq.com/htmlkihon/005.shtml

○ブロック要素での改行

ブロック要素での改行↓

ブロック要素での改行1
ブロック要素での改行2
ブロック要素での改行3

HTMLサンプルコード

※解説
ブロック要素は、横並びにならず縦に積み上がります。
この特性を生かして改行をおこないます。

○ブロック要素での改行幅をCSSで調整する。

CSSで改行幅調整↓

ブロック要素での改行1

ブロック要素での改行2

ブロック要素での改行3

HTMLサンプルコード

CSSサンプルコード

※解説
細かくmarginを指定し、お好みの幅に調整する事ができます。
pタグにspan、classを記述し各要素事にも細かく調整できます。

○pタグ使用の注意点

pタグを連続使用して改行する(下記サンプルコードの様な状態)

HTMLサンプルコード

※解説
pタグを連続して使用することは、CSSでの設定が複雑になり、Googleにも意味のない要素として扱われてしまいます。連続した使用は避けましょう。

○ブロック要素での改行を行う、メリット・デメリット

●メリット
ブロックごとで簡単に改行ができる、どの端末でも自然な折り返しと合わせて段落を切り替える事ができる。ブロック要素に、span,classを記述しmarginで細かな調整ができる。
●デメリット
ブロック要素の幅を調整する際、該当箇所にspan,classを記述し、かつCSSファイルを編集する為、作業が多い。

方法3 preタグで改行を行う

preタグとはpreformatted textの略で、日本語では「整形済みテキスト」という意味になります。preタグで囲まれた文字はそのままブラウザに表示されます。例えば<p>タグをpreタグで囲むと<p>とブラウザに下記のように表示され、改行・半角スペースなど入力がそのまま表示されます。

このように表示される↓

<p>タグをpreタグで囲むと<p>

もっと詳しく知りたい方は、こちらを参考にしてみて下さい。 http://www.htmq.com/html5/pre.shtml

サンプルコード表示結果

HTMLサンプルコード

※解説
<pre>〜</pre>で囲むとHTMLで記述した、改行、半角スペース、全角スペースをそのままブラウザに反映させる事ができます。
しかし、preタグは自動改行が行われないので、pcとスマホで大きく見た目に差がでてしまいますので、おすすめはできません。

○preタグで改行を行うメリット・デメリット

●メリット
 HTMLで記述した通りのブラウザ表示になるのでわかりやすい。
●デメリット
 PCとスマホの表示で差がでる。

方法4whitespaceで改行を行う

whitespaceとはCSSのプロパティであり、改行、半角スペース、タブをどのように表示させるかを決めるプロパティです。
whitespaceには5つの値を指定する事ができます。
①normal②nowrap③pre④pre-line⑤pre-wrap

①normal

連続した改行は1つの空白としてまとめられる。
行の折り返しはされず、自動折り返しになる。
文末の改行、半角スペースは無視される。

サンプルコード表示結果

HTMLサンプルコード

CSSサンプルコード

②nowrap

連続した改行は一つのスペースにまとめられる。
brタグを使用しないと改行できなくなる。
文末の改行、半角スペースは無視される。

サンプルコード表示結果

HTMLサンプルコード

CSSサンプルコード

③pre

HTML内での改行、スペースがそのままブラウザに表示される。
自動での改行はされない。
サンプルコード表示結果

HTMLサンプルコード

CSSサンプルコード

④pre-line

HTML内での改行がそのまま反映されるが、スペースは反映されない。
画面の幅に合わせて自動的に改行される。
サンプルコード表示結果

HTMLサンプルコード

CSSサンプルコード

⑤pre-wrap

改行や半角スペースがそのまま反映される。
要素の端で行が折り返される。

サンプルコード表示結果

HTMLサンプルコード

CSSサンプルコード

○whitespaceで改行を行うメリット・デメリット

●メリット
 white-spaceには値が5つ用意されているので、各用途に合わせて使用できる。
●デメリット
 HTMLの該当箇所にspan,classを記述し、かつCSSファイルを編集する為、作業が多い。

まとめ

HTMLで改行を行う方法を4点紹介し、PCとスマホでの見た目の差に気をつける事を解説してきました。
最後に改行の方法、ポイントをまとめます。


1.brタグで改行を行う方法。
2.ブロック要素で改行を行う方法。 ※一番おすすめ
3.pre要素で改行を行う方法。
4.whitespaceで改行を行う方法。
5.PCの改行と、スマホの改行の見た目の差に注意する。


いかがだったでしょうか?
今回はHTMLで改行について解説しました。簡単に作成する事ができます。
ユーザーは、PC、スマートホン、iPadなど、様々なディバイスからアクセスをおこないます、どのディバイスでも改行が上手くおこなわれる様に、今回の記事を参考にしてみて下さい。

最後までお読みいただきましてありがとうございます。ご意見・ご要望などございましたら、
以下のフォームよりお問い合わせを受けつけておりますので、よろしければご利用ください。

この記事がお役に立ちましたら、"いいね!"をお願いします
minwebの最新情報をお届けします

minweb編集部(株)セルリア

”共に考え、共に創るWebの成功戦略”というスローガンのもと、お客様と一からWeb戦略を考え、
企画し実装まで支援する伴走型Webコンサルティング会社です。

こちらの記事をお読みのかたにおすすめ!完全無料のダウンロード資料

Googleサーチコンソール使い倒し活用術  <AOHON>

ダウンロード資料画像

Googleの検索エンジンに関する情報を幅広く確認できるツール「Googleサーチコンソール」の活用方法をまとめました。新サーチコンソールの機能を網羅的に紹介するだけでなく、Webサイトを最適化できる実践的な方法までわかりやすく解説します。

サーチコンソール初心者の方が知りたい導入方法から、上級者向けのコンテンツ改善の方法まで、押さえておきたい要素を1つに集めた、SEOに力を入れたいすべてのWeb担当者におすすめの一冊です。