公開日2022.05.26

最終更新日2023.04.24

HTML/CSSで背景色を変えたり、画像を入れて、余白の調整をしよう！

分かりやすいHTML/CSSの解説はいっぱいあるけど、今すぐ方法だけ知りたい！そんな方に基本的操作の紹介をしていきます。

とりあえず、色を入れてみたい！
画像を入れてみたい！
うまく余白の調整をしたい！

超シンプルで紹介以下のようなページを作ってみよう！

ページ作成前の準備

HTMLファイルとCSSファイルが用意できている状態ですよね？

「えっ⁉なんも準備できてない」「そこから教えて！」

という方は以下の項目をご確認ください

テキストエディタのインストール
ファイル構造の確認
テキストエディタでファイルを作る

テキストエディタのインストール

おススメのテキストエディタのインストール方法を詳しく解説した記事をぜひ参考に！

ファイル構造の確認

作業フォルダー📁にCSSと画像用のフォルダー📁を作りましょう。
今回はファルダ名を以下のようにしました。

CSSを入れるフォルダ名は「css」
画像を入れるフォルダ名は「img」

テキストエディタでHTMLファイル（index.html）とCSSファイル（style.css）を作り、下の図のような階層で保存しましょう。ファイルの場所は今後コードを書く際の相対パス（ファイル同士の道順・住所）として使うので間違えないようにしましょう。

index.htmlとstyle.css、画像フォルダの位置を表したファイル構造の図

テキストエディタでファイルを作る

テキストエディタを開く
左上の「ファイル」をクリック
「新規ファイル」をクリック
「Untitled-1」という新しいエディターが開く
HTMLファイルへコードを入力（下記コードをコピペでもOK）
左上の「ファイル」を再度クリック
「名前を付けて保存」をクリック
上図「index.html」にあたる場所に「index.html」と名前を付け保存
CSSファイルの「style.css」はcssフォルダの中に同様の手順で準備してください。

基本的なコードを張り付けるので使ってみてください。テキストは任意の文章や名称に変更してもOKです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <mete charset="utf-8">
    <title>海がきれい</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
</body>
</html>

１．背景にカラーを入れたい

Q.白い背景じゃなくてもっとカラフルにしたいなー
　どうすればいいの？

A.まずHTMLファイル（index.html）を確認します！

①HTMLファイル

<!DOCTYPE html>
<html lang="ja">
<head>
    <mete charset="utf-8">
    <title>海がきれい</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- ここに入れたコンテンツがブラウザに表示されます --> 
</body>
</html>

8行目の<body>に注目！
<body>～</body>にあるものがブラウザに表示されるので、画像や文章は <body>～</body> の間に入れなければいけません。
画面全体の背景を変えたい時はCSSファイル（style.css）にて<body>に背景のスタイルを適用します。

②CSSファイル

body{
    background-color: #b0d1e7;
    /* 背景色: #b0d1e7 */
}

1行目で[body]と宣言します。
2行目の[background-color]が背景色についての設定です。好きな色をカラーコードで指定してください。
そんなコード知らんわ（怒）という方はカラー標本のリンク先を参考にしてください。

参考：web色見本原色大辞典

完成画像⇩するとこんな全面１色の画面が完成します。

おまけ･･･background について

background-colorは背景に色をつけるためのプロパティですです。
他にもbackground関係のプロパティがたくさんあり、代表的なものはbackgroundという背景についての設定を一括で行えるプロパティです。

background：背景についての設定を一括で行う
background-attachment：背景画像のスクロール指定
background-clip：背景画像配置起点指定
background-color：背景色
background-image：背景画像
background-origin：背景拡張範囲指定
background-position：背景画像位置指定
background-repeat：背景画像の繰返し指定
background-size：背景の大きさ指定

背景に画像を指定したり、表示方法を変えたりできるんですね。
もっとカッコいい背景にしたい時に使ってみましょう！

２．部分的に色を入れたい

Q.全面じゃなくて、文章が書いてある部分だけ色を変えたいなー
　部分的に背景を変えるにはどうすればいいの？

A.変えたい範囲にHTMLファイル（index.html）でclass名を付け、CSSでその範囲について指定すればできます。

①HTMLファイル

<!DOCTYPE html>
<html lang="ja">
<head>
    <mete charset="utf-8">
    <title>海がきれい</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header>
        <h1>青い海</h1>
    </header>
    <main id="wrap">
         <div class="profile">
             <!-- この範囲の内容の背景を変えたいとする -->
         </div>
    </main>
</body>
</html>

13行目～15行目：<div>~</div>内のコンテンツの背景を変えたい時

<div>に”profile”というclass名を付けます。
CSSファイル（style.css）では[profile]というclassについて宣言をし、指定を行います。

②CSSファイル

body{
    background-color: #b0d1e7;
}
h1{
    color: white;
    height: 60px;
    font-size: 30px;
    text-align: center;
}
.profile{
    text-align: center;
    /*記載内容の位置：中央・・・文章や画像を入れた際は「中央揃え」という意味*/
    background-color: white;
　　 /*背景色：白*/
    width: 60%;
　　 /*幅：60％*/
    margin: auto;
　　/* [margin: auto] 余白を自動計算*/
    /* [margin:10px 20px] [margin:上下　左右] */
    /* [margin:10px 20px 30px] [margin:上　左右　下] */
    /* [margin:10px 20px 30px 40px][margin:上　右　下　左] */
}

