ホームページを作っていると、
・文字と文字の間が詰まって読みにくい
・画像と文章がくっついて見える
・全体的にごちゃごちゃした印象になる
こんな悩みはとても多いです。
そこでこの記事では、HTML初心者でもすぐできる余白の整え方をわかりやすく解説します。
余白を少し調整するだけで、見た目はとてもきれいになるので、ぜひ最後までお読みください！
HTMLで余白がうまく調整できないよくある原因
まず、HTMLで余白がうまく調整できないよくある原因からお伝えします。
なぜうまくいかないのかを見てみましょう。
改行だけで空けようとしている
<br><br><br>これでは細かく調整できず、見た目も崩れやすくなります。
空白スペースをたくさん入れている
文章の間にスペースを入れても、きれいな余白にはなりません。
正しい指定方法を知らない
余白はmarginやline-heightを使って調整します。
HTMLで余白を作る一番簡単な方法
次に、HTMLで余白を作る一番簡単な方法をご紹介します。
まずは文章の下に余白をあけてみましょう。
<p style="margin-bottom:20px;">文章</p>これで文章の下に20pxの空白ができます。
marginの意味
marginは「外側のすき間」を作る指定です。
数字を大きくすると余白も広くなります。
行間を読みやすく調整する方法
行間を読みやすく調整する方法をお伝えします。
文字が詰まって見えるときは、行間を広げると一気に読みやすくなります。
<p style="line-height:1.6;">文章</p>これだけで、文字と文字の縦の間隔が広がります。
画像と文字の間隔をあける方法
画像と文字の間隔をあける方法について、お伝えします。
画像の下に余白を入れるだけでも見た目がきれいになりますよ。
<img src="sample.jpg" style="margin-bottom:15px;">上下左右それぞれ余白を調整する書き方
上下左右それぞれ余白を調整する書き方をお伝えします。
下記のように、まとめて指定することもできます。
<p style="margin:20px 10px;">文章</p>数字の意味
- 20px → 上と下
- 10px → 左と右
この形を覚えると調整がとても楽になります。
よくある失敗と正しい直し方
よくある失敗と正しい直し方をご紹介します。
brで無理やり空けている
👉 marginを使えばきれいに調整できます。
空白文字で調整している
👉 表示環境でズレるのでおすすめしません。
marginとpaddingを混同している
簡単にいうと、
- margin → 外のすき間
- padding → 中のすき間
まずはmarginを使えばOKです。
初心者向けの余白調整のまとめ（コピペ用）
最後に、初心者向けの余白調整のまとめをご紹介します。
文章の下に余白
<p style="margin-bottom:20px;">文章</p>行間を広げる
<p style="line-height:1.6;">文章</p>画像の下に余白
<img src="sample.jpg" style="margin-bottom:15px;">まとめ
「HTMLで余白（空白）を調整する方法｜行間・間隔をきれいにそろえるコツ」の内容はいかがでしたでしょうか？
HTMLで余白をきれいに整えるには、
✔ marginで間隔を調整
✔ line-heightで行間を整える
✔ 無理やり空白は使わない
これだけで見た目は大きく変わりますよ。
私も、ホームページを作るときは、この「余白」をとても意識して作っています。
余白が小さいと圧迫感がありますし、余白が大きいと間の抜けたようなホームページになってしまうからです。
これについては、自分が見やすいと思った他のホームページの余白を真似して作るのが良いと思いますよ！
ぜひ参考にしてくださいね！
