画像と文字を横並びにしたい（CSS Flex)

前提・実現したいこと

初めてHTMLとCSSを使ってページを作成しています。
headerにて、画像を右側に、左側に文字を表示したく、
文字のクラスとfigureを横並びにすることを考えましたが
Display flexでうまくできません。
ご教示頂けると幸いです。

html
1<!DOCTYPE html>
2<html>
3    <head>
4        <meta charset="utf-8">
5        <meta name="viewport" content="width=device-width, initial-scale=1.0">
6        <title>aaaa</title>
7        <link rel="stylesheet" href="stylesheet.css">
8    </head>
9    <body>
10        <header> 
11                <div class="headerpart">
12                    <h1>タイトル！</h1>
13                    <h1>タイトル２！</h1>
14            
15                    <div class="comment-container">
16                        <p>コメントが入ります</p>
17                    </comment-container>
18            
19                    <a href="###" class=button >概要はこちらから</a>
20                </div>
21
22                <figure>
23                    <img class="sayu" src="./images/sayuri.jpg" alt="sayu">
24                </figure>
25        </header>
26    
27    
28    </body>
29
30</html>

css
1@charset "utf-8";
2
3header{
4    background-image:url(./images/top-background.jpg);
5    background-size:cover;
6    display:flex;
7}
8
9.headerpart{
10    width:50%;
11}
12
13.figure{
14    width:50%;
15}
16
17h1,p{
18    color:white;
19}
20
21
22.comment-container{
23    background-color:rgba(102,153,255,0.8);
24}
25
26.button{
27    background-color:crimson;
28    width:200px;
29    color:white;
30}
31

itagagaki

2021/05/03 05:31

ご提示のコードからは、どんな仕上がりが正解なのかが想像できません。仕上がりイメージを示したほうが的確な回答が得られると思います。あと、コードは ```ここに言語名を入力ソースコード ``` のように書いてください。質問は編集できます。

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

回答1件

ベストアンサー

横に並べたい要素を<div>で囲ってdisplay: flex;を使うと良いです。

私が書き直して確認したコードはこちら

HTML
1<!DOCTYPE html>
2<html>
3    <head>
4        <meta charset="utf-8">
5        <meta name="viewport" content="width=device-width, initial-scale=1.0">
6        <title>aaaa</title>
7        <link rel="stylesheet" href="stylesheet.css">
8    </head>
9    <body>
10        <header> 
11                <div class="headerpart">
12                    <h1>タイトル！</h1>
13                    <h1>タイトル２！</h1>
14<div class="comment-and-button-and-image">
15  <div class="comment-and-button">
16                    <div class="comment-container">
17                        <p>コメントが入ります</p>
18                    </comment-container>
19
20                    <a href="###" class="button">概要はこちらから</a>
21                </div>
22  </div>
23                <figure>
24                    <img class="sayu" src="https://eigo.plus/wp-content/uploads/2016/12/shutterstock_206625799.jpg" alt="sayu">
25                </figure>
26</div>
27        </header>
28
29
30    </body>
31
32</html>

CSS
1@charset "utf-8";
2
3header{
4    background-image:url(https://image.shutterstock.com/image-photo/bluesky-260nw-637029049.jpg);
5    background-size:cover;
6    display:flex;
7}
8
9.headerpart{
10    width:50%;
11}
12
13.figure{
14    width:50%;
15}
16
17h1,p{
18    color:white;
19}
20
21.comment-and-button-and-image{
22  display: flex;
23}
24.comment-and-button{
25}
26.comment-container{
27    background-color:rgba(102,153,255,0.8);
28  width: 300px;
29}
30.button{
31    background-color:crimson;
32    width:200px;
33    color:white;
34}
35.sayu{
36}