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

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

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

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

解決済

レスポンシブ:スマホ表示の時に横並びのカードを1列にしたい

削除済ユーザー
削除済ユーザー

総合スコア0

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

1回答

0評価

0クリップ

1516閲覧

投稿2019/07/29 16:37

●解決したいこと
横並びのカードをスマホ表示の際に1列にしたい。
タブレット表示の横2列はwith:50%が効いて実現できたのですが、1列の場合width:100%;やmarginの設定が効かず困っています。!importantにすると実現できるのですが、どこの設定が優先されwidth:100%;が効かないのがわかりません。

HTML

<body> <!-- Start Header --> <header> <div class="container header-contents"> <div class="header-left"> <img src="img/logo.png" class="logo"> </div> <div class="header-right"> <ul class="header-list"> <li><a href="#card">Card</a></li> <li><a href="#news">News</a></li> <li><a href="#price">Price</a></li> <li><a href="#access">Access</a></li> <li><a href="#contact">Contact</a></li> </ul> </div> </div> </header> <!-- End Header --> <!-- Start Main Page --> <section class="main-wrapper"> <div class="container"> <h1>一番伝えたいことを書く</h1> <p>リードリードリード</p> <a href="#" class="btn">お問い合わせ</a> </div> </section> <!-- End Main Page --> <!-- Start Card Page --> <section class="card-wrapper"> <div class="container"> <div class="heading"> <h2>Card</h2> </div> <div class="cards"> <div class="card"> <img src="img/card-img.svg"> <p class="title">タイトルタイトル</p> <p class="text-contents">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> </div> <div class="card"> <img src="img/card-img.svg"> <p class="title">タイトルタイトル</p> <p class="text-contents">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> </div> <div class="card"> <img src="img/card-img.svg"> <p class="title">タイトルタイトル</p> <p class="text-contents">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> </div> <div class="card"> <img src="img/card-img.svg"> <p class="title">タイトルタイトル</p> <p class="text-contents">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> </div> <div class="card"> <img src="img/card-img.svg"> <p class="title">タイトルタイトル</p> <p class="text-contents">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> </div> <div class="card"> <img src="img/card-img.svg"> <p class="title">タイトルタイトル</p> <p class="text-contents">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> </div> </div> </div> </section> <!-- End Card Page -->

css

@charset "UTF-8"; * { margin: 0; padding: 0; } body { font-family: 'Yu Gothic'; } .container { width: 1086px; max-width: 100%; margin: 0 auto; } li { list-style: none; } a { text-decoration: none; color: #fff; } header { height: 100px; background-color: #3F51B5; box-shadow: 0 3px 3px; position: fixed; top: 0; left: 0; width: 100%; box-shadow: 0 3px 3px #000000; z-index: 999; } .header-contents { display: flex; justify-content: space-between; } .logo { padding: 31px 0 30px 10px; width: 200px; height: 39px; } .header-right { width: 344px; height: 25.5px; padding: 40px 10px 34.5px 0; font-size: 16px; } .header-list { display: flex; } .header-list li { margin-right: 30px; } .header-list a:hover { border-bottom: 3px solid #E81919; } .main-wrapper { text-align: center; background-image: url(../img/main-img.jpg); background-position: center center; background-repeat: no-repeat; background-size: cover; height: 700px; padding-top: 100px; } .main-wrapper h1 { width: 748px; height: 87px; padding-top: 249px; margin-bottom: 12px; margin: 0 auto; font-size: 68px; line-height: 108px; } .main-wrapper p { width: 342px; height: 49px; padding-bottom: 82px; margin: 0 auto; font-size: 38px; font-weight: bold; line-height: 61px; } .btn { width: 228px; height: 49px; padding: 17px 81px; margin-bottom: 138px; display: inline-block; background-color: #3F51B5; border-radius: 12px; box-shadow: 0 3px 6px #000000; font-size: 38px; font-weight: bold; } .card-wrapper { background-color: #efefef; } .heading { padding-top: 68px; padding-bottom: 44.3px; } .heading h2 { font-size: 60px; text-align: center; position: relative; } .heading h2::before { content: ''; display: inline-block; position: absolute; left: 50%; bottom: -44.3px; /*線の上下位置*/ -webkit-transform: translateX(-50%); transform: translateX(-50%); /*位置調整*/ background-color: #3F51B5; /*線の色*/ width: 76px; /*線の長さ*/ height: 5px; /*線の太さ*/ } .cards { display: flex; flex-wrap: wrap; padding-top: 113px; padding-bottom: 117px; } .card { background-color: #fff; border-radius: 4px; margin-bottom: 20px; margin-right: 30px; padding: 16px 16px 28px 16px; width: calc(33.3333333% - 60px / 3); box-sizing: border-box; } .card:nth-child(3n) { margin-right: 0; } .card img { margin-bottom: 26px; width: 100%; } .title { color: #6f7579; font-size: 20px; margin-bottom: 20px; } .text-contents { color: #6f7579; font-size: 16px; } @media screen and (max-width: 767px) { .logo { width: 120px; } .header-right { display: none; } .card { width: 100% !important; margin-right: 0 !important; } } @media screen and (max-width: 1365px) { header { height: 60px; width: 100%; } .logo { padding: 20px 50px; width: 130px; height: auto; } .header-right { width: 250px; height: 20px; padding: 20px; font-size: 13px; } .header-list li { margin-right: 15px; } .main-wrapper { height: 400px; padding-top: 60px; } .main-wrapper h1 { font-size: 30px; width: 100%; padding-top: 70px; } .main-wrapper p { font-size: 20px; width: 100%; padding-bottom: 40px; } .main-wrapper .btn { width: 150px; height: 40px; padding: 8px 40px; margin-bottom: 60px; font-size: 20px; font-weight: bold; line-height: 40px; } .card { width: calc(50% - 30px / 2); } .card:nth-child(3n) { margin-right: 30px; } .card:nth-child(2n) { margin-right: 0; } }

良い質問の評価を上げる

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

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

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

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

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

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

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

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

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

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

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。