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

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

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

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

HTML5

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

解決済

フレックスボックスで3つずつ要素を並べたいのですが、サイトの幅よりはみ出してしまいます。

Haruki
Haruki

総合スコア1

CSS3

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

HTML5

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

1回答

0評価

0クリップ

94閲覧

投稿2022/05/26 04:58

独学でwebデザインを勉強しているものです。
tetratailを使って初めて質問させていただきます。
初心者でレベルが低い質問なのですが、どうしてもわからないので、助けてもらえると嬉しいです🙏😭!!
質問は二つあります。
何卒よろしくお願いします。

質問① Flexbox がはみ出します。

添付の写真のようにフレックスボックスで3つずつ要素を並べたいのですが、なぜかサイトの幅よりはみ出してしまいます・・・。

イメージ説明

コードは以下の通りです。(読みにくかったらすみません。)

HTML

<div class="ex-list-1"> <div class="ex-item"> <div class="card"> <div class="ex-img"><img src="images/pics/egg.png" alt=""></div> <p class="ex-name" id="contents-title">朝どれ卵採り</p> <p class="ex-info" id="normal">当ホテルでは地鶏を25匹育てています。 こだわりの配合飼料で育てた鶏卵は格別の味! 朝早起きして、鶏小屋へ。 とれたて卵の卵かけご飯は格別です!</p> </div> </div> <div class="ex-item"> <div class="card"> <div class="ex-img"><img src="images/pics/agri.png" alt=""></div> <p class="ex-name"id="contents-title">農業体験</p> <p class="ex-info"id="normal">当宿では、化学肥料や農薬は一切使用せずに野菜を育てています。 大地の恵みを吸い上げた野菜たちはどれも個性的で味が濃いです。 そんな野菜たちの収穫体験をしてみませんか? </p> </div> </div> <div class="ex-item"> <div class="card"> <div class="ex-img"><img src="images/pics/fish.png" alt=""></div> <p class="ex-name"id="contents-title">オイカワ釣り</p> <p class="ex-info"id="normal">沢には野生のオイカワがたくさんいます。 オイカワ釣りに挑戦してみませんか? 釣った後は塩焼きにして食べるととっても美味しいです。釣り道具の貸出もいたしております。</p> </div> </div> </div> <!-- ex-list-1 --> <div class="ex-list-2"> <div class="ex-item"> <div class="card"> <div class="ex-img"><img src="images/pics/cooking-class.png" alt=""></div> <p class="ex-name"id="contents-title">お料理体験</p> <p class="ex-info"id="normal">当宿では、体に優しい自然派の料理を提供しております。シェフは、国内外を飛びまわってマクロビ料理を学んだ面白い経歴の持ち主です! お話ししながら一緒に晩御飯を作りませんか?</p> </div> </div> <div class="ex-item"> <div class="card"> <div class="ex-img"><img src="images/pics/sawanobori.png" alt=""></div> <p class="ex-name"id="contents-title">沢登り</p> <p class="ex-info"id="normal">夏は沢登りが人気です。 透明度が高くとても綺麗な沢です。 沢登りのインストラクターの資格があるスタッフがガイドいたします。 沢ぐつ、ヘルメットなどの装備は貸出いたします。 </p> </div> </div> <div class="ex-item"> <div class="card"> <div class="ex-img"><img src="images/pics/tour.png" alt=""></div> <p class="ex-name"id="contents-title">竹子集落ツアー</p> <p class="ex-info"id="normal">地元の方がガイドで竹子のツアーを開催します。 ガイドの方はとても気さくで、先祖代々この地域に住んでいらっしゃいます。 お散歩しながら、歴史に思いを馳せてみませんか? </p> </div> </div> </div> <!-- ex-list-2 --> </div>

CSS

.card { height: 100%; background-color: #F2F8FB; border-radius: 20px; width: 350px; padding: 20px 0px 20px 0px; border: solid 1px rgba(128, 128, 128, 0.314); } .ex-name { padding-top: 10px; } .ex-list-1,.ex-list-2 { display: flex; justify-content: space-between; padding-bottom: 50px; } .ex-list-2 { padding-bottom: 300px; } .ex-item { width: 200px; text-align: center; padding-top: 100px; }

質問② テキストメインビューの左端に謎の白線がでる

添付画像のように、赤枠で囲った部分の白線が消えません。

イメージ説明

HTML

<div class="mv"> <a href="#"><img src="images/pc/book-button-maru.png" alt="ご予約ボタン" class="mv-book"></a> <div class="mv-container"> <img class="mv-title" src="images/pc/Mvtitle.png" alt=""> <p class="mv-subtitle">やまのやど</p> </div> </div>

CSS

.mv { background-image: url(../images/pics/breakfast.png); width: 100%; height: calc(100vh - 70px); background-size: cover; background-position: center top; background-repeat: no-repeat; } img.mv-book { position: relative; top: 80px; left:900px; width: 170px; } .mv-container { text-align: center; padding-top: 120px; } p.mv-subtitle { font-family: 'ten-mincho-text',serif; font-weight: 400; font-style: normal; font-size: 60px; font-weight: bold; line-height: 1.2; letter-spacing: 0.2em; text-align: center; color: #516741; padding-top: 20px; } img.mv-title { text-align: center; }

良い質問の評価を上げる

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

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

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

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

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

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

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

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

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

recal

2022/05/26 06:11 編集

質問は1投稿に1つに絞ったほうがいいですよ。 質問のタイトルに(2)の内容含まれてないですよね? おそらくサイトの横幅を決めている要素だと思うのですが <div class="ex-list-1">の親要素のhtmlとcssを教えてください。

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

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

CSS3

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

HTML5

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