Skip to content

CSSを書こう！(1/2)

06: CSS で色を付けよう

ここからは，文字に色を付けたり，レイアウトを整えてみましょう！ HTML で作った要素を装飾するには，CSS を利用します．

早速 CSS を利用しましょう！ CSSはstyleタグの中に書きます！

Info

CSS を HTML ファイル内に書かず，別のファイルに書く方法もありますが，今回は同じファイルに書いていきます．

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>

<html>
    <head>
        <!-- ページの設定などを書く -->
          <style>
            .contents-wrapper {
                padding: 50px 150px;
            }

         </style>
    </head>
    <body>
        <div class="contents-wrapper">
            <!-- ページの内容を書く -->
            <img src="logo-mark.png" />
            <h1>こんにちは！</h1>
            <p>
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis,
                illum dolor. Aspernatur magni reiciendis labore totam et rem, quae
                voluptates accusantium quas facere sint voluptas cupiditate maxime nemo
                inventore numquam?
            </p>
            <h2>好きな食べ物</h2>
            <ul>
                <li>うどん</li>
                <li>ラーメン</li>
                <li>ピザ</li>
            </ul>

            <a href="https://x.com/japan">私のXプロフィールへ</a>
        </div>
    </body>
</html>

早速，「こんにちは！」に色をつけてみましょう．

HTML では class を使って，要素に名前をつけられます．その名前を用いて，CSS で見た目を整えます．

装飾したい要素にclass="..."を追記しましょう．

こんな感じに追記します．

<h1 class="hello-heading">こんにちは！</h1>

コードはこんな感じになります．

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>

<html>
    <head>
        <!-- ページの設定などを書く -->
          <style>
            .contents-wrapper {
                padding: 50px 150px;
            }

         </style>
    </head>
    <body>
        <div class="contents-wrapper">
            <!-- ページの内容を書く -->
            <img src="logo-mark.png" />
            <h1 class="hello-heading">こんにちは！</h1>
            <p>
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis,
                illum dolor. Aspernatur magni reiciendis labore totam et rem, quae
                voluptates accusantium quas facere sint voluptas cupiditate maxime nemo
                inventore numquam?
            </p>
            <h2>好きな食べ物</h2>
            <ul>
                <li>うどん</li>
                <li>ラーメン</li>
                <li>ピザ</li>
            </ul>

            <a href="https://x.com/japan">私のXプロフィールへ</a>
        </div>
    </body>
</html>

Note

class 名としてhello-headingと書きましたが，これは好きな文字列でも OK です．

次に，<styles> ... </styles>の中に以下のコードを追記してください．

.hello-heading {
    color: #ff0000;
}

colorは文字の色を変更させるプロパティで，#ff0000は赤色を意味します．

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>

<html>
    <head>
        <!-- ページの設定などを書く -->
          <style>
            .contents-wrapper {
                padding: 50px 150px;
            }

            .hello-heading {
                color: #ff0000;
            }
         </style>
    </head>
    <body>
        <div class="contents-wrapper">
            <!-- ページの内容を書く -->
            <img src="logo-mark.png" />
            <h1 class="hello-heading">こんにちは！</h1>
            <p>
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis,
                illum dolor. Aspernatur magni reiciendis labore totam et rem, quae
                voluptates accusantium quas facere sint voluptas cupiditate maxime nemo
                inventore numquam?
            </p>
            <h2>好きな食べ物</h2>
            <ul>
                <li>うどん</li>
                <li>ラーメン</li>
                <li>ピザ</li>
            </ul>

            <a href="https://x.com/japan">私のXプロフィールへ</a>
        </div>
    </body>
</html>

Note

もし，class 名を好きな文字列にした場合は，CSS のhello-headingの部分は自分がつけた class 名に書き換えてください．

すると，このように文字に色がつきます！

07: ロゴマークを小さくしてみよう

今度はロゴマークを小さくしてみましょう．

img タグに適当な class をつけます．

こんな感じにつけます．

1
<img src="logo-mark.webp" class="logo-mark" />

コードはこんな感じになります．

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>

<html>
    <head>
        <!-- ページの設定などを書く -->
          <style>
            .contents-wrapper {
                padding: 50px 150px;
            }

            .hello-heading {
                color: #ff0000;
            }
         </style>
    </head>
    <body>
        <div class="contents-wrapper">
            <!-- ページの内容を書く -->
            <img src="logo-mark.png" class="logo-mark" />
            <h1 class="hello-heading">こんにちは！</h1>
            <p>
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis,
                illum dolor. Aspernatur magni reiciendis labore totam et rem, quae
                voluptates accusantium quas facere sint voluptas cupiditate maxime nemo
                inventore numquam?
            </p>
            <h2>好きな食べ物</h2>
            <ul>
                <li>うどん</li>
                <li>ラーメン</li>
                <li>ピザ</li>
            </ul>

            <a href="https://x.com/japan">私のXプロフィールへ</a>
        </div>
    </body>
</html>

