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

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

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

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

HTML5

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

Q&A

解決済

2回答

2337閲覧

4カラムのカードデザインをレスポンシブ対応時に2カラムと1カラムで表示したい

MICHELLE

総合スコア6

CSS3

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

HTML5

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

0グッド

0クリップ

投稿2022/03/12 04:43

Webデザイン初心者です。
4カラムのカードデザインを作成したくて、
何とか4カラムのカードデザインは作成できました。

レスポンシブ対応したくて、
入力してみたのですが、なってくれませんでした。
ご教授よろしくお願いいたします。

ブレイクポイントが960px以下の際には2カラム
ブレイクポイントが520px以下の際には1カラムで縦並びに
対応させたいです。

html

1 <section class="works"> 2 <section id="new" class="inner"> 3 <h2><img src="images/mokuji/work_logo.png"></h2> 4 5 <div class="cardlayout-wrap"> 6 <!-- カードレイアウトをラッピング --> 7 <section class="card"> 8 <img class="card-img" src="images/grid/aircon.png" alt=""> 9 <div class="card-content"> 10 <h1 class="card-title">車販売/買取</h1> 11 <p class="card-text">新車・中古車、輸入車・国産車を問わず、 12 すべての車種を取り揃えることができます!</p> 13 </div> 14 <div class="card-link"> 15 <button class="button">詳しくはお問い合わせ下さい</button> 16 </div> 17 </section> 18 <section class="card"> 19 <img class="card-img" src="images/grid/car.png" alt=""> 20 <div class="card-content"> 21 <h1 class="card-title">エアコンクリーニング</h1> 22 <p class="card-text">エアコン分解のプロが行うエアコンクリーニング。お掃除機能付きエアコンもお任せ下さい!</p> 23 </div> 24 <div class="card-link"> 25 <button class="button">詳しくはお問い合わせ下さい</button> 26 </div> 27 </section> 28 <section class="card"> 29 <img class="card-img" src="images/grid/jiban.png" alt=""> 30 <div class="card-content"> 31 <h1 class="card-title">地盤調査</h1> 32 <p class="card-text">最新型のジオカルテⅢを使い、住宅から商業施設に至るまで、正確公正な調査データの提供を致します!</p> 33 </div> 34 <div class="card-link"> 35 <button class="button">詳しくはお問い合わせ下さい</button> 36 </div> 37 </section> 38 <section class="card"> 39 <img class="card-img" src="images/grid/reform.png" alt=""> 40 <div class="card-content"> 41 <h1 class="card-title">内装/リフォーム</h1> 42 <p class="card-text">住み心地のよい、住む人のための家作り。個性的な、お客様だけの住まいを作ります!</p> 43 </div> 44 <div class="card-link"> 45 <button class="button">詳しくはお問い合わせ下さい</button> 46 </div> 47 </section> 48 </div><!-- カードレイアウトをラッピング --> 49 </section> 50 </section>

css

1.works { 2 background: #fff; 3 /*背景色(古いブラウザ用)*/ 4 background: rgba(255, 255, 255, 0.6); 5 /*背景色。255,255,255は白の事で、0.6は色が60%ついた状態の事。*/ 6 width: 80%; 7 /*幅*/ 8 margin: 0 auto 40px; 9 /*上、左右、下へのボックスの外側の余白。左右にautoを指定すると中央配置になる。*/ 10 padding: 30px; 11 /*ボックス内の余白*/ 12 border-radius: 20px; 13 /*角丸のサイズ。この行削除すれば角が尖った通常の四角形になります。*/ 14 15} 16 17.cardlayout-wrap { 18 display: flex; 19 background: rgba(255, 255, 255, 0.6); 20 flex-wrap: nowrap; 21 justify-content: center; 22 align-items: center; 23 24} 25 26.card { 27 width: 350px; 28 background: #fff; 29 border-radius: 5px; 30 box-shadow: 0 2px 5px #ccc; 31 margin: 0 25px 0 0; 32} 33 34.card:nth-child(4n) { 35 margin-right: 0; 36} 37 38.card-img { 39 border-radius: 5px 5px 0 0; 40 max-width: 100%; 41 height: auto; 42} 43 44.card-content { 45 padding: 20px; 46} 47 48.card-title { 49 font-size: 20px; 50 margin-bottom: 20px; 51 text-align: center; 52 color: #333; 53} 54 55.card-text { 56 color: #777; 57 font-size: 14px; 58 line-height: 1.5; 59} 60 61.card-link { 62 text-align: center; 63 border-top: 1px solid #eee; 64 padding: 20px; 65} 66 67.card-link a { 68 text-decoration: none; 69 color: #0bd; 70 margin: 0 10px; 71} 72 73.card-link a:hover { 74 color: #0090aa; 75} 76 77/* メディアクエリ */ 78 79@media screen and (max-width:960px) { 80 81 .item { 82 margin: 0 20px 0 0; 83 width: calc(50% - 20px / 2); 84 } 85 86 .card:nth-child(2n) { 87 margin-right: 0; 88 } 89} 90 91@media screen and (max-width:520px) { 92 93 .item { 94 margin: 0 20px 0 0; 95 width: calc(50% - 20px / 2); 96 } 97 98 .card:nth-child(2n) { 99 margin-right: 0; 100 } 101}

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

イメージ説明

イメージ説明

コメントありがとうございます。
画面幅を変更する際にこのようにレイアウトがジグザグになってしまうのですが、
こちらはなおりますでしょうか?(1枚目・2枚目)

最小のサイズは無事1カラムになりました!
ありがとうございました。

投稿2022/03/12 10:28

編集2022/03/12 10:47
MICHELLE

総合スコア6

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hatena19

2022/03/13 01:03

質問は編集できますので、追加質問は、回答ではなくて質問の方に追記してください。
MICHELLE

2022/03/15 05:14

使い方がいまいちわかっておらず、申し訳ございませんでした。
guest

0

ベストアンサー

メディアクエリの部分を下記のように修正してみてください。

css

1/* メディアクエリ */ 2 3@media screen and (max-width:960px) { 4 .cardlayout-wrap { 5 flex-wrap: wrap; 6 } 7 .card { 8 margin: 0 20px 0 0; 9 width: calc(50% - 20px / 2); 10 } 11 12 .card:nth-child(2n) { 13 margin-right: 0; 14 } 15} 16 17@media screen and (max-width:520px) { 18 .card { 19 margin: 0 20px 0 0; 20 width: calc(100% - 20px / 2); 21 } 22 23 .card { 24 margin-right: 0; 25 } 26}

flex-wrap: nowrap;flex-wrap: wrap; で上書きして折り返しできるようにする。

.itemというセレクタに対応するクラスは存在しない。.cardの間違いでしょう。

追記

画面幅を変更する際にこのようにレイアウトがジグザグになってしまうのですが、
こちらはなおりますでしょうか?(1枚目・2枚目)

align-items: center;align-items: stretch;に修正してください。
アイテムの高さが、同じ行の高さが最大のものに合わせられます。

css

1.cardlayout-wrap { 2 display: flex; 3 background: rgba(255, 255, 255, 0.6); 4 flex-wrap: nowrap; 5 justify-content: center; 6 align-items: stretch; /* 修正 */ 7}

投稿2022/03/12 09:14

編集2022/03/15 06:15
hatena19

総合スコア33620

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問