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

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

ただいまの
回答率

87.37%

要素が幅に応じて限りなく広がってしまう。

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 487

score 38

前提・実現したいこと

「about」「news」部の、縮小すると画面幅に合わせて要素が限りなく広がってしまうのをなおしたい

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

画面を100%で見ているときはできているように見えて気づけないが、縮小すると要素がどんどんひろがっていってしまう。

該当のソースコード

<!DOCTYPE html>
<html>

<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width,initial-scale=1">
 <link rel="stylesheet" href="css/reset.css">
 <link rel="stylesheet" href="css/style.css">
 <link rel="stylesheet" href="css/responsive.css">
 <title>クリスタ 初級</title>
</head>

<body>
 <header>

  <div class="header-menu">
   <h1 class="header-left">クリ★スタ</h1>
   <ul class="header-top">
    <li><a href="#">About</a></li>
    <li><a href="#">Service</a></li>
    <li><a href="#">Contents</a></li>
   </ul>
  </div>
  <div class="header-image">
   <div class="kv-copy">
    <h1>Cresta Design.</h1>
   </div>
  </div>
 </header>

 <main>
  <section>
   <div class="container">

    <h2 class="section-title">About</h2>
    <div class="top-text">
     <h3>ミニマルで<br>洗練されたデザインを。</h3>
     <p>近年、ミニマルなデザインが流行しています。そこで弊社では、クライアント企業様新規サービス等の課題に対してミニマルで洗練されたデザインを実現させることで解決のサポートを致します。もちろん全てのサービスにおいてミニマルなデザインが課題解決になるわけではないので、課題や今後のサービスの展開等しっかりとヒアリングを行なった上でご提案させて頂きます。</p>
    </div>
   </div>
  </section>
  <section>
   <div class="container">
    <h2 class="section-title">Service</h2>
    <ul class="service-list">
     <li class="service-item">
      <div class="service-image">
       <img src="img/service-image@2x.jpg">
      </div>
      <div class="service-text left">

       <h3>リリース時のサポートで<br>サービスのブランディングを</h3>
       <p>弊社では、リリース時もサポートさせて頂きます。プレスリリース用のサイトや動画制作を通して、サービスのブランディングを行わせて頂きます。</p>
      </div>

     </li>
     <li class="service-item">

      <div class="service-text right">
       <h3>リリース後のサポートで<br>効果を最大化させる</h3>
       <p>弊社では、リリース後もサポートさせて頂きます。サービスはリリース後に様々な課題にぶつかります。そこでクライアント様と一緒に改善を行うことで、デザインの効果を最大化させます。</p>
      </div>
      <div class="service-image">
       <img src="img/service-image02@2x.jpg">
      </div>
     </li>
    </ul>
   </div>
  </section>

  <section>
   <div class="container">
    <h2 class="section-title">News</h2>
    <ul class="card-list">
     <li class="card-item">
      <a href="#!">
       <div class="card-image">
        <img src="img/card-image1@2x.jpg">
       </div>
       <p class="card-text">新規サイトを公開しました。今回のサイトは白と黒を基調にしたミニマルなデザインになっています。</p>
      </a>
     </li>
     <!--クラス名がclass= でなく div= だったためにcssがきかなかった-->
     <li class="card-item">
      <a href="#!">
       <div class="card-image">
        <img src="img/card-image2@2x.jpg">
       </div>
       <p class="card-text">新規サイトを公開しました。今回のサイトは白と黒を基調にしたミニマルなデザインになっています。</p>
      </a>
     </li>

     <li class="card-item">
      <a href="#!">
       <div class="card-image">
        <img src="img/card-image3@2x.jpg">
       </div>
       <p class="card-text">新規サイトを公開しました。今回のサイトは白と黒を基調にしたミニマルなデザインになっています。</p>
      </a>
     </li>
    </ul>
   </div>
  </section>

  <section>
   <div class="container">

    <h3 class="section-contact">お問い合わせ</h3>
    <ul class="contact-list">
     <li class="contact-item">
      <p>担当者名</p>
      <input type="text">
     </li>
     <li class="contact-item">
      <p>電話番号</p>
      <input type="text">
     </li>
     <li class="contact-item">
      <p>メールアドレス</p>
      <input type="text">
     </li>
     <li class="contact-item">
      <p>お問い合わせ内容</p>
      <textarea></textarea>
     </li>


    </ul>
   </div>
   <div class="form-send">
    <input class="form-btn" type="送信" value="送信">
   </div>
  </section>
 </main>






 <footer>

  <p>©︎crest.design all rights reserved</p>

 </footer>
