Q&A
「並行」とは具体的にはどのような状態ですか？ 横並び、という意味でしょうか？
表題の件についてですが、
下記に添付したコード内で指定した、<div class="question-flexboxContainer">に
flexboxを指定し、<div class="faq-wrapper">と<div class="faq-image">の二つを、
container幅いっぱいに両端に均等配置したいのですが、うまくいかない状況です。
試したこと：<div class="question-flexboxContainer">が親要素となるようにして、
<div class="faq-wrapper">と<div class="faq-image">の二つの要素が子要素となるよう コードを書いたのですが、うまくできません。 クラス名faq-wrapperやfaq-image img内のwidthを20%くらいの小さな値に指定すると 、 並行にはなるのですが、containerの左側に寄った形で表示されてしまいます。 container幅に特別小さな値などの指定も行っていないので、 なぜうまく表示できないのかがわからない状態です。どなたかお分かりの方がいらっしゃいましたら、
教えていただけると助かります。
よろしくお願いいたします。
html
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>タイトルタイトルタイトル</title> 7 <meta name="description" content="ディスクリプションディスクリプションディスクリプション"> 8 <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css"> 9 <link rel="preconnect" href="https://fonts.gstatic.com"> 10 <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Roboto:wght@400;700&display=swap" rel="stylesheet"> 11 <link rel="stylesheet" href="css/style.css"> 12 <link rel="stylesheet" href="css/responsive.css"> 13 <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> 14 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 15 </head> 16 <body> 17 18 <div class="question-wrapper"> 19 <div class="container"> 20 <div class="question-flexboxContainer"><!--flexbox指定（親要素としました）--> 21 <div class="faq-wrapper"><!--flexbox指定（子要素としてcontainer幅の左側に配置したいです）--> 22 <div class="faq-heading"> 23 <h3>ダミーダミーダミー</h3> 24 </div> 25 <div class="faq"> 26 <ul id="faq-list"> 27 <li class="faq-list-item"> 28 <h4 class="question">ダミーダミーダミーダミーダミーダミー</h4> 29 <span>+</span> 30 <div class="answer"> 31 <p>ダミーダミーダミーダミーダミーダミー</p> 32 </div> 33 </li> 34 <li class="faq-list-item"> 35 <h4 class="question">ダミーダミーダミーダミーダミーダミー</h4> 36 <span>+</span> 37 <div class="answer"> 38 <p>ダミーダミーダミーダミーダミーダミー</p> 39 </div> 40 </li> 41 <li class="faq-list-item"> 42 <h4 class="question">ダミーダミーダミーダミーダミーダミー</h4> 43 <span>+</span> 44 <div class="answer"> 45 <p>ダミーダミーダミーダミーダミーダミー</p> 46 </div> 47 </li> 48 </ul> 49 </div> 50 </div> 51 <div class="faq-image"><!--flexbox指定（子要素としてcontainer幅の右側に配置したいです）--> 52 <img src="ダミーダミーダミー" alt=""> 53 </div> 54 </div> 55 </div> 56 </div> 57 </body> 58</html>
css
1@charset "UTF-8"; 2* { 3 box-sizing: border-box; 4} 5html { 6 font-size: 100%; 7} 8body { 9 font-family: 'Noto Sans JP', sans-serif; 10 font-family: 'Roboto', sans-serif; 11} 12a { 13 text-decoration: none; 14} 15h2, h3, p { 16 font-weight: normal; 17} 18.container { 19 width: 1170px; 20 padding: 0 15px; 21 margin: 0 auto; 22} 23.question-wrapper { 24 text-align: center; 25} 26.question-flexboxContainer { 27 display: flex; 28 justify-content: space-between; 29} 30.faq-wrapper { 31 padding-top: 70px; 32 width: 90%; 33 margin: 0 auto; 34 background-color: #EBF5EC; 35} 36.faq-heading h3 { 37 font-size: 16px; 38 letter-spacing: 5px; 39 font-weight: bold; 40} 41.faq { 42 padding-top: 5px; 43} 44.faq-list-item { 45 margin:20px; 46 border-bottom:1px solid #ccc; 47 position:relative; 48 cursor:pointer; 49 text-align: left; 50 list-style-type: none; 51} 52.faq-list-item h4 { 53 color: #595959; 54 font-size: 14px; 55 letter-spacing: 3px; 56 display: inline-block; 57 text-align: justify; 58 width: 85%; 59 font-weight: normal; 60} 61.faq-list-item span { 62 position:absolute; 63 bottom: 3px; 64 right: 5px; 65 color:#ccc; 66 font-size: 24px; 67} 68.question { 69 margin-bottom: 10px; 70} 71.answer { 72 color: seagreen; 73 font-size: 14px; 74 margin-bottom: 13px; 75 display: none; 76 letter-spacing: 3px; 77 line-height: 2; 78 font-weight: normal; 79} 80.answer p { 81 font-weight: bold; 82} 83.faq-image img { 84 width: 100%; 85 height: 100%; 86 object-fit: cover; 87 background-size: cover; 88} 89.contact-wrapper { 90 padding-top: 150px; 91 text-align: center; 92}
そのとおりです。
横並びの認識でよろしくお願いします。
ご提示のコードを試してみましたが、横並びになっているようでした。
結果のどのような部分が問題なのか、もう少し詳しくご提示いただけますか？
ご連絡が遅くなってしまい、申し訳ございません。
flex-wrap: wrap;
justify-content: space-between;の記載を削除したところ、
横並びにすることはできました。
"faq-wrapper"と"faq-image"の二つをモニター上で均等に配置したいのですが、
faq-wrapperやfaq-imageのwidthを50%にしてもどちらかが大きくなってしまう状況です。
どのサイズのモニターで表示しても均等に表示させる方法はご存知でしょうか。
もし、お分かりでしたら教えていただけると幸いです。
よろしくお願いいたします。
「flex-wrap: wrap;
justify-content: space-between;の記載を削除したところ、
横並びにすることはできました。」
とのことですが、ご提示のコードに上記の修正をしても表示に変化がありませんでした。
おそらく、私とuser20さんとの問題の共有ができていないと思われます。
もう少し詳しくご提示いただけますか？
説明不足となってしまい、申し訳ございませんでした。
cssコードを編集いたしました。
question-flexboxContainerとfaq-wrapper、faq-image imgの値を変更しており、
この状態でどのモニターで見ても、"faq-wrapper"と"faq-image"が均等に二つに分かれて
表示されるようにしたいのですが、
widthを50%などに変更してもうまくいかない状況です。
ご提示のコードに width: 50% とする変更を加えて試してみましたが、均等に二つに分かれて表示されました。
つまり、問題が再現しませんでした。
なるほどですね、
確認なのですが、faq-wrapperとfaq-imageのwidthを両方50%に変更したのでしょうか。
サンプルを示します。
https://jsfiddle.net/Lhankor_Mhy/9L28wvau/
faq-wrapper、faq-imageともに、570pxとなっていますので、均等に二つに分かれていると思います。
サンプルを添付していただき、ありがとうございます。
.faq-wrapper,.faq-image
{width: 50%;} を入力したところ表示できました。
この度は誠にありがとうございました。
なんだかよくわかりませんが、打ち間違いか何かだったのでしょうか？
もし、次にご質問される時はお気を付けください。問題のすり合わせで時間を消耗するのはムダです。
そして、ご解決されて何よりです。
自己解決の処理をお願いします。
https://teratail.com/help#resolve-myself
Lhankor_Mhyさんやnomura02さんのご回答で解決できましたので、
自己解決ではなく、ベストアンサーを選ばせていただこうと思います。
この度は、誠にありがとうございました。
回答1件
0
ベストアンサー
こんばんは！
私も初学者で勉強中です！
復習がてら回答させて頂きます！間違ってたらすみません！！
似た名前のクラス名が多く、親要素がどことどこを横並びにすればいいか迷ってるとか…？でしょうか…
詳細度と優先順位について
faq
↓
faq-content
↓
faq-content-wrapp
とより細かくなっていくならわかるのですが、HTMLを見るとそうじゃなかたです
HTML
1<div class="oyayouso"> 2 3 <div class="koyouso1"> 4 <p>中身</p> 5 </div> 6 7 <div class="koyouso2"> 8 <p>中身</p> 9 </div> 10 11</div>
CSS
1 .oyayouso{ 2 display: flex; 3 }
もういっそのこと、少しシンプルな感じにしたり、指定するクラス名を変える、とか…
あと、はばいっぱいで微妙に少しあけるなら、flex-wrap: wrap;
はいらないと思うのですがどうでしょうか？？
あと、
CSS
1.faq-image img { 2 width: 30%; 3 height: 200px; 4}
は、width: 100%;で、heigtも％で指定したほうが良さそうだと思うのですがどうですか？
間違ってたらすみません！！
投稿2021/01/15 10:29
総合スコア133
ご回答いただき、ありがとうございます。
また、連絡が遅くなってしまい申し訳ございませんでした。
ご指摘のように、flex-wrap: wrap;
justify-content: space-between;を削除したところ、
横並びにできました。
参考サイトも添付していただき、ありがとうございました。
あなたの回答
tips
プレビュー
