06 ホームページ基礎講座　CSSで横幅のwidthと線指定

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

URLをコピーしました！

今回は、その指定したsection要素にCSSの横幅指定のプロパティwidthや、線を指定するborderプロパティを使用してCSSのデザイン設定を行います。

HTMLとCSSコードを入力してみよう

幅指定や余白指定のCSSプロパティの練習です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>エコロジーと環境問題</title>
    <style>
        body {
            background-color: #ffffe0;
            font-size: 100%;
            line-height: 1.8;
            margin: 0;
            padding: 0;
        }
        article {
            /* 横幅を指定し、中央揃えに */
            width: 600px;
            border: 1px solid #000000;
            padding: 2em;
            margin: 2em auto;
            background-color: #ffffff;
        }
        section h1 {
            /* セクション内のh1にボーダーを追加 */
            border: 1px solid #999;
            padding: 0.5em;
            background-color: #f8f8f8;
        }
        h1, footer {
            /* ヘッダーとフッターを中央揃えに */
            text-align: center;
        }
        footer {
            margin-top: 2em;
            padding: 1em 0;
            background-color: #4CAF50;
            color: white;
        }
    </style>
</head>
<body>
    <header>
        <h1>ECOLOGY【エコロジー】</h1>
    </header>
    <main>
        <article>
            <header>
                <h2>基本ポリシー</h2>
            </header>
            <section>
                <p>エコロジーや環境問題への関心は、年々高くなっています。Computer Technology Groupsでは、グループをあげてエコロジー／環境問題に取り組んでいます。環境保全に尽くすだけでなく、その成果や実績を地域に還元することもポリシーとしています。</p>
            </section>
        </article>
        <article>
            <header>
                <h2>エコロジーへの取り組み</h2>
            </header>
            <section>
                <p>Computer Technology Groupsでは早くからエコロジーの研究に取り組んできました。自然エネルギーの活用もすすめており、二酸化炭素（CO2）の排出量を減らす努力もしています。専門家の招致、育成にも努め、来春には環境研究施設を設立する予定です。</p>
            </section>
        </article>
        <article>
            <header>
                <h2>商品のラインナップ</h2>
            </header>
            <section>
                <p>紙やプラスチック、コンピューター・パーツのリサイクルにも力を入れ、あらゆる面での活動をひろげています。リサイクル商品のラインナップも豊富で、オンラインのショッピングコーナーではもちろんのこと、各地域のリサイクルセンターでもお買い求めいただけます。</p>
            </section>
        </article>
    </main>
    <footer>
        <p>Copyright © Computer Technology Groups. All rights reserved.</p>
    </footer>
</body>
</html>

基本設定をbody要素で作成

body {
    background-color: #ffffe0;
    font-size: 100%;
    line-height: 1.8;
}

background-color: #ffffe0;: 背景色を淡い黄色（クリーム色）に設定しています。目に優しく温かみのある印象を与えます。
font-size: 100%;: フォントサイズを標準（ブラウザ設定に依存）に設定します。一般的に16px程度が設定されます。
line-height: 1.8;: 行間を1.8倍に広げ、テキストを読みやすくします。

横幅指定のwidth を使用

次にarticle要素を使って、横幅、外枠のborder 、線からの内側余白を指定します。widthプロパティを使うので、横幅が一定の距離で折り返すというところになります。

article {
    width: 600px;
    border: 1px solid #000000;
    padding: 2em;
    margin: 2em auto;
    background-color: #ffffff;
}

width: 600px;: コンテンツの横幅を600pxに固定します。
border: 1px solid #000000;: 黒色の1pxの枠線を追加します。
padding: 2em;: 内側の余白を設定し、コンテンツが枠に近づきすぎないようにします。
margin: 2em auto;: 外側の余白を設定し、縦方向に2em、横方向に中央揃えします。
background-color: #ffffff;: 背景色を白に設定し、見やすさを向上させます。

width/marin/padding

幅と高さの指定

