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

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

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

FlexはFlash PlayerやAdobe Airで動作するRIA(リッチインターネットアプリケーション)を開発する為のフレームワークです

レスポンシブWebデザイン

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

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

Q&A

解決済

1回答

4003閲覧

[Sass] nth-childが効いていないようです

yooina6

総合スコア7

Flex

FlexはFlash PlayerやAdobe Airで動作するRIA(リッチインターネットアプリケーション)を開発する為のフレームワークです

レスポンシブWebデザイン

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

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

0グッド

0クリップ

投稿2020/02/27 08:38

「calc」と「nth-child」「display: flex」でコンテンツの横並びをレスポンシブで作成しています

コンテンツ(li)が6つあり、3列2行の並びにしています。
それぞれmargin-rightは20pxですが
3・6番目のmargin-rightのみ、0にしたいので、
nth-childを使ったのですが、効いていないようでした。

ちなみにSCSSを使うのが初めてなので
sassの書き方に問題があるかもと思っています。


以下htmlとscssを載せます。
※ネストの問題の可能性もあると思ったのでsectionをまるまる載せてます
問題の箇所はulの中のliです。

html

1 <section class="card"> 2 <div class="card__inner"> 3 <h2>card</h2> 4 <ul class="card__box"> 5 <li> 6 <div></div> 7 <p class="card__box--txt"> 8 <h3>タイトルタイトル</h3> 9 <p class="txts">テキストテキストテキスト 10 テキストテキストテキスト 11 テキストテキストテキスト 12 テキストテキストテキスト 13 </p> 14 </p> 15 </li> 16 <li> 17 <div></div> 18 <p class="card__box--txt"> 19 <h3>タイトルタイトル</h3> 20 <p class="txts">テキストテキストテキスト 21 テキストテキストテキスト 22 テキストテキストテキスト 23 テキストテキストテキスト 24 </p> 25 </p> 26 </li> 27 <li> 28 <div></div> 29 <p class="card__box--txt"> 30 <h3>タイトルタイトル</h3> 31 <p class="txts">テキストテキストテキスト 32 テキストテキストテキスト 33 テキストテキストテキスト 34 テキストテキストテキスト 35 </p> 36 </p> 37 </li> 38 <li> 39 <div></div> 40 <p class="card__box--txt"> 41 <h3>タイトルタイトル</h3> 42 <p class="txts">テキストテキストテキスト 43 テキストテキストテキスト 44 テキストテキストテキスト 45 テキストテキストテキスト 46 </p> 47 </p> 48 </li> 49 <li> 50 <div></div> 51 <p class="card__box--txt"> 52 <h3>タイトルタイトル</h3> 53 <p class="txts">テキストテキストテキスト 54 テキストテキストテキスト 55 テキストテキストテキスト 56 テキストテキストテキスト 57 </p> 58 </p> 59 </li> 60 <li> 61 <div></div> 62 <p class="card__box--txt"> 63 <h3>タイトルタイトル</h3> 64 <p class="txts">テキストテキストテキスト 65 テキストテキストテキスト 66 テキストテキストテキスト 67 テキストテキストテキスト 68 </p> 69 </p> 70 </li> 71 72 </ul> 73 </div> 74 </section> 75

scss

1.card{ 2 width: 100%; 3 height: auto; 4 padding-bottom: 137px; 5 background-color: #EFEFEF; 6 7 .card__inner{ 8 width: 100%; 9 max-width: 1086px; 10 margin: 0 auto; 11 padding-top: 68px; 12 color:#6F7579; 13 @include mq('tab'){ 14 max-width: 730px; 15 } 16 @include mq('sp'){ 17 max-width: 342px; 18 } 19 20 h2::after{ 21 content: ""; 22 width: 76px; 23 display: block; 24 margin: 44px auto 0 auto ; 25 border: 1px solid #3F51B5; 26 } 27 .card__box{ 28 width: 100%; 29 padding-top: 68px; 30 display: flex; 31 flex-wrap: wrap; 32 33 li{ 34 width: calc(33.33333333% - 30px); 35 height: 355px; 36 background-color: #fff; 37 margin: 0 30px 20px 0; 38 padding: 16px; 39 40:nth-child(3n) { 41 margin-right: 0; 42 } 43 44 45 46 div{ 47 width: 100%; 48 height: 161px; 49 background-color: #DDD; 50 } 51 .card__box--txt{ 52 width: 100%; 53 padding-top: 26px; 54 p{ 55 width: 100%; 56 padding-top: 20px; 57 } 58 } 59 60 } 61 } 62 } 63} 64

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

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

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

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

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

kei344

2020/02/27 08:41

質問タグの「Flex」はCSSのFlexboxと関係ないのではずしてください。
guest

回答1

0

ベストアンサー

scss

1:nth-child(3n)

アンドが全角になっています。

投稿2020/02/27 08:40

maisumakun

総合スコア145183

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

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

yooina6

2020/02/27 08:44

初歩ミスですみません;; 大変助かりました;;
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問