background-imageで指定した画像を横並びにする方法

background-imageで指定した画像を右に文字を左に配置して画像を右に配置したいのですがflexを指定しても横並びにならず消えてしまいます。画像にwidthも効かないので解決方法を教えてください。写真に示すように矢印の方向にもっていきたいです



  <main>

<!-- top -->
    <div class="top">
      <h2 class="copy">地域に密着した<br>活動を</h2>
      <p class="copy-text">地域に密着したボランティアがあります。

        <br>戦況分析から戦略の設定、分析・改善も提案しお客様の事業に貢献させて頂きます。
        <br> お客様1人1人に寄り添うWeb制作で一緒に課題を解決します。

      </p>

      <a href="" class="btn btn--orange">お問い合わせはこちら</a>

      <div class="box">
        <div class="top-img"></div>
      </div>

    </div>
<!--/top-->




  </main>






</body>

</html>

.top{
  color: #000;
  margin-left: 20rem;
  padding-top: 30rem;
  height: 100vh;
  position: relative;  
}

/* ボタン */
*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

.btn,
a.btn,
button.btn {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1rem 4rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #212529;
  border-radius: 0.5rem;
}

.btn--orange,
a.btn--orange {
  color: #fff;
  background-color: #000;
  
}

.btn--orange:hover,
a.btn--orange:hover {
  color: #fff;
  background: #000;
}


.copy{
  font-family: "Noto Sans JP", メイリオ, Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
  font-size: 5rem;
  font-weight: 900;
  font-feature-settings: "palt";
}

.copy-text{
  font-family: "Noto Sans JP",serif;
  font-size: 2rem;
  padding-top: 2rem;
  padding-bottom: 3rem;
  font-weight: bold;
}

.box{


}

.top-img{
  background-image: url(../img/img_grand-visual-1_pc.jpg);
  height: 100rem;
  background-repeat: no-repeat;
display:flex;
 width:110rem;
}

Lhankor_Mhy

2021/10/04 00:40

「画像にwidthも効かない」とのことですが、ご提示のコードで言うとどこに書いてあるwidthのことですか？

hatena19

2021/10/04 00:50

ご希望のレイアウトを画像で提示すると回答が付きやすいと思います。また、topの高さを 100vh と画面の高さにしてますが、それに対して、margin-left や padding-top は固定値で指定してますが、どのような意図でしょうか。

yamato47

2021/10/04 02:40

100vhの意図は画面いっぱいに表示しようとしたからです。

hatena19

2021/10/04 02:51

何を画面いっぱいに表示たいのでしょうか。画像の高さを画面の高さと同じにしたいということですか。

yamato47

2021/10/04 03:11

しっかり考えなおしたら100vhはいらなかったです。

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

回答1件

ベストアンサー

まず、display:flex;ですが、設定した要素じたいが横並びになるものではありません。
設定した要素の子要素を横並びにするものです。

テキストのブロックと画像のボックスを横並びにしたいのなら、その親要素に設定する必要があります。
この場合は、.top に設定するといいでしょう。
また、テキスト部分(h2, p, a)はdivで囲む必要があります。
そうしないとそれぞれが横並びになってしまいますので。

あと、テキストブロックと画像ブロックに適切な幅を設定する必要があります。
例えば、半分半分で分けたいなら、50%にするとか。

とりあえずの一例。

html
1<main>
2  <!-- top -->
3  <div class="top">
4    <div class="box">
5      <h2 class="copy">地域に密着した<br>活動を</h2>
6      <p class="copy-text">地域に密着したボランティアがあります。
7      <br>戦況分析から戦略の設定、分析・改善も提案しお客様の事業に貢献させて頂きます。
8      <br> お客様1人1人に寄り添うWeb制作で一緒に課題を解決します。
9      </p>
10      <a href="" class="btn btn--orange">お問い合わせはこちら</a>
11    </div>
12    <div class="box">
13      <div class="top-img"></div>
14    </div>
15  </div>
16  <!--/top-->
17</main>

css
1.top{
2  color: #000;
3  position: relative;
4  display: flex;
5}
6
7
8.box{
9  width: 50%;
10}
11
12.top-img{
13  background-image: url(../img/img_grand-visual-1_pc.jpg);
14  background-repeat: no-repeat;
15  background-size: cover;
16  height: 100%;
17}