. 【html/CSS】間隔,隙間,余白,空白をあける方法
【html/CSS】間隔,隙間,余白,空白をあける方法
【html/CSS】間隔,隙間,余白,空白をあける方法

【html/CSS】間隔,隙間,余白,空白をあける方法

【html/CSS】間隔,隙間,余白,空白をあける方法 2022年02月22日

デザインにおいて間隔や隙間は非常に重要なものです。

htmlやCSSで上下や左右の間隔・隙間をあける方法を紹介します。

画像やdivの場合と、文字の場合でそれぞれ解説します。

関連記事も参考にしてください。

html･CSSで横並びボタンの間隔･隙間を調整する方法フォームなどで「戻る」「送信」のようにボタンが並んでいることがあります。しかし、CSSで調整しないと間隔がなく見にくいです。html･CSSで横並びボタンの間隔･隙間を調整する方法を解説します。この記事を読む CSSやhtmlで画像を横並びにする方法３選CSSやhtmlで画像を横並び2列にする方法を3つ紹介します。レスポンシブ対応と中央寄せの方法も解説します。この記事を読む htmlやCSSで画像の横に文字を並べる方法６種【複数行OK】htmlやCSSで画像と文字テキストを横並びにする方法を6つ紹介します。レスポンシブ対応できます。この記事を読む

目次

  • htmlだけで左右の隙間をあける
    • スペースであける
    • tableであける
  • htmlだけで上下の隙間をあける
    • brで改行する
    • pタグであける
  • やりすぎ注意
  • CSSで上下左右の隙間をあける
    • 間隔をあけていない元の状態
    • 【隣の要素との間隔をあける】margin
      • 上下左右に違う値を指定する方法
    • 【枠線との間隔をあける】padding
      • 上下左右に違う値を指定する方法
  • 【文字の上下の間隔をあける】line-height
  • 【文字の左右の間隔をあける】letter-spacing
  • 【まとめ】間隔をあける方法

htmlだけで左右の隙間をあける

スペースであける

画像やテキストは横に並びます。その間に空白スペースを入れると隙間があきます。

　　 <img width="200" src="https://csshtml.work/wp-content/uploads/cat.jpg" alt="">　<img width="200" src="https://csshtml.work/wp-content/uploads/cat.jpg" alt="">　<img width="200" src="https://csshtml.work/wp-content/uploads/cat.jpg" alt="">

半角スペースも使えますが、連続でいれても1個分にしかなりません。

tableであける

tableを使うと空間を調整できます。cellpaddingはtdの内側、cellspacingはtd間の隙間を調整できます。

<table border cellpadding="10" cellspacing="10"> <tr> <td><img width="200" src="https://csshtml.work/wp-content/uploads/cat.jpg" alt=""></td> <td><img width="200" src="https://csshtml.work/wp-content/uploads/cat.jpg" alt=""></td> <td><img width="200" src="https://csshtml.work/wp-content/uploads/cat.jpg" alt=""></td> </tr> </table>

※わかりやすいようにborderをつけていますが、不要であれば外しましょう。

CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。

↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓

htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。この記事を読む

↑「副業してもう少し稼ぎたい！」というかたのために副業の方法も解説しています。

htmlだけで上下の隙間をあける

brで改行する

brを1つ入れるとただの改行ですが、2つ連続させるともう一度改行され1行分の隙間を作ることができます。

<img width="200" src="https://csshtml.work/wp-content/uploads/cat.jpg" alt=""><br><br> <img width="200" src="https://csshtml.work/wp-content/uploads/cat.jpg" alt=""><br><br> <img width="200" src="https://csshtml.work/wp-content/uploads/cat.jpg" alt=""> pタグであける

brで1行分あけるのと同じ考え方でpタグで1行分あけることもできます。

 

 

<img width="200" src="https://csshtml.work/wp-content/uploads/cat.jpg" alt=""><p>&nbsp;</p> <img width="200" src="https://csshtml.work/wp-content/uploads/cat.jpg" alt=""><p>&nbsp;</p> <img width="200" src="https://csshtml.work/wp-content/uploads/cat.jpg" alt="">

pタグの中に空白スペースまたは「&nbsp;」で空白をいれると、pタグに1行分の高さを保てます。

やりすぎ注意

ここまで紹介した、空白スペースやbr、pタグで隙間を空ける方法について、1つ程度ならいいですが、連続して使うのは非推奨です。

理由はアクセシビリティです。

特に読み上げブラウザに影響がでます。

空白スペースやbrは読み上げでは休符になります。

これが連続されるとずっと無音になり、ユーザーの時間を奪ってしまいます。

また、tableのcellpaddingとcellspacingは廃止された属性です。

ということで、隙間を空けるには下記より紹介するCSSを使う方法を推奨します。

CSSで上下左右の隙間をあける

間隔をあけていない元の状態

下記のように画像が並んでいる状態から隙間をあけていきましょう。

すでに少し間隔があいていますがこれはデフォルトです。