</body>

</html>

該当のソースコード

@charset "UTF-8";
/*共通レイアウト*/
html {
  font-family: "Roboto", sans-serif, "Noto Sans CJK JP", sans-serif;
  /*フォント書き方*/
  font-size: 0.875rem;
  /*font-size: 14px;*/
  /* width: 100%;*/
  line-height: 1.8;
  /*line-height: 48;*/
  letter-spacing: 0.05em;
  /*h3だけでまとめておく*/
}
html img {
  max-width: 100%;
  vertical-align: bottom;
}
html h3 {
  font-size: 1.4rem;
  font-weight: bold;
  line-height: 2;
  letter-spacing: 0.1em;
  margin-bottom: 40px;
}
html .container {
  /*width: 100%;*/
  /* margin: 0 auto;*/
  /*padding: 0 120px;*/
  /*↑これがあってキャッチコピーはど真ん中だが全体がずれてたために*/
  padding: 100px 10% 50px;
}
html .container .section-title {
  /* width: 100%;*/
  font-size: 3.6rem;
  /* padding-top: 100px;*/
  padding-bottom: 70px;
  font-weight: bold;
  /* line-height: 1.5rem;*/
  letter-spacing: 0.05em;
  text-align: center;
  /*.list {
   width: 64.3rem;*/
}

/*ヘッダー*/
header {
  color: #FFFFFF;
  background-color: #141414;
  line-height: 1.3rem;
  /*padding: 0 10% 0;*/
}
header .header-menu {
  display: flex;
  padding: 0 120px;
  justify-content: space-between;
  /*リスト欄が端による*/
}
header .header-menu .header-left {
  font-size: 26px;
  line-height: 20px;
  text-align: left;
  padding: 20px 0;
}
header .header-menu .header-top {
  display: flex;
  text-align: right;
}
header .header-menu .header-top li {
  padding-top: 1.56rem;
  padding-right: 55px;
  align-items: end;
}
header .header-menu .header-top li a {
  text-decoration: none;
  color: #FFFFFF;
}

.header-image {
  background-image: url(../img/fv-bgi@2x.jpg);
  background-size: cover;
  width: 100%;
}
.header-image .kv-copy {
  padding: 302px 0;
  font-size: 36px;
  text-align: center;
}
.header-image .kv-copy h1 {
  border: 2px solid #FFFFFF;
  margin: 0 auto;
  width: 449px;
  line-height: 136px;
  text-align: center;
  width: 1005;
}

/*アバウト*/
.top-text {
  text-align: left;
  font-weight: bold;
}
.top-text p {
  line-height: 38px;
  width: 1030px;
}

/*サービス*/
.service-list {
  text-align: center;
  margin: 0 auto;
  width: 64.3rem;
}
.service-list .service-item {
  padding-bottom: 50px;
  display: flex;
  /* flex-direction: row-reverse;*/
  font-weight: bold;
  /*justify-content: space-between;*/
  /* align-items: center;*/
  /* text-align: center;*/
  margin: 0 auto;
}
.service-list .service-item p {
  line-height: 30px;
  width: 480px;
}
.service-list .service-item .left {
  text-align: left;
  margin-left: 70px;
}
.service-list .service-item .left p {
  width: 480px;
}
.service-list .service-item .right {
  text-align: left;
  padding-right: 70px;
}
.service-list .service-item .right p {
  width: 480px;
}

