Q&A
実現したいこと
divタグのクラスに対してCSSでボックスを作成し,複数生成したそれらを画面の左右中央に縦に並べたいです
前提
画面背景をposition:abusolute,width:100%で指定し,
それらに対して新たに二つのボックスをposition:relativeで配置したいです.
先の開発では,それらの作成したboxに対してposition:abusoluteで要素を配置していこうと思っています.
発生している問題・エラーメッセージ
問題としては,boxが横並びになってしまうという形です.
}
該当のソースコード
HTML
1 <div id="start-screen" className="background"> 2 <div id="title_box"> 3 <p id="yokoso">ようこそ</p> 4 </div> 5 <div id="ctachfrase_box"> 6 <p id="あ">あ</p> 7 </div> 8 </div>
CSS
1#start-screen { 2 position: absolute; 3 width: 100%; 4 height: 7200px; 5 display: flex; 6 justify-content: center; 7 text-align: center; 8 padding: 276px; 9 background: #FFDDDD; 10} 11#title_box { 12 position: relative; 13 min-width: 804px; 14 height: 658px; 15 left: 0px; 16 top: 0px; 17 background: #F5F5F5; 18 box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); 19 border-radius: 30px; 20} 21#ctachfrase_box { 22 position: relative; 23 width: 180px; 24 height: 200px; 25 left: 0px; 26 top: 700px; 27 background: #F5F500; 28 box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); 29 border-radius: 30px;
試したこと
flex-direction: column;
等の記述を加えると縦に並びはするのですが,そうするとようこその方(tittle_box)のwidthが二つのboxを加算したものになってしまい,非常に横長のboxが二つ出来上がることになります.
align-items: flex-center;
を書くとimg画像が縦に並ぶといった旨の記事はみましたが,何も変わりませんでした.
補足情報(FW/ツールのバージョンなど)
かなり初歩的な質問で申し訳ありません.
また,実現したい内容が全く別の方法で可能なのであればそれでもかまいません.
一応環境としてはreactを用いたjavascript内で書いています.
その他,補足内容等が必要でしたら,コメントしていただけると幸いです.
回答1件
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
2023/03/12 00:56