「Webサイトを作る際に文字や画像の余白をどう設定したらいいんだろう」

「Webサイトを作る際に文字の背景色や枠線をどう設定したらいいんだろう」

こう言った疑問に答えます。

HTML・CSSでは、文字や画像のコンテンツは必ずボックスという構造になっています。

その構造は以下の図のようになっています。

これはブラウザで「F12」ボタンを押すとどう設定されているか見ることができます。

余白はmargin、境界線はborder、パディングはpaddingに当たります。

そこでこの記事では、上図のmargin,border,paddingについて紹介したいと思います。

目次【本記事の内容】

 

paddingとは？

paddingではコンテンツと枠の間の間隔を設定できます。

枠とは次章でお話するborderのことです。

コンテンツと枠の間の間隔とは、pタグやhタグの文字の背景色などやその背景色が適用される範囲を指します。

paddingを以下のように設定すると以下のように表示されます。

・HTML

<!DOCTYPE html>

<html lang=“ja”>

    <head>

        <meta charset=“UTF-8”>

        <title>paddigの説明</title>

        <link rel=“stylesheet” type=“text/css” href=“xxsheet.css”>

    </head>

    <body>

        <h2 class=“padding”>padding</h2>

    </body>

</html>

・CSS

@charset “utf-8”;

 

.padding {

    background-color:blue;

    padding: 10px;

}

上のコードを実行すると以下のようになります。

「padding:10px」を「padding:20px」に変更すると以下のようになります。

10pxと20pxで変わったのは文字背景の青色の端と文字の位置の距離です。

この記述方法は上下左右全て同じ範囲に設定できます。

上下左右を個別に設定したい場合は以下のようになりました。

※HTMLは先程と同様

・CSS

@charset “utf-8”;

 

.padding {

    background-color:blue;

    padding-top: 10px;       //コンテンツ上部の設定

    padding-right: 5px;      //コンテンツ右側の設定

    padding-bottom: 20px;    //コンテンツ下部の設定

    padding-left: 15px;      //コンテンツ左側の設定

}

また、上下左右全て個別に設定したい場合は以下のように設定するのがおすすめです。

.padding {

    background-color:blue;

    padding: 10px 5px 20px 15px;       //左からコンテンツ上右下左の設定

}

上下と左右全で設定したい場合は以下のように設定するのがおすすめです。

.padding {

    background-color:blue;

    padding: 10px 20px;       //左からコンテンツ上下・左右の設定

}

上と左右と下を全て個別に設定したい場合は以下のように設定するのがおすすめです。

.padding {

    background-color:blue;

    padding: 10px 20px 15px;       //左からコンテンツ上部・左右・下部の設定

}

borderとは？

borderでは枠線を設定できます。

・HTML

<!DOCTYPE html>

<html lang=“ja”>

    <head>

        <meta charset=“UTF-8”>

        <title>borderの説明</title>

        <link rel=“stylesheet” type=“text/css” href=“xxsheet.css”>

    </head>

    <body>

        <h2 class=“border”>border</h2>

    </body>

</html>

・CSS

@charset “utf-8”;

 

.border {

    background-color:blue;

    border: solid 2px red;

    width: 100px;

}

上のコードを実行すると以下のようになります。

「solid」とは実線のことを意味します。

「border:2px」を「border:10px」に変更すると以下のように枠線が太くなることがわかります。

この記述方法は上下左右全て同じ範囲に設定できます。

borderもpaddingと同様に上下左右個別に太さを設定できます。

.border {

    background-color:blue;

    border-left: solid 15px red;

    width: 100px;

}

例えば上のように設定すると以下のようになります。

marginとは？

marginでは枠の外の余白を設定できます。

margin もborderやpaddingと同様に上下左右個別に範囲を設定できます。

maginも以下のコードがあるときないときで比較してみましょう。

・HTML

<!DOCTYPE html>

<html lang=“ja”>

    <head>

        <meta charset=“UTF-8”>

        <title>marginの説明</title>

        <link rel=“stylesheet” type=“text/css” href=“xxsheet.css”>

    </head>

    <body>

        <h2 class=“margin”>margin</h2>

    </body>

</html>

・CSS

@charset “utf-8”;

 

.margin {

    background-color:blue;

    margin: 20px;

}

 

・上記のコード実行後

・margin設定なし

少しわかりにくいかもしれませんがmarginを設定した方にはコンテンツの左側に余白ができています。

maginは下図のように左右に二つ以上のコンテンツを並べた場合、コンテンツ1の右側で40pxとコンテンツ2で設定した20pxと設定すると合計である60pxコンテンツ1と2の余白のスペースになります。

しかし、下図のように上下に二つコンテンツ並べる場合はコンテンツ1の下部で40pxとコンテンツ2の上部で20pxと設定すると合計の60pxが余白のスペースになるのではなく大きく設定された方の40pxが余白のスペースになるので注意してください。

また、autoで中央に寄せることができます。

余白を設定できるさまざまな単位

この記事では、余白を調整する際に”px”という単位を使っていますが他にも単位があります。

相対的な単位

pxはデバイスの画素1つ分に相当するので相対的な単位と言えます。

px以外には主に6つあります。

1つ目は%という単位で親要素のcontent領域の幅に対する割合によって余白を設定できます。

2つ目はemという単位で親要素のフォントサイズに対する割合を示し、親要素のフォントサイズが1emになります。

例えば、親要素のフォントサイズが10pxの場合1emが10pxになります。

3つ目はexという単位で親要素の小文字のxの高さを1exとした割合です。

4つ目はremという単位でhtml要素で指定されたフォントサイズに対する割合です。

5つ目はvhという単位でviewportの高さの1/100を1とした割合です。

例えば、viewportの高さの50%に設定したい場合は50と指定することになります。

6つ目はvwという単位でviewportの横幅の1/100を1とした割合です。

こちらの考え方はvhと同じになります。

絶対的な単位

pxのような相対的な単位だけでなく画面をどんなに拡大・縮小してもコンテンツの大きさが変わらないようにできる方法があります。

主に5つあるので紹介します。

1つ目はin(インチ)という単位で1inは約2.5cmに相当します。

2つ目はpt(ポイント)という単位で1ptは1/72inに相当します。

3つ目はpc(パイカ)という単位で1pcは12ptに相当します。

残り2つ目はcm,mmなのでこれらは説明しなくてもわかるでしょう。

絶対的な単位に関しては他のコンテンツが埋もれる可能性もあるのでなるべく使わない方がいいでしょう。

というか使う機会はほとんどないと思いますが(笑)

簡単にコンテンツ全体の高さと幅を設定する方法

中にはいちいち細かくコンテンツの設定を調整するのが面倒だと思う方もいるでしょう。

そんな方は「width」や「height」を使いましょう！

「width」は横幅を「height」は高さを設定できます。

しかし、これはpaddingにのみかかる設定なのでborderやmarginは別で設定する必要があります。

まとめ

HTMLのコンテンツは必ずボックス構造になっており、コンテンツと枠の間の間隔を設定するpadding、枠自体を設定するborder、枠の外の余白を設定するmarginがありましたね。

それぞれ上下左右を個別に設定できます。

この内容はWebサイトを制作する上では基礎の中の基礎で難しくないのですぐにマスターしましょう！

More from my site