/*ニュース*/
/*.card-list {

 .card-item {
  margin: 50px 0 0;

  .card-image {
   width: 100%;
  }

  .card-text 
  /* width: 240px;*/
.card-list {
  /*text-align: center;*/
  display: flex;
  /*width: 320px;*/
  /*真ん中に詰まってしまうから不要*/
  /*justify-content: space-between;*/
  align-items: center;
}
.card-list .card-item {
  margin: 50px 0 0;
  /*コンテンツ間の余白*/
  text-align: center;
  /*コンテンツがすべて*/
  /* padding-right: 35px;*/
  box-shadow: 0px 0px rgba(27, 19, 16, 0.4);
  margin-right: 10px;
  border: 1px solid #1B131066;
}
.card-list .card-item .card-image {
  width: 320px;
  text-align: center;
}
.card-list .card-item .card-text {
  width: 225px;
  text-align: left;
  display: inline-block;
  color: #141414;
  padding: 25px 30px;
  line-height: 1.56;
}
.card-list .card-item:last-of-type {
  padding-right: 0px;
}

/*お問い合わせ*/
.section-contact {
  font-size: 1.5rem;
  padding-bottom: 93px;
  padding-top: 152px;
  font-weight: bold;
  text-align: center;
}

.contact-list {
  width: 700px;
  margin: 0 auto;
}
.contact-list p {
  text-align: left;
  padding-bottom: 3px;
  width: 700px;
}
.contact-list input {
  width: 700px;
  margin-bottom: 20px;
}
.contact-list textarea {
  width: 700px;
  height: 171px;
}

/*ボタン*/
.form-send {
  text-align: center;
  margin-top: 50px;
}
.form-send .form-btn {
  /*display: inline-block;
  */
  text-align: center;
  color: #FFFFFF;
  background-color: #141414;
  border-radius: 3.18em;
  padding: 1rem 0.7rem;
  font-size: 1.25rem;
  margin-bottom: 3.12rem;
  /**/
}

/*.btn {
 display: inline-block;
 background-color: $black;
 color: $white;
 line-height: 30;
 text-decoration: none;
 border-radius: 51px;
 margin: 0 auto;
 padding: 1rem 6rem;
 width: 235px;


 a {
  font-size: 1.25rem;
  display: inline-block;
  text-align: center;

 }
}
*/
/*フッター*/
footer {
  color: #FFFFFF;
  background-color: #141414;
  padding: 1.81rem;
  text-align: center;
}

試したこと

・幅を設定してみる(100%にしたり具体的に数値を拾ってみたり)
width:100%ならとりあえずいっぱいに広がってくれるかと思いましたが、「news」や「about」部にはきかない。
(フッターはwidthでうまく広がった)
全体的なhtmlにかけてみたり、それぞれの要素にかけてみたりしました。

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

OS:Windows
エディタ:Brackets
ブラウザ:クローム
XDからのデータ抽出により作成しています。

参考画像

【現在の状況:通常の100%全画面で見た場合】
イメージ説明

イメージ説明

【現在の状況:縮小画面で見た場合】
イメージ説明

【理想】
![イメージ説明](16ec1a16bc55d8d42b8b77d8c83a8804.png)

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

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

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

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

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

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

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

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

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

html .container {
  max-width: 960px; /*任意で最大の横幅決めてください*/
  margin: 0 auto; /*最大の横幅保ったまま中央寄せ*/
  padding: 100px 10% 50px; /*内余白で左右10%付くので、嫌だったら10%の部分を要調整。*/
}

これでどうでしょうか。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2021/02/04 12:35

    ご回答ありがとうございます!
    width:100%では通りませんでしたが具体的な数字にしたら通りました!
    ありがとうございました

    キャンセル

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

  • ただいまの回答率 87.37%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

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