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

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

ただいまの
回答率

87.81%

レスポンシブで要素(width100%)に取り消し線が入る

解決済

回答 1

投稿

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

score 3

レスポンシブで、width100%入力してますが、取り消し線で反映がされていません。どういった原因が考えられますでしょうか。

イメージ説明

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>WCB Cafe-Contact</title>
    <meta name="description" content="ブレンドコーヒーとヘルシーなオーガニックフードを提供するカフェ">
    <meta name="viewport" content="width=device-width,initial-scale=1">

    <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
    <link href="<link rel = "preconnect" href = "https://fonts.googleapis.com">
<link rel = "preconnect" href = "https://fonts.gstatic.com" crossorigin>
<link href = "https: //fonts.googleapis.com/css2?family = M + PLUS + Rounded + 1c:wght @ 700& display = swap "rel =" stylesheet ">
<link href="css/stylesheet.css" rel="stylesheet">
<link rel="icon" type="image/png" href="images/favicon.png">

  </head>



  <body>
    <div id="contact" class="big-bg">
    <header class="page-header wrapper">
      <h1><a href="index.html"><img class="logo" src="images/logo.svg" alt="WCBカフェホーム"></a></h1>
        <nav>
          <ul class="main-nav">
            <li><a href="news.html">News</a></li>
            <li><a href="menu.html">Menu</a></li>
            <li><a href="contact.html">Contact</a></li>
          </ul>
        </nav>
    </header>

    <div class="wrapper">
      <h2 class="page-title">Contact</h2>
      <form action="#">
        <div>
          <label for="name">お名前</label>
          <input type="text" id="name" name="your-name">
        </div>

        <div>
          <label for="email">メールアドレス</label>
          <input type="email" id="email" name="your-email">
        </div>

        <div>
          <label for="message">メッセージ</label>
          <textarea id="message" name="your-message"></textarea>
        </div>

        <input type="submit" class="button" value="送信">
      </form>
    </div>
</div>

<section id="location">
  <div class="wrapper">
    <div class="location-info">
      <h3 class="sub-title">カフェ東駅前店</h3>
      <p>
        住所:東京都○○区
        ○○○○○○○○○○○○○○<br>
        ○○○○○<br>
        電話:03−111−11111<br>
        営業時間:10:00〜20:00<br>
        休日:水曜
      </p>
    </div>
    <div class="location-map">
      <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3579.108632246164!2d127.69286871503041!3d26.22565958342822!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x34e56bda1815ec15%3A0x19878b55152eae59!2z44K144Oz44Ko44O86YKj6KaH44Oh44Kk44Oz44OX44Os44Kk44K5!5e0!3m2!1sja!2sjp!4v1626920649624!5m2!1sja!2sjp" width="800" height="400" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
    </div>
</div>
</section>

<section id="sns">
<div class="wrapper">
  <div class="sns-box">
    <h3 class="sub-title">Facebook</h3>
    <iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Ffacebook&tabs=timeline&width=340&height=315&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=false&appId" width="340" height="315" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>
  </div>

  <div class="sns-box">
    <h3 class="sub-title">Twitter</h3>
    <a class="twitter-timeline" data-height="315" href="https://twitter.com/tocho_koho?ref_src=twsrc%5Etfw">Tweets by tocho_koho</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
  </div>

  <div class="sns-box">
    <h3 class="sub-title">YouTube</h3>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/02azSAMtZWU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </div>

</div>

</section>

  <footer>
  <div class="wrapper">
    <p><small>&copy;2019 Manabox</small></p>
  </div>

  </footer>




  </body>

</html>
@media (max-width: 600px) {
    .page-title {
        font-size: 2.5rem;
    }


    .page-header {
        flex-direction: column;
        align-items: center;
    }



    .main-nav {
        font-size: 1rem;
        margin-top: 10px;
    }
    .main-nav li {
        margin: 0 20px;
    }


    .home-content {
        margin-top: 20%;
    }


.news-contents {
  flex-direction: column;
    }
    article,
    aside {
      width: 100%;
    }

    #news .page-title {
      margin-top: 30px;
    }
    aside {
      margin-top: 60px;
    }

    .post-info {
      margin-bottom: 30px;
    }

    .post-date {
      width: 70px;
      height: 70px;
      font-size: 1rem;
    }

    .post-date span {
      font-size: 0.875rem;
      padding-top: 2px;
    }

    .post-title {
      font-size :1.375rem;
    }

    .post-cat {
      font-size: 0.875rem;
      margin-top: 10px;

    }

    .post-title,
    .post-cat{
      margin-left: 80px;
    }

    /* MENU */
    .menu-content {
      margin-top: 20%;
    }

    .big-box {
      grid-column: auto;
      grid-row: auto;
    }

    .big-box img {
      height: auto;
    }

    #contact .page-title{
      margin-top :40px;
    }

/* **### ↓この、width100%が反映しません** */

    input[type="text"],
    input[type="email"],
    textarea {
      max-width: 100%;
    }

    #location .wrapper,
    #sns .wrapper {
      flex-direction: column;
    }

    .location-info,
    .location-map,
    .sns-box{
      width: 100%
    }
  .sns-box {
    margin-bottom: 30px;
  }

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • miyabi_takatsuk

    2021/07/22 14:11

    メディアクエリーではない箇所のCSSが影響している可能性が大なので、
    メディアクエリー外のCSSも記載してください。

    キャンセル

回答 1

checkベストアンサー

+2

様々な原因が考えられますが、
より優先度が高いセレクタによって、同プロパティの値が定義されているが主だった原因かと。
メディアクエリは、優先度が高くなるわけではありません
よって、他のスタイル同様、
優先度がより高いスタイルが当たっている場合、有効になりません。
なので、下記措置のいずれかを検証し、実施してください。

  • メディアクエリ定義を一番下行に記載
  • メディアクエリ内で、他で(メディアクエリ外)当てているセレクタと同じ、もしくは、より詳細度が高いセレクタで、定義する
  • !importantを使用する。(ただし、これ以降の実装にも影響が出かねないので注意)

上記措置でも解決できなければ、コメントください。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2021/07/22 14:25

    ありがとうございます。「メディアクエリ定義を一番下行に記載」で反映しました。

    キャンセル

  • 2021/07/22 14:33

    よかったです。
    レスポンシブで、メディアクエリを使用すると、最初のうちは引っかかってしまう部分なので、
    覚えておくとよいかと。

    > メディアクエリは、優先度が高くなるわけではありません。

    これを意識しておくと、他の部分でもスタイルが効かない原因を特定するのに役立つ場面があるかと思います。

    キャンセル

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

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

関連した質問

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