HTMLの文字の改行と行間の取り方！初心者がやってしまう間違いを回避しよう

間違った改行と行間の記述方法

「改行」と「行間」の意味がピンと来ない方もおられると思うので説明すると、「改行」は文章を次の新しい行に記述する事で、「行間」とは文章と文章の間のスペースの事です。

まずは間違った記述を見ていきますのでこの方法で改行・行間を調整している方は設定の変更をされた方が良いです。

            

                
<p>
                
HTMLで文字を改行するためには「br」タグを使います。
                
<br>
                
<br>
                
でも「br」タグを連続して行間をとる方法は避けた方が良い！
                
</p>
            
        

はい、こういう形ですね。文章中に改行のために「br」を使うのは全然アリですが、行間を空ける目的で「br」を連続するのはNGです。

ブラウザによっては「br」の扱いが変わったりして意図するデザインにならなかったり、検索エンジンにも正確な情報を伝える事ができなくなったりします。

こちらのタグを表示すると…

こんなカンジです。「br」タグを足すだけやから簡単で初心者の頃はよくやりました。行間空いたから良いや～んって気持ちになりますよね（笑）。

あとHTMLを触った事がある方ならわかると思いますが、HTML内で文字を改行しても文章を改行した形にはできません。

            

                
<p>
                
HTMLで文字を
                
改行するためには「br」タグを
                
使います。
                
</p>
            
        

例えばこの記述をブラウザで表示してみると…

こうなります。改行はされないですし、改行部分に変な余白が空いてしまいました。

「br」タグで改行する

それでは正しい記述を見ていきましょう。前項の間違った記述で見て頂いたようにタグ内を改行すると変にスペースが空いたりするので、タグは基本的に改行せずに1行で記述します。

            

                
<p>HTMLで文字を改行するためには「br」タグを使います。<br>でも「br」タグを連続して行間をとる方法は避けた方が良い！</p>
            
        

これが基本の形です。「br」タグを途中で使用していますがタグ内は1行で記述しています。

「br」タグは文章を改行するために使いますのでこの形で正解です。「br」タグでは行間の設定はおこないません。厳密に言うと「line-height」なんかで設定はできるけど行間は次項の「p」タグで設定しましょう。

なかにはタグを見やすくするために改行する方もいますが僕はおススメしないです。

            

                
<p>
                
HTMLで文字を<br>
                
改行するためには「br」タグを<br>
                
使います。
                
</p>
            
        

それがコレ！マークアップしていると文章の改行箇所がわかるこの形は確かに見やすいですが、変な余白が入る原因にもなる事を覚えておいてください。

ついでにもうひとつ、レスポンシブで良く使う小技的なモノです。パソコン表示では「br」タグで改行をしますがスマホ表示の時には改行させたくない場合があったりします。

そんな時にはCSSで「display: none;」を追加してやればOKです。

            

                
<p>HTMLで文字を改行するためには「br」タグを使います。<br class="pcOnly">でも「br」タグを連続して行間をとる方法は避けた方が良い！</p>
            
        

まずは「br」タグにクラスを追加します。今回は「pcOnly」としましたが名前は何でも構いません。

            

                
@media screen and (max-width: 768px) {
                
  .pcOnly {
                
    display: none
                
  }
                
}
            
        

次にCSSで最大768pxまでの横幅サイズの場合、「pcOnly」のbrタグに対して「display: none;」の設定をして非表示にします。

こうする事によってスマホ表示の時だけ「br」タグを無効にする事ができます。

「p」タグで改行と行間を調整する

「p」タグを使用しても改行する事はできます。ただ「p」タグは「br」タグのような改行ではなく、ひとつの段落というイメージを持ってもらう方が良いです。

ひとつの文章内に追加する改行は「br」タグ、段落で区切るのが「p」タグです。

            

                
<p>文章の段落を区切るために「p」タグを使います。</p>
                
<p>続けて「p」タグを記述すると「br」タグで改行されたのと同じ形で表示されます。</p>
            
        

このように記述します。すべての文章を「p」タグで囲むのではなく、段落ごとに「p」タグを使って記述するようにします。

見た目は「br」タグで改行したものと同じですが、「p」タグで段落をわける事によって行間の調整が簡単におこなえます。

            

                
p + p {
                
  margin-top: 1em
                
}
            
        

CSSで上記の設定をすると、隣り合う「p」タグに1em（1文字分）の余白を空ける事ができます。ここの数値を変更すると行間のスペースを調整する事ができます。

これで1文字分のスペースが空きました。基本的にデザインの調整はすべてCSSでおこなう、という事に慣れてもらえればこっちの方が逆に楽だと気付くかと思います。

CSSでこの行間の設定を記述しておけば、すべての隣り合う「p」タグに適応させる事ができるので楽なんですよ。