<div></div>タグの囲む範囲、display-flexの正しい使い方

Question

前提・実現したいこと

サイトの模写をしています。<div class"=hirorinen">で囲った要素を<div class="colona">の直下に持っていきたいのですがうまくいきません。初心者で分からないことが多いですが教えていただけると嬉しいです。

発生している問題・エラーメッセージ

まずdivタグを使いすぎてぐちゃぐちゃになってわからなくなっています。あとはdivタグでどこからどこを囲ってdisplay-flexをかければいいのかがよくわからない状態です。

該当のソースコード

<div class="sezyutu"> <div> <a href="https://bgx.power-k.jp/llogin/8975/8976/"> <img src="https://toyama-hiloseikotsu.com/wp/wp-content/themes/portals/image/side/side_bnr04.png"></a> <div class="side"> <div> <a href="https://toyama-hiloseikotsu.com/"> <img src="https://toyama-hiloseikotsu.com/wp/wp-content/themes/portals/image/side/nav_home.png"></a> </div> <div> <a href="https://toyama-hiloseikotsu.com/access"> <img src="https://toyama-hiloseikotsu.com/wp/wp-content/themes/portals/image/side/nav_access.png"></a> </div> </div> </div> <div class="colona"> <a href="https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.kango-roo.com%2Fki%2Fimage_150%2F&psig=AOvVaw1TR4mTouM13JW9losijatM&ust=1602986639111000&source=images&cd=vfe&ved=0CAIQjRxqFwoTCLDhvN7EuuwCFQAAAAAdAAAAABAI"> <img src="https://img.kango-roo.com/upload/images/ki/alcohol-disinfection-hand-thumbnail.jpg"></a> <p>コロナウィルス対策<br>実施中</p> <h3>詳細はこちら</h3> </div> </div> <div class="hirorinen"> <h4>富山市でお体の不調や痛みにお悩みの方へ！</h4> <h3>ヒロ接骨院は<br>からだと心の健康のための<br>姿勢改善・自律神経調整専門院です。</h3> <img src="https://toyama-hiloseikotsu.com/wp/wp-content/themes/smartphone/image/top/top_flow_pic06.png"> <p>整形外科リハビリクリニック勤務、<br> 接骨院養成学校 講師、老人福祉施設 機能訓練士の<br> 経験があり、治療実績は延べ1000人以上。<br> 豊富な知識と経験で患者様の体の根本から整え、<br> 最高のパフォーマンスを発揮できる<br> 『生きがいの創造』を理念に<br> 女性の方はもちろん、男性の方にも<br> 心から『ホッ』とリラックスして、<br> 疲れやストレスをリセットできるよう<br> こだわりの空間を作りました。<br> ぜひ富山市 ヒロ整骨院に<br> お悩みをお聞かせください！</p> </div> </div>

試したこと

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

<div class"=hirorinen">で囲った要素を<div class="colona">の直下に持っていきたい

次のように普通に直下にもっていけばいいのではないかと思うのですが、何が問題なのでしょうか？

<div class="sezyutu">
  <div>
    <a href="https://bgx.power-k.jp/llogin/8975/8976/">
    <img src="https://toyama-hiloseikotsu.com/wp/wp-content/themes/portals/image/side/side_bnr04.png"></a>
    <div class="side">
      <div>
        <a href="https://toyama-hiloseikotsu.com/">
        <img src="https://toyama-hiloseikotsu.com/wp/wp-content/themes/portals/image/side/nav_home.png"></a>
      </div>
      <div>
        <a href="https://toyama-hiloseikotsu.com/access">
        <img src="https://toyama-hiloseikotsu.com/wp/wp-content/themes/portals/image/side/nav_access.png"></a>
      </div>
    </div><!-- .side -->
  </div><!-- div -->
  <div class="colona">
    <div class="hirorinen">
      <h4>富山市でお体の不調や痛みにお悩みの方へ！</h4>
      <h3>ヒロ接骨院は<br>からだと心の健康のための<br>姿勢改善・自律神経調整専門院です。</h3>
      <img src="https://toyama-hiloseikotsu.com/wp/wp-content/themes/smartphone/image/top/top_flow_pic06.png">
      <p>整形外科リハビリクリニック勤務、<br>
      接骨院養成学校 講師、老人福祉施設 機能訓練士の<br>
      経験があり、治療実績は延べ1000人以上。<br>
      豊富な知識と経験で患者様の体の根本から整え、<br>
      最高のパフォーマンスを発揮できる<br>
      『生きがいの創造』を理念に<br>
      女性の方はもちろん、男性の方にも<br>
      心から『ホッ』とリラックスして、<br>
      疲れやストレスをリセットできるよう<br>
      こだわりの空間を作りました。<br>
      ぜひ富山市 ヒロ整骨院に<br>
      お悩みをお聞かせください！</p>
    </div><!-- .hirorinen -->
    <a href="https://www.google.com/url?sa=i&amp;url=https%3A%2F%2Fwww.kango-roo.com%2Fki%2Fimage_150%2F&amp;psig=AOvVaw1TR4mTouM13JW9losijatM&amp;ust=1602986639111000&amp;source=images&amp;cd=vfe&amp;ved=0CAIQjRxqFwoTCLDhvN7EuuwCFQAAAAAdAAAAABAI">
    <img src="https://img.kango-roo.com/upload/images/ki/alcohol-disinfection-hand-thumbnail.jpg"></a>
    <p>コロナウィルス対策<br>実施中</p>
    <h3>詳細はこちら</h3>
  </div><!-- .colona -->
</div><!-- .sezyutu -->

まずdivタグを使いすぎてぐちゃぐちゃになってわからなくなっています。

上のように空白（インデントといいます）を置くとわかりやすいと思います。
また<!-- クラス名 -->のようにコメントアウトしておくのもアリです。

あとはdivタグでどこからどこを囲ってdisplay-flexをかければいいのかがよくわからない状態です。

それは質問者様が決めるしかないので、各クラスにdisplay-flexをかけてどれが想定したデザインになるか試してみましょう。

例えば.sideと.colonaを横に並べるならこうなります。

.sezyutu > div {
  display: flex;
}

Comments

[gentapro]

説明不足ですみません。
もう一度見直してみます。
ありがとうございました！