質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

解決済

レスポンシブ displayflex 横並び

free_teku
free_teku

総合スコア5

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

1回答

-1評価

0クリップ

397閲覧

投稿2021/09/28 07:11

編集2022/01/12 10:58

前提・実現したいこと

表題の通り、レスポンシブ flexで 横並びをさせたいです。
何日も試行錯誤しましたが、縦になりましたので質問します。

試みたのですが、うまくいきませんでした。何卒よろしくお願いいたします。

完成
現状

変更後:現状2

plan-imgにfooter.scss??

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

横表示にしたいのに縦表示になります。横表示になっても 、写真が大きすぎて、均等の配置にできない

試したこと

plan-item(写真+txtの親要素)にdisplay:flex,direction rowにしても縦表示になります。
均一に保たサイズにするために「flex:1;」にしても変わらない。
完成品のように表示させたいです

該当のソースコード

HTML

<!DOCTYPE html> <html lang="jp"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>石井花壇|温海温泉旅館【公式サイト】</title> <meta name="description" content="日本古来の素材と現代的表現を併せ持つ温泉旅館、石井花壇。伝統的な「和」の息づく空間で、至極のひとときをお過ごしください。"> <link rel="stylesheet" href="./css/destyle.css"> <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/> <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> <!--flatpicker--> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css"> <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script> <script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/ja.js"></script> <link rel="stylesheet" href="./css/style.css"> </head> <section class="plan"> <div class="wrapper inner"> <div class="sec-theme aos-init aos-animate" data-aos="zoom-in"> <img src="./img/logo02.png" alt="ロゴ"> <p class="cmn-ttl">おすすめご宿泊プラン</p><!-- /.cmn-ttl --> </div><!-- /.sec-theme --> <ul class="plan-list"> <li class="plan-item aos-init aos-animate" data-aos="fade-up"> <a href="#"> <div class="plan-txt"> <p class="plan-ttl">朝食付きプラン、日本近海で取れた のどぐろを朝食として…</p><!-- /.plan-ttl --> <p class="desc">最高級と称されるのどぐろ、正式には「アカ ムツ」と呼ばれる魚、味は独特の上品な味わ いで、焼いても煮ても美味</p><!-- /.desc --> </div><!-- /.plan-txt --> <img class="" src="./img/recommended01.jpg" alt="recommended01"> </a> </li><!-- /.plan-item --> <li class="plan-item aos-init aos-animate" data-aos="fade-up"> <a href="#"> <div class="plan-txt"> <p class="plan-ttl">【期間限定】熱海蟹をたっぷりと 愉しむプラン。</p><!-- /.plan-ttl --> <p class="desc">温海で水揚げされた蟹は「温海蟹」 として知られ、嗜好品として愛されて きました。この宿泊プランでは存分に</p><!-- /.desc --> </div><!-- /.plan-txt --> <img class="" src="./img/recommended02.jpg" alt="recommended02"> </a> </li><!-- /.plan-item --> <li class="plan-item aos-init aos-animate" data-aos="fade-up"> <a href="#"> <div class="plan-txt"> <p class="plan-ttl">【平日限定】贅沢美味懐石プラン。 海辺の四季旬彩プラン。</p><!-- /.plan-ttl --> <p class="desc">熱海近海で取れた魚を鮮度そのままに舟盛りに してご提供。生きた味をお楽しみください。</p><!-- /.desc --> </div><!-- /.plan-txt --> <img class="" src="./img/recommended03.jpg" alt="recommended03"> </a> </li><!-- /.plan-item --> </ul><!-- /.plan-list --> </div><!-- /.wrapper --> </section><!-- /.plan --> </body> </html>

mixin.scss

@charset "UTF-8"; // ブレイクポイント $breakpoints: ( 'sm': 'screen and (max-width: 576px)', 'md': 'screen and (max-width: 769px)', 'lg': 'screen and (max-width: 992px)', 'xl': 'screen and (max-width: 1200px)' ) !default; @mixin mq($breakpoint: md) { @media #{map-get($breakpoints, $breakpoint)} { @content; } } @mixin mr($breakpoint: lg) { @media #{map-get($breakpoints, $breakpoint)} { @content; } }

generalCSS