10行目～22行目：HTMLで”profile”と名付けたclassに効果を与える

[.profile]と宣言しどこに（margin）、どのくらい（width）、何色（background-color）の背景を入れるかを記載します。

完成画像⇩するとこんな白い長方形が現れます。
[width:幅]のみ指定しているので、HTMLファイル（index.html）の”profile”内に画像や文章を入れるとその内容に合わせて縦方向にのみ伸びていきます。

index.htmlファイルに背景色とタイトル、画像の挿入領域を指定したwebページ見た目の画像

３．画像を入れたい

Q.画像を入れて華やかにしたいなー
白いところに画像を配置したら、いい感じになるのになー

A.HTMLファイル（index.html）で画像の場所を書けば、表示できます。

①HTMLファイル

<!DOCTYPE html>
<html lang="ja">
<head>
    <mete charset="utf-8">
    <title>海がきれい</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header>
        <h1>青い海</h1>
    </header>
    <main id="wrap">
         <div class="profile">
             <img src="img/umi.jpg" alt="海の写真">
         </div>
    </main>
</body>
</html>

13行目：<div>~</div>に画像を入れるとする

白い背景の部分に画像を入れたいので[profile]のclassに入れます。
画像が入っているファイルの場所を <img src=””>タグの「””」の中に示します。
ここでは「img」フォルダに入っている「umi」という画像を使うという指定が行われています。

下の図を使って考えると、今使っている「index.html」ファイルは赤枠の位置です。対して使いたい「umi.jpg」画像は黄〇の位置です。「index.html」に「umi.jpg」を呼び出すには「umi.jpg」の住所を記さないといけません。
「umi.jpg」は「img📁」の中にありますから、<img src=”img/umi.jpg”>となります。

※[alt=””]は盲目の方が利用される際の音声読み上げ用の情報です。どんな人でも利用しやすくなり、SEO対策にもつながるので加えるように心がけましょう。

②CSSファイル

body{
    background-color: #b0d1e7;
}
h1{
    color: white;
    height: 60px;
    font-size: 30px;
    text-align: center;
}
.profile{
    text-align: center;
    background-color: white;
    width: 60%;
    margin: auto;
}
img{
    width: 30%;
}

16行目～18行目にて画像についての指定を設定

画像の幅や位置について設定します。今回は幅のみ指定しています。

完成画像⇩ちょうど白い背景の部分に入っていますね。それにしてもなぜ、幅の設定だけで真ん中に画像が来ているのでしょうか？

index.htmlファイルに背景色とタイトル、画像を指定したwebページ見た目の画像(見た目の調整はしていない)

補足～なぜ幅の設定だけで画像は中央に？～

HTMLファイル(index.html)⇩での画像は<div class=”profile”>~</div>内にあるため、CSSファイル(style.css)で行われる”.profile”についての指定がすべて有効になります。

CSSファイル (style.css) ⇩ここで15行目に中央揃えの指定が行われているため、画像に対して個別で「右揃え」など別の指定をしない限り自動で中央揃えになります。
そのため、画像だけに指定したい作用を個別で設定すればいいのです。

４．画像と余白の調整

今の完成度は⇩こんな感じです。

Q.白い背景と画像の余白がいびつだな。この余白を調整するにはどうすればいいの？

A.CSSファイル(style.css)で[padding]を使えば調整できます。

body{
    background-color: #b0d1e7;
}
h1{
    color: white;
    height: 60px;
    font-size: 30px;
    text-align: center;
}
.profile{
    text-align: center;
    background-color: white;
    width: 60%;
    margin: auto;
    padding: 20px 0;
    /*[padding:10px][padding:四辺すべてに適用*/
    /*[padding:10px 20px][padding:上下　左右]*/
    /*[padding:10px 20px 30px][padding:上　左右　下]*/
    /*[padding:10px 20px 30px 40px][padding:border:上　右　下　左];*/
}
img{
    width: 30%;
}

CSSファイル：15行目[padding]に注目！

paddingとはコンテンツと境界との間の余白のことです。

ここでは白い背景部分と画像の余白のことです。これを指定するとキレイな余白が作れ、見栄えが良くなります。

完成画像⇩ ついに目標にしていた画面の完成です！画像の上下に丁度いい余白ができましたね。

index.htmlファイルに背景色とタイトル、画像を指定したwebページ見た目の画像(余白の調整を行った後)

５．余白について

Q.でもやっぱり[margin]]と[padding]の違いがよくわかんない。何が違うの？

A.図で見てみましょう。⇩コンテンツの中身が文章や画像を指します。[margin]は全体の余白で、[padding]はコンテンツの中身との余白です。

まとめ

HTML/CSSの作成時に親切な解説をしてくださるサイトはたくさんありますが、せっかちな私には適さなかったので、同じせっかちな方の助けになれたら嬉しいです。

コードをそのままコピペして色々試してみてください。