<style> .example{ border: 1px solid #333; background: #e7edf8; } </style> <div class="example"> <img width="200" src="cat.jpg" alt=""> <img width="200" src="cat.jpg" alt=""> <img width="200" src="cat.jpg" alt=""> </div> 【隣の要素との間隔をあける】margin

隣の要素との間隔をあけるにはその要素自体にmarginを指定します。

<style> .example2 img{ /*コレ*/margin: 10px; } .example2{ border: 1px solid #333; background: #e7edf8; } </style> <div class="example2"> <img width="200" src="cat.jpg" alt=""> <img width="200" src="cat.jpg" alt=""> <img width="200" src="cat.jpg" alt=""> </div> 上下左右に違う値を指定する方法

margin:○pxだと上下左右を同じ間隔だけあけます。

上下左右違う値にすることもできます。

上下左右それぞれ個別のCSSで指定することができます。

margin-top:5px; margin-right:10px; margin-bottom:15px margin-left:20px;

1行で指定することもでき、「margin:上 右 下 左」の順で指定します。

margin: 5px 10px 15px 20px; 【枠線との間隔をあける】padding

外側の枠線との間隔をあけるにはその親要素にpaddingを指定します。

<style> .example3{ /*コレ*/padding: 20px; border: 1px solid #333; background: #e7edf8; } </style> <div class="example3"> <img width="200" src="cat.jpg" alt=""> <img width="200" src="cat.jpg" alt=""> <img width="200" src="cat.jpg" alt=""> </div> 上下左右に違う値を指定する方法

padding:○pxだと上下左右を同じ間隔だけあけます。

上下左右違う値にすることもできます。

上下左右それぞれ個別のCSSで指定することができます。

padding-top:5px; padding-right:10px; padding-bottom:15px padding-left:20px;

1行で指定することもでき、「padding:上 右 下 左」の順で指定します。

padding: 5px 10px 15px 20px;

marginとpaddingについて詳しくはこちら↓

【CSS】marginとは？paddingとは？両者の違い・使い分けについてmarginとpaddingはボックスの余白を調整するCSSです。marginとpaddingの使い方や違いについて説明します。この記事を読む

【文字の上下の間隔をあける】line-height

文字の上下の間隔をあけるにはline-heightを指定します。

文字の上下の間隔をあける文字の上下の間隔をあける文字の上下の間隔をあける文字の上下の間隔をあける文字の上下の間隔をあける <style> .example4{ line-height: 3; border: 1px solid #333; background: #e7edf8; width: 50%; } </style> <div class="example4"> 文字の上下の間隔をあける文字の上下の間隔をあける文字の上下の間隔をあける文字の上下の間隔をあける文字の上下の間隔をあける </div>

line-heightは指定した数値の文字数分 高さが確保され、その上下中央に文字が置かれます。

よって1行の上下の隙間は次のような式になります。

{(指定した数値-1)÷2}×文字サイズ

ややこしいですが、指定した数値が1.5なら0.25文字ずつ、2なら0.5文字ずつ、3なら1文字ずつ上下に行間ができます。

2行以上になったとき、上と下分の隙間となるため、2なら0.5文字+0.5文字で1文字分開くことになります。

line-heightについて詳しくはこちら↓

【html/CSS】行間を詰めたり広げる,上下の文字間隔を調整する方法行間が狭かったり、広かったりでどうも読みづらいことがあります。CSSで行間を詰めたり広げる方法を解説します。この記事を読む

【文字の左右の間隔をあける】letter-spacing

文字の左右の間隔をあけるにはletter-spacingを指定します。

文字の左右の間隔をあける文字の左右の間隔をあける文字の左右の間隔をあける文字の左右の間隔をあける文字の左右の間隔をあける <style> .example5{ letter-spacing: 0.5em; border: 1px solid #333; background: #e7edf8; width: 50%; } </style> <div class="example5"> 文字の左右の間隔をあける文字の左右の間隔をあける文字の左右の間隔をあける文字の左右の間隔をあける文字の左右の間隔をあける </div>

letter-spacingは文字の右に指定した分だけ間隔をつくります。文字サイズを基準とする「em」で指定することをオススメします。

【まとめ】間隔をあける方法

html

左右の隙間をあける

  • スペースであける
  • tableであける

上下の隙間をあける

  • brで改行する
  • pタグであける

CSS

  • 隣の要素との間隔をあけるにはその要素自体にmarginを指定する
  • 外側の枠線との間隔をあけるにはその親要素にpaddingを指定する

文字

  • 文字の上下の間隔をあけるにはline-heightを指定する
  • 文字の左右の間隔をあけるにはletter-spacingを指定する

以上、htmlやCSSで上下や左右の間隔・隙間をあける方法でした。

「この記事の内容がよくわからなかった…」「なんかうまくいかなかった…」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。わからないまま突き進むより基本を学ぶのが結局近道です。

htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。この記事を読む CSSやhtmlをマンガで学ぶ
📎📎📎📎📎📎📎📎📎📎