CSSの使い方について

<style>
        body {
            background-size: cover;
            background: url(%E8%83%8C%E6%99%AF.png) center center / cover no-repeat fixed;
        }
        
        div.gazo-box {
                        float: left;
                        padding-right: 0px;
                        margin-left: 100px;

                      }
        
        

    </style>
</head>

<body>
    <header>
        <h1>ペンギンとじゃんけん対戦！！！</h1>
        <h2>出したい手の画像をクリック</h2>
        <h3>スコアも表示されるよ！</h3>
    </header>
    <main>



        <div class="gazo-box">
            <div id="pc"><img src="ペンギンペンギン.png"></div>
        </div>



        <div class="gazo-box">
            <div id="kekka">ここに結果を表示します</div>
            <div id="scoreBoard">結果</div>
        </div>



        <div class="gazo-box">
            <div id="gu_btn"><img src="gg.png"></div>
            <div id="cho_btn"><img src="chichi.png"></div>
            <div id="par_btn"><img src="pa.png"></div>
        </div>

ペンギンの画像、結果、じゃんけんの画像3っつを横に並べたく、<div>要素のgazo-boxでかこみ、CSSでfloat: left; padding-right: 0px;を設定したのですが、

‘ここに結果をひょうじします‘の文字の大きさや、その他微調整をしたいのですが、CSSで動かすためにはどのようにソースを書けばいいのかわかりません。どなたかわかる方、教えていただきたいです。

行動規範の内容に同意します

回答1件

ベストアンサー

その他微調整、というのはよくわかりませんが、文字の大きさであれば以下のように行うことができると思います。

HTML
1<!doctype html>
2<html>
3<head>
4    <meta charset='utf-8'/>
5    <title></title>
6    <style>
7        body {
8            background-size: cover;
9            background: url(%E8%83%8C%E6%99%AF.png) center center / cover no-repeat fixed;
10        }
11
12        div.gazo-box {
13            float: left;
14            padding-right: 0px;
15            margin-left: 100px;
16        }
17
18        .kekka {
19            font-size: 20px;
20        }
21
22        .scoreBoard {
23            font-size: 25px;
24        }
25    </style>
26</head>
27
28<body>
29<header>
30    <h1>ペンギンとじゃんけん対戦！！！</h1>
31    <h2>出したい手の画像をクリック</h2>
32    <h3>スコアも表示されるよ！</h3>
33</header>
34<main>
35
36
37    <div class="gazo-box">
38        <div id="pc"><img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=ペンギンペンギン.png"></div>
39    </div>
40
41
42    <div class="gazo-box">
43        <div id="kekka" class="kekka">ここに結果を表示します</div>
44        <div id="scoreBoard" class="scoreBoard">結果</div>
45    </div>
46
47
48    <div class="gazo-box">
49        <div id="gu_btn"><img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=gg.png"></div>
50        <div id="cho_btn"><img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=chichi.png"></div>
51        <div id="par_btn"><img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=pa.png"></div>
52    </div>
53</main>
54</body>
55</html>