html { font-size: 62.5%; } body { font-size: 1.6rem; color: #000000; } img { width: 100%; height: auto; vertical-align: bottom; } a { text-decoration: none; } li { list-style: none; } .inner { max-width: 1180px; margin: 0 auto; } .wrapper { width: 100%; margin: 0 auto; } .sec-theme { margin: 0 auto; } .sec-theme > img { display: block; width: 3.3%; height: 5.1%; margin: 0 auto; padding-top: 60px; padding-bottom: 20px; } .sec-theme .cmn-ttl { display: block; font-size: 3.6rem; color: #000000; text-align: center; margin: 0 auto; } .cmn-link { background-color: #ffffff; width: 40%; height: calc(54px/545px*100%); border: 1px solid #707070; font-size: 1.6rem; text-align: center; } @media screen and (max-width: 992px) { .cmn-link { margin: 0 auto; } }

plan.css

/*plan*/ .plan { background-image: url(../../img/bg02.png); background-position: center; background-repeat: no-repeat; background-size: cover; height: auto; max-height: 775px; margin-top: 207px; } .plan-list { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; padding-top: 66px; padding-bottom: 144px; } @media screen and (max-width: 992px) { .plan-list { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } } .plan .plan-item { width: 28%; height: 71%; } .plan .plan-item a { display: block; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -webkit-flex-direction: row-reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; width: calc(750px/800px*100%); } @media screen and (max-width: 992px) { .plan .plan-item a { width: calc(750px/800px*100%); display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; padding: 0px 4vw; } } .plan .plan-item a .plan-txt { padding-top: 32px; } @media screen and (max-width: 992px) { .plan .plan-item a .plan-txt { width: calc(375px/800px*100%); padding-left: 20px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } } .plan .plan-item a .plan-txt .plan-ttl { font-size: 2rem; line-height: 1.6; } @media screen and (max-width: 992px) { .plan .plan-item a .plan-txt .plan-ttl { font-size: 2.0rem; } } .plan .plan-item a .plan-txt .desc { padding-top: 36px; } @media screen and (max-width: 992px) { .plan .plan-item a .plan-txt .desc { font-size: 1.6rem; } } .plan .plan-item a img { display: block; } @media screen and (max-width: 992px) { .plan .plan-item a img { width: 28%; height: 27%; width: 100%; } }

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

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

Lhankor_Mhy
Lhankor_Mhy

2021/09/30 01:20

質問の編集を拝読。 試してみましたが、テキストと画像は横並びになっているように見えます。 縦表示とは何についておっしゃっていますか?
free_teku
free_teku

2021/09/30 05:37

失礼しました。 文字が縦表示のまま変わっていません。 言葉足らずで申し訳ありません。 縦表示を横文字表示にできませんか? →文字の親要素txtにdisplay: flex, flex-direction: row;を書いていますが、、
Lhankor_Mhy
Lhankor_Mhy

2021/09/30 05:46

横文字表示、というのは、 「朝食付きプラン\.\.\.」と 「最高級と称される\.\.\.」とを 横並びに、という意味ですか?
free_teku
free_teku

2021/09/30 06:05

そうですね。おっしゃる通りです
Lhankor_Mhy
Lhankor_Mhy

2021/09/30 06:59

そのような表示になっているようでした。
free_teku
free_teku

2021/09/30 14:02

なぜなのでしょうか?かれこれ、2時間費やしていますが 結局変わりません。 imgに親要素divを追加しても結局変わらずです。 一つgoogle デベロップツールで気になる点がありました。それがplanのセクションになぜか footer\.scssが反応している表記になっていることです それぞれのsectionにplanやfooterの文字が混ざっているわけでもないのになぜこの現象が起こるのでしょうか?
Lhankor_Mhy
Lhankor_Mhy

2021/10/01 01:06

「そのような表示になっている」というのは、 「朝食付きプラン\.\.\.」と 「最高級と称される\.\.\.」とが 横並びになっている、という意味です。 つまり、問題が再現しませんでした。
free_teku
free_teku

2021/10/01 01:45

私が求めている写真は1の画像です。朝食~などを写真の横に表示させ、txtを縦に並べるようにしたいのですが、、表示されないです????
Lhankor_Mhy
Lhankor_Mhy

2021/10/01 01:48

テキストは横並びをご希望だったのではないですか? flex-direction: row; だと横に並びますよ。
free_teku
free_teku

2021/10/01 02:07

txtと写真は横並びで txtの中のttl,descは縦並びにして欲しいです。 紛らせてしまい、申し訳ありません。 1枚目の画像のようにしたいです。
Lhankor_Mhy
Lhankor_Mhy

2021/10/01 02:12

つまり、縦表示とか横表示とかは関係ないということですかね? 1枚目の画像では、そもそも写真が左側に来ていますよ。 そこから取り組んでみてはどうですか?
free_teku
free_teku

2021/10/01 02:48

かしこまりました。夜行います。
free_teku
free_teku

2021/10/06 11:00

大変ご連絡遅くなりました。申し訳ありません。 上記で追記しなおしました。画像は左に行きましたが txtが縦表示になっています。 試みたことはwriting-modeで横書き→反応しない displayinlineでも表示されませんでした。 この原因について教えていただけると幸いです。
Lhankor_Mhy
Lhankor_Mhy

2021/10/07 05:12

ご提示のコードを試してみましたが、やはり画像は右側にありました。(PCサイズでは左側でした) なお、文字は縦書きになってはいませんでした。折り返されているテキストを縦書きと勘違いされていませんか?
free_teku
free_teku

2021/10/07 06:56

追記しなおしました。 ご回答いただけると幸いです。 私の画面では画像が左側にあります。
Lhankor_Mhy
Lhankor_Mhy

2021/10/07 09:16

試してみたところ、タブレットサイズでは左側にありますね。 でも、モバイルサイズでは上側になっているようですが。 これは、なにを回答すればいいのですか? モバイルサイズで画像が左側に来るようにすればいいのですか?
free_teku
free_teku

2021/10/07 10:07

タブレットサイズ時でお願いします txt内のttlとdescを横書きにしたいです。 writing-modeで試しにdivでpを囲み、 writing-mode: horizontal-tb;と書きましたが ttlとtxtの関係性が縦がきになってしまいます
Lhankor_Mhy
Lhankor_Mhy

2021/10/08 00:35

「txt内のttlとdescを横書きにしたい」とのことですが、当方で試したところ、横書きになっています。
free_teku
free_teku

2021/10/13 13:05

できました。本当に長時間親身に付き合っていただきありがとうございます。 いつもありがとうございます!!!m\(__\)m

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。