08 ホームページ基礎講座　CSSのwidthとmargin

2020年4月3日2025年4月13日

今回はwidthを指定した際のmarginを使った中央の設定と、widthと同時に記述する際のborderとpaddingを入れるとwidthが大きくなることをしっかりと確認していきます。

HTML/CSSを入力しよう

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>エコロジーと環境問題 [Computer Technology Groups]</title>
    <style>
        /* ボディ全体のスタイル */
        body {
            background: #ffffe0;
            font-size: 1em;
            line-height: 1.7;
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
        }

        /* 記事全体のスタイル */
        article {
            border: 2px solid #333;
            width: 700px;
            padding: 2em; /* 内側の余白 */
            margin: 1em auto; /* 左右中央揃え、上下に1emの余白 */
            box-sizing: border-box; /* paddingとborderを含めた幅設定 */
        }

        /* セクションのスタイル */
        section {
            border: 1px solid #999;
            padding: 1em; /* 内側の余白 */
            box-sizing: border-box; /* paddingとborderを含めた幅設定 */
            margin-bottom: 1em; /* セクション間の余白 */
        }

        /* タイトルのスタイル */
        h1.title {
            background-color: #ff7500;
            padding: 0.5em;
            border-radius: 5px;
            color: #fff;
            font-size: 1.5em;
            text-align: center;
        }

        /* 中央揃えクラス */
        .center {
            text-align: center;
        }

        /* リストのスタイル */
        ul, ol {
            margin-left: 20px; /* 左側にインデント */
        }

        /* フッターのスタイル */
        footer {
            text-align: center;
            margin-top: 2em;
            font-size: 0.8em;
        }

    </style>
</head>

<body>
    <article>
        <section>
            <h1 class="title">ECOLOGY【エコロジー】</h1>
            <p>Computer Technology Groupsでは、グループをあげてエコロジー／環境問題に取り組んでいます。成果や実績を地域に還元することもポリシーとしています。</p>
        </section>
        <section>
            <h1>商品のラインナップ</h1>
            <p>紙やプラスチック、コンピューター・パーツのリサイクルにも力を入れ、あらゆる面での活動をひろげています。リサイクル商品のラインナップも豊富で、オンラインのショッピングコーナーではもちろんのこと、各地域のリサイクルセンターでもお買い求めいただけます。</p>
        </section>
        <section>
            <h1>リサイクル商品</h1>
            <ul>
                <li>ノートやメモ帳などの紙製品</li>
                <li>ペットボトル</li>
                <li>布製品</li>
                <li>ダンボール／梱包材</li>
                <li>木工製品／割り箸・爪楊枝など</li>
                <li>コンピューター基盤／電子機器</li>
            </ul>
        </section>
        <section>
            <h1>省エネ商品の使い方</h1>
            <ol>
                <li>消費電力を計測する機器を設置</li>
                <li>電源を自動的にオフにするキットの用意</li>
                <li>水量を調節する蛇口セットの準備</li>
                <li>家庭用省エネ10点セット</li>
            </ol>
        </section>
    </article>
    <footer>
        <p class="center"><small>Copyright © Computer Technology Groups All rights reserved.</small></p>
    </footer>
</body>

</html>

article要素に線と幅と余白のmargin指定

幅指定のwidthプロパティを使い文字の折り返しを指定します。そのwidthの幅がブラウザの中央に配置するように、外側余白のmarginを使い、上下 1em(１文字分) 左右auto（自動）を使います。そのarticle要素にborderプロパティ（線）を設置し、paddingプロパティで内側の余白を指定します。

article {
    width: 700px;
    padding: 2em;
    margin: 1em auto; /* 左右中央揃え、上下に1emの余白 */
    box-sizing: border-box;
}

width: 700px;
articleタグの幅を700pxに設定しています。これにより、記事の内容が指定した幅で表示されます。
margin: 1em auto;
marginの設定で、1em autoを使用しています。autoは左右のマージンを自動で調整し、要素を中央に配置します。1emは上下のマージンを設定し、1emの余白を上下に確保します。この結果、articleタグはページ中央に表示されます。

`width`、`border`、`padding`の影響と`box-sizing`

box-sizing: border-box; は、CSSで要素のサイズを計算する際の挙動を変更するプロパティです。このプロパティの設定により、要素の幅や高さがどう計算されるかに影響を与えます。

通常の`box-sizing`の挙動

デフォルトでは、box-sizingの値は content-box です。この場合、要素のwidth（幅）やheight（高さ）は、コンテンツエリアのみを対象に計算されます。つまり、padding や border はその外側に追加され、要素の最終的なサイズは次のように計算されます。

width（幅）= コンテンツの幅 + padding（内側の余白） + border（枠線の幅）
height（高さ）= コンテンツの高さ + padding + border

`box-sizing: border-box;`の場合

box-sizing: border-box; を使用すると、width や height の指定が コンテンツエリア + padding + border を含んだサイズとして計算されます。つまり、指定したwidthやheightが要素全体のサイズとしてそのまま適用されます。

marginの左右autoの意味

marginは外側の余白になります。今回はarticle要素の外です。上下に1em=1文字余白をあけ、左右にautoを指定しています。ショートハンドの記述を１つのプロパティで分けると下記になります。

margin-top:1em;
margin-bottom:1em;
margin-left:auto;
margin-right:auto;

autoを指定することで、article要素のwidth:700pxをブラウザの幅から引いて、二分割にした状態になるため、artcle要素を画面中央に配置することができます。widthで指定された幅を画面中央に配置するためには外側余白のmargin を使う必要があります。

検証画面の使い方

動画で学ぶWebデザイン教室　 Fuku…

00 レスポンシブホームページ講座 (検証ツール) | 動画で学ぶWebデザイン教室　 Fukuokamiyako レスポンシブホームページ制作講座の概要今回のレスポンシブホームページ制作講座は、その基本概念と考え方について学ぶ初回講座です。レスポンシブとは何か？スマートフ…

section要素にmargin-bottom

section要素は、１つ１つの区切りとなるセクションです。section要素自体には余白がないので、上のsection と下のsectionの余白を取るために margin-bottomを入れています。

section {
    border: 1px solid #999;
    padding: 1em;
    box-sizing: border-box;
    margin-bottom: 1em;
}

見出し部分に様々なアレンジを加えて練習してみましょう。

角の丸い見出しの作成 border-radius

h1要素にclass属性でtitleと書いているHTMLに、背景色の設定と角を丸くするborder-radiusプロパティを設定してみましょう。

h1.title {
            background-color: #ff7500;
            padding: 0.5em;
            border-radius: 5px;
}

角丸長方形のborder-radius:50vh;

角をラウンドに設定する場合、pxや%の指定を行います。ちょうど高さの半分を角丸設定したい場合の値は50vhです。

h1.title {
            background-color: #ff7500;
            padding: 0.5em;
            border-radius: 50vh;
 }

楕円はborder-radius:100%;

完全に円として指定する場合は100%となります。高さを入れることで円として指定するこも可能です。

h1.title {
            background-color: #ff7500;
            padding: 0.5em;
            border-radius: 100%;
            text-align: center;
}

四角異なる場合

四角異なる場合は値を４つ並べて指定します。左上端、右上端、右下端、左下端の時計回りです。

h1.title {
            background-color: #ff7500;
            padding: 0.5em;
            border-radius: 20px 20px 0 0;
            text-align: center;
}