ここでは class をlogo-markとしましたが，好きな文字列でも OK です．

次に，CSS に以下のコードを追記します．

.logo-mark {
    width: 100px;  /* "width"は幅を指定するプロパティ*/
}

もし，class 名を好きな文字列にした場合は，CSS のlogo-markの部分は自分がつけた class 名に書き換えてください．

コードはこんな感じになります．

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>

<html>
    <head>
        <!-- ページの設定などを書く -->
          <style>
            .contents-wrapper {
                padding: 50px 150px;
            }

            .hello-heading {
                color: #ff0000;
            }

            .logo-mark {
                width: 100px;  /* "width"は幅を指定するプロパティ*/
            }
         </style>
    </head>
    <body>
        <div class="contents-wrapper">
            <!-- ページの内容を書く -->
            <img src="logo-mark.png" class="logo-mark" />
            <h1 class="hello-heading">こんにちは！</h1>
            <p>
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis,
                illum dolor. Aspernatur magni reiciendis labore totam et rem, quae
                voluptates accusantium quas facere sint voluptas cupiditate maxime nemo
                inventore numquam?
            </p>
            <h2>好きな食べ物</h2>
            <ul>
                <li>うどん</li>
                <li>ラーメン</li>
                <li>ピザ</li>
            </ul>

            <a href="https://x.com/japan">私のXプロフィールへ</a>
        </div>
    </body>
</html>

再度ページを確認すると，このようにロゴマークの大きさが変わります！

08: メイン画像を追加しよう

ページにメイン画像を追加しましょう！

まずはこちらの画像をダウンロードし、index.htmlと同じ場所に置いてください． →https://raw.githubusercontent.com/KanadeSisido/welcome-gdgoc-2025/refs/heads/main/images/shibuya.webp

画像の追加には<img>を使います． 以下のコードをそのまま追加してください🖊️

このあとのために class としてtop-imageを追加してあります．

<img src="shibuya.webp" class="top-image"/>

Note

.webpは画像フォーマット「WebP」の拡張子です．

以下のように，img タグを追加します．

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>

<html>
    <head>
        <!-- ページの設定などを書く -->
          <style>
            .contents-wrapper {
                padding: 50px 150px;
            }

            .hello-heading {
                color: #ff0000;
            }

            .logo-mark {
                width: 100px;  /* "width"は幅を指定するプロパティ*/
            }
         </style>
    </head>
    <body>
        <img src="shibuya.webp" class="top-image"/>
        <div class="contents-wrapper">
            <!-- ページの内容を書く -->
            <img src="logo-mark.png" class="logo-mark" />
            <h1 class="hello-heading">こんにちは！</h1>
            <p>
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis,
                illum dolor. Aspernatur magni reiciendis labore totam et rem, quae
                voluptates accusantium quas facere sint voluptas cupiditate maxime nemo
                inventore numquam?
            </p>
            <h2>好きな食べ物</h2>
            <ul>
                <li>うどん</li>
                <li>ラーメン</li>
                <li>ピザ</li>
            </ul>

            <a href="https://x.com/japan">私のXプロフィールへ</a>
        </div>
    </body>
</html>

画像が追加されました 🙌

しかし，少し幅が足りないので，横幅を画面いっぱいにします． また，高さも500pxにします．

その際は，以下のような CSS をstyleの中に追記します．

.top-image {
    width: 100%;
    height: 500px;
}

今の状況を見てみましょう．

見た目はいい感じですが，実は横に引き伸ばされてしまっています．

そのため，いい感じに調整します．調整にはobject-fit: cover;というプロパティを用います．

こんな感じに CSS のtop-imageに追記します．

.top-image {
    width: 100%;
    height: 500px;
    object-fit: cover;
}

縦横比が画像の拡大により，ちょうどいい状態になっていることがわかります．

今のコードはこちら！ 
<!DOCTYPE html>

<html>
    <head>
        <!-- ページの設定などを書く -->
        <style>
            .contents-wrapper {
                padding: 50px 150px;
            }

            .hello-heading {
                color: #ff0000;
            }

            .logo-mark {
                width: 100px;  /* "width"は幅を指定するプロパティ*/
            }

            .top-image {
                width: 100%;
                height: 500px;
                object-fit: cover;
            }
        </style>
    </head>
    <body>
        <img src="shibuya.webp" class="top-image"/>
        <div class="contents-wrapper">
            <!-- ページの内容を書く -->
            <img src="logo-mark.png" class="logo-mark" />
            <h1 class="hello-heading">こんにちは！</h1>
            <p>
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis,
                illum dolor. Aspernatur magni reiciendis labore totam et rem, quae
                voluptates accusantium quas facere sint voluptas cupiditate maxime nemo
                inventore numquam?
            </p>
            <h2>好きな食べ物</h2>
            <ul>
                <li>うどん</li>
                <li>ラーメン</li>
                <li>ピザ</li>
            </ul>

            <a href="https://x.com/japan">私のXプロフィールへ</a>
        </div>
    </body>
</html>