width要素を使って横幅を指定します。
- 単位例: px（ピクセル）、%（親要素に対する割合）、em（フォントサイズに基づく）、vw（ビューポート幅に対する割合）。
- 使用例: width: 600px; → 横幅600ピクセルに設定。
height:要素を使って縦幅を指定します。
- 単位例: px、%、em、vh（ビューポート高さに対する割合）。
- 使用例: height: 300px; → 縦幅300ピクセルに設定。

内側の余白（`padding`）

paddingは要素内のコンテンツと枠線（ボーダー）の間の距離を指定します。

単一指定: padding: 10px; → 上下左右すべて10ピクセル。
- 単位例: px（ピクセル）、%（親要素に対する割合）、em（フォントサイズに基づく）、vw（ビューポート幅に対する割合）。
- 使用例: width: 600px; → 横幅600ピクセルに設定。
個別指定:
- 単位例: px、%、em、vh（ビューポート高さに対する割合）。
- 使用例: height: 300px; → 縦幅300ピクセルに設定。

外側の余白（`margin`）

要素の外側にある余白を指定します。

単一指定: margin: 10px; → 上下左右すべて10ピクセル。個別指定:
- 単位例: px（ピクセル）、%（親要素に対する割合）、em（フォントサイズに基づく）、vw（ビューポート幅に対する割合）。
- 使用例: width: 600px; → 横幅600ピクセルに設定。
margin-left: 10px; → 左側の余白10ピクセル。
margin-right: 10px; → 右側の余白10ピクセル。
margin-top: 10px; → 上側の余白10ピクセル。
margin-bottom: 10px; → 下側の余白10ピクセル。
- 単位例: px、%、em、vh（ビューポート高さに対する割合）。
- 使用例: height: 300px; → 縦幅300ピクセルに設定。

widthとmarginを使った中央配置の仕組み

CSSの以下の指定を使うと、横幅が固定されているボックスを中央に配置できます。

article {
    width: 600px;
    margin-left:auto;
    margin-right:auto;
    /*margin: 0 auto;*/
}

width: 600px;
- 横幅を600ピクセルに固定。
- この幅のボックスが中央に配置されるための基準となります。
margin: 0 auto;
- 上下の余白: 0 → ボックスの上下に余白を設定しない。
- 左右の余白: auto → 残りのスペースを左右に均等に割り当てます。
- 結果として、幅600ピクセルのボックスが画面中央に配置されます。

詳しい解説は下記も参照してみてください！

見出し枠にborderを設定

section h1 {
     border: 1px solid #999;
}

border: 1px solid #999;: 見出しに薄い灰色の枠線を追加します。
padding: 0.5em;: 内側の余白を追加し、見出しを強調します。
background-color: #f8f8f8;: 見出しの背景に薄いグレーを設定します。

上記の設定は、見出し　h1 要素に1px の黒の実線を外枠に書いています。その下のコードは同じh1 に記述しますが、sectionという親要素の中のh1 であるという指定になるので、全てのh1要素が中央揃えになるとは限りません。この指定を親の中の子要素に指定する「子孫セレクタ」といいます。

h1とfooter をまとめて中央揃え

h1,footer{
    text-align: center;
 }

行の中で中央に揃える「text-align:center」を使って中央に揃えます。その際、h1要素とfooter要素も同じ中央揃えなので、同時に指定する場合は、カンマ区切りで続けて書きます。この指定をグループセレクタといいます。

footerにmarginとpaddingを追加

footer {
    margin-top: 2em;
    padding: 1em 0;
    background-color: #4CAF50;
    color: white;
}

margin-top: 2em;: フッターとメインコンテンツの間に余白を追加します。
padding: 1em 0;: フッター内の上下の余白を設定します。
background-color: #4CAF50;: フッターの背景色を緑に設定し、強調します。
color: white;: フッター内の文字色を白に設定してコントラストを高めます。

次は箇条書き要素のul要素です！　07に移動する

よかったらシェアしてね！

URLをコピーしました！

06 ホームページ基礎講座 CSSで横幅のwidthと線指定