paddingで余白の取る方法!HTMLで読みやすい文書を作ろう
  • facebookページ
  • twitterページ
  • 2020.03.12

    paddingで余白の取る方法!HTMLで読みやすい文書を作ろう

    HTMLで余白と取る時は「padding」か「margin」を使う

    HTMLでは、要素間に余白を取りたい時は、CSSの「padding」または「margin」 を使用します。余白は、読みやすいWebデザインを作るうえで、重要な要素になります。

    この記事では、paddingとmarginの違いや、paddingの使用方法を詳しく解説していきます。

    padding と margin の違い

    paddingとmarginは、共に余白を指定するCSSですが、余白を取る位置に次のような違いがあります。

    padding

    paddingは、要素の内側に余白を取る時に使用します。言葉だけではイメージがわかないと思いますので、次の図解を見てください。

    青と緑色のエリアが要素全体となり、paddingで指定したサイズだけ、要素の内側(緑色のエリア)に余白を取ることができます。

    margin

    marginは、要素の外側に余白を取る時にしようします。次のイメージの通り、marginで指定したサイズだけ、要素の外側(ピンク色のエリア)に余白を取ることができます。

    paddingの使用方法

    ここからは、paddingの使用方法をサンプルコードを書きながら見ていきましょう。次のサンプルコードは、paddingで上下左右それぞれに”15px”の余白を取る例を、HTMLタグのstyle属性に直接指定する方法と、CSSで指定する方法の例です。

    ▪️ HTMLタグの「style」に直接書く場合

    ▪️ CSSで指定する場合

    【CSS】

    【HTML】

    上のサンプルコードを、ブラウザで表示した結果は以下の通り。

    paddingで余白サイズ指定する方法

    先ほどのサンプルコードは、上下左右の余白を一括で”15px”に指定しましたが、一部分だけの指定や、左は”15px”、右は”20px”など、個別指定することもできます。

    ▪️ 一部分だけpaddingを指定する方法

    ▪️ 上下左右のpaddingを指定する方法

    px (ピクセル)以外の単位でpaddingを指定

    paddingに指定する余白には、px以外にも、% (パーセント)指定や、フォントサイズ指定の rem (ルートエム)などの単位でも指定ができます。

    ポテパンダの一言メモ

    パーセント指定でする時は、width, heightなどのサイズと、marginの合わせて合計で100%を超えないようにサイズを指定する必要があります。

    tableのセル内に余白を取る「cellpadding」

    tableタグ内のセルに余白を取るときは、cellpadding属性も使用できます。cellpaddingに指定可能な単位は、ピクセル(px)またはパーセント(%)です。
    ※単位を省略した場合は、ピクセル指定になります。

    ■ ブラウザでの表示

    ポテパンダの一言メモ

    HTML5では、見栄えに関する指定はスタイルシートを行う規定となったため、cellpaddingは廃止されました。2020年3月現在では、まだ多くのブラウザがcellpaddingをサポートしていますが、今後は廃止される予定のため、tableタグのセル内に取る余白についても、CSSのpaddingを使用しましょう。

    marginの使用方法

    次は、要素の外側に余白を取る、marginの使用方法を見ていきましょう。次のサンプルコードは、要素外側の上下左右それぞれに”30px”の余白を取る例です。

    marginの指定方法はpaddingの時と同じです。

    【CSS】

    【HTML】

    上のサンプルコードを、ブラウザで表示した結果は以下の通り。

    marginで余白を指定する方法

    marginもpaddingと同じく、一部分だけmarginを指定したり、方向毎に余白サイズを個別指定することもできます。

    ▪️ 一部分だけmarginを指定する方法

    ▪️ 上下左右のmarginを指定する方法

    余白をうまく使った読みやすい文書

    最後に、文章内に適切な余白を取ることで、文書がどれほど読みやすくなるか実験してみましょう。次の文書を「余白なし」「余白あり」で比較してみます。

    余白なし

    まずは、余白なしの例です。文書間の余白がないため、窮屈な感じで目も疲れそうです。

    余白あり

    次に、上の文書に余白と付けた例です。余白が適切に取られたことで、読みやすく目にも優しそうなレイアウトになっている事が分かると思います。

    適用したスタイルシートは以下の通りです。

    余白の取り方を理解して読みやすいWebデザインを

    HTMLで、要素の内側に余白を取るpaddingや、要素の外側に余白を取るmarginの使い方を解説してきました。Web制作の現場では、paddingやmarginは便利でよく使用するCSSの一つです。適切な余白を確保して、読みやすくて、目に優しいWebデザインを目指しましょう。



    優良フリーランス案件多数掲載中!
    フリーランスエンジニアの案件をお探しなら
    ポテパンフリーランス

    この記事をシェア

    • Facebookシェア
    • Twitterシェア
    • Hatenaシェア
    • Lineシェア
    pickup









    ABOUT US

    ポテパンはエンジニアと企業の最適なマッチングを追求する企業です。

    READ MORE