[CSS]画面のレイアウトを整えたい

前提・実現したいこと

画面レイアウトを整えたいです。

<h1>のタイトルと説明文が縦並びで中央にあり、その下にボタン3つを横並びに置きたいです。

現状

理想

該当のソースコード

<!DOCTYPE html>
<html>
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>ゲーム</title>
      <link href="https://unpkg.com/sanitize.css" rel="stylesheet"/>
      <style>            
        * {
         margin: 10px, auto;
         padding: 0;
         box-sizing: border-box;
         background-color: transparent;
         border-style: none;
        }

        html, body {
         background-image: url("image/001.jpg");
         background-color:rgba(255, 255, 255, 0.8);
         background-blend-mode:lighten;
         background-size: cover;
         background-attachment: fixed;
         background-position: center center;
         height: 100%;
        }

        body {
         display: flex;
         flex-direction: row;
         justify-content: center;
         align-items: center;
        }

        h1 {
         font-size: 60px;
         color: #010101;/*文字色*/
         background: linear-gradient(transparent 70%, #ff7480 70%);
         font-size: 60px;
        }

        p {
         font-size: 14px;
        }

    </style>
  </head>

  <body>
      <div class="titlecall">
            <h1>タイトル</h1>
            <p>説明文</p>
      </div>

      <div class="game1">
            <button type="button" onclick="" name="aaa" value="aaa">
                <img src="image/002.png" alt="vs漢字ボタン" width="50" height="50"/>
            </button>
            <p>ゲーム１</p>
      </div>

      <div class="game2">
            <button type="button" name="bbb" value="bbb">
                <img src="image/002.png" alt="vs漢字ボタン" width="50" height="50"/>
            </button>
            <p>ゲーム２</p>
      </div>

      <div class="game3">
        <button type="button" name="ccc" value="ccc">
                <img src="image/002.png" alt="vs漢字ボタン" width="50" height="50"/>
        </button>
        <p>ゲーム３</p>
      </div>
  </body>
</html>
<!-- 各ボタンにリンク貼って飛ばしたい -->

追記

・bodyのflexをやめて
・game1-3をひとまとめにラップする　を反映。

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

回答2件

ベストアンサー

bodyのflexをやめて
game1-3をひとまとめにラップする

投稿2020/03/12 03:54

yambejp

総合スコア116724

Jonny_dayo

2020/03/12 04:17

回答ありがとうございます！頂いた回答を元に「display: flex;」を削除し、ボタン3つをdivのclassでまとめたところ、追記のような状態になってしまいました…

yambejp

2020/03/12 04:24

あとはtitlecallを適当な幅に指定してラップした（仮に<div class="wrap"></div>）をflexにする .titlecall{ width:40%; margin:auto; } .titlecall *{ text-align:center; } .wrap{ display:flex; justify-content: space-evenly; }

Jonny_dayo

2020/03/12 04:45

回答ありがとうございます！！！！出来ました！！嬉しい！！！！ありがとうございました！！

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

bodyのflexは削除
Game1～3全体をdivで囲みクラス名を games とする。
下記のCSSを追加

css
1.titlecall {
2         display: flex;
3         flex-direction: column;
4         justify-content: center;
5         align-items: center;
6}
7
8.games {
9         display: flex;
10         justify-content: center;
11         align-items: center;
12}