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

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

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

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

HTML5

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

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

Q&A

解決済

2回答

879閲覧

calcをしようするとimgが崩れてしまう

KengKeng

総合スコア7

CSS3

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

HTML5

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

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

0グッド

0クリップ

投稿2020/03/10 08:48

イメージ説明

前提・実現したいこと

現在、模写コーディングをしています。初学者です。
カードを3枚均等に並べたのですが、cssでcalc関数を使用するとイメージ画像が崩れてしまいます。(使用前は崩れない)
画像を崩さないでレスポンシブに対応した均等なカード(レイアウト)にしたいのでご教授いただきたいです。

該当のソースコード

以前にもしようしたコードなので間違いはないと思うのですが、一応載せておきます。
margin: 0 30px 20px 0;
width: calc(33.33333333% - 60px / 3);

※練習用のデザインカンプに沿ってコーディングしているのでmargin-right,margin-bottomの値は固定で何とかしたいです。

html

1<div id="blog-tile-container"> 2 <div class="title"> 3 <h1>Blog Tile</h1> 4 </div> 5 <div class="tile-inner"> 6 <div class="tile-content"> 7 <div class="tile-content-img"> 8 <img class="img" src="img/card-bt-img.svg" alt=""> 9 <span class="label">ラベル</span> 10 </div> 11 <div class="tile-content-inner"> 12 <h3>タイトルタイトル</h3> 13 <p>テキストテキストテキストテキストテキスト 14 テキストテキストテキストテキストテキストテキストテキスト</p> 15 </div> 16 </div> 17 <div class="tile-content"> 18 <div class="tile-content-img"> 19 <img class="img" src="img/card-bt-img.svg" alt=""> 20 <span class="label">ラベル</span> 21 </div> 22 <div class="tile-content-inner"> 23 <h3>タイトルタイトル</h3> 24 <p>テキストテキストテキストテキストテキスト 25 テキストテキストテキストテキストテキストテキストテキスト</p> 26 </div> 27 </div> 28 <div class="tile-content"> 29 <div class="tile-content-img"> 30 <img class="img" src="img/card-bt-img.svg" alt=""> 31 <span class="label">ラベル</span> 32 </div> 33 <div class="tile-content-inner"> 34 <h3>タイトルタイトル</h3> 35 <p>テキストテキストテキストテキストテキスト 36 テキストテキストテキストテキストテキストテキストテキスト</p> 37 </div> 38 </div> 39 <div class="tile-content"> 40 <div class="tile-content-img"> 41 <img class="img" src="img/card-bt-img.svg" alt=""> 42 <span class="label">ラベル</span> 43 </div> 44 <div class="tile-content-inner"> 45 <h3>タイトルタイトル</h3> 46 <p>テキストテキストテキストテキストテキスト 47 テキストテキストテキストテキストテキストテキストテキスト</p> 48 </div> 49 </div> 50 <div class="tile-content"> 51 <div class="tile-content-img"> 52 <img class="img" src="img/card-bt-img.svg" alt=""> 53 <span class="label">ラベル</span> 54 </div> 55 <div class="tile-content-inner"> 56 <h3>タイトルタイトル</h3> 57 <p>テキストテキストテキストテキストテキスト 58 テキストテキストテキストテキストテキストテキストテキスト</p> 59 </div> 60 </div> 61 <div class="tile-content"> 62 <div class="tile-content-img"> 63 <img class="img" src="img/card-bt-img.svg" alt=""> 64 <span class="label">ラベル</span> 65 </div> 66 <div class="tile-content-inner"> 67 <h3>タイトルタイトル</h3> 68 <p>テキストテキストテキストテキストテキスト 69 テキストテキストテキストテキストテキストテキストテキスト</p> 70 </div> 71 </div> 72 </div> 73 </div>

css

1#blog-tile-container { 2 3 @include title; 4 5 .tile-inner { 6 display: flex; 7 flex-wrap: wrap; 8 } 9 10 .tile-content { 11 width: 340px; 12 height: 355px; 13 background-color: #fff; 14 border-radius: 2px; 15 box-shadow: 0px 3px 6px #000029; 16 margin: 0 30px 20px 0; 17 width: calc(33.33333333% - 60px / 3); 18 } 19 20 .item:nth-child(3n) { 21 margin-right: 0; 22} 23 24 .tile-content-img { 25 position: relative; 26 27 .img { 28 padding: 16px 16px 0; 29 } 30 31 .label { 32 background-color: #3F51B5; 33 color: #fff; 34 padding: 5px 30px; 35 font-weight: bold; 36 font-size: 12px; 37 position: absolute; 38 top: 16px; 39 right: 14px; 40 } 41 } 42 43 .tile-content-inner { 44 padding: 0 16px 28px; 45 color: #6F7579; 46 47 h3 { 48 font-size: 20px; 49 } 50 51 p { 52 font-size: 16px; 53 } 54 } 55}

試したこと

imgをbackground-imageにしてみたり、imgを包含しているdivの位置を変えてみたりしているのですがなかなかうまく行きません。
お気づきの点があれば、ぜひご教授願います。

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

ここにより詳細な情報を記載してください。

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

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

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

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

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

guest

回答2

0

回答とは直結しませんが気になった点を
せっかくcalcをお使いなのですから%も綺麗に求めませんか?

CSS

1 2width: calc( ( 100% / 3 ) - ( 60px / 3 ) ); 3/* <=> */ 4width: calc( ( 100% / 3 ) - 20px ); 5/* <=> */ 6width: calc( ( 100% - 60px ) / 3 );

(同値記号か?まぁいっか

投稿2020/03/10 10:32

編集2020/03/10 14:08
kyoya0819

総合スコア10429

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

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

KengKeng

2020/03/10 13:12

ご指摘助かります。 1人で書いたコードですと、気づけないところもあるので、客観的なご意見もありがたいです。 今後も見やすいコードを意識していきたいと思います。
kyoya0819

2020/03/10 14:09

参考になれば何よりです。
guest

0

ベストアンサー

画像サイズが大きいとはみ出してしまう気がします。
以下を指定すると解決しそうです。

CSS

1.tile-content-img .img { 2 padding: 16px 16px 0; 3 max-width: 100%; 4 box-sizing: border-box; 5}

投稿2020/03/10 09:33

new1ro

総合スコア4528

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

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

KengKeng

2020/03/10 13:10

ご親切かつ迅速な対応ありがとうございます。 無事問題解決しました! max-widthとbox-sizingは見たことはありましたが、なかなか意識して使用したことがなかったので目から鱗でした。
new1ro

2020/03/10 13:29

ありがとうございます! 補足として、50pxなど小さい画像の場合を考えると、 「max-width: 100%;」ではなく、「width: 100%;」でもいいかもしれません。 小さい画像を表示する可能性があればご一考ください。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問