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

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

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

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

Sass

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

Q&A

解決済

1回答

562閲覧

ブロックとブロックの間にそれぞれに大きさの違う余白を開けたい。

spn

総合スコア37

HTML5

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

Sass

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

0グッド

0クリップ

投稿2023/04/20 14:08

編集2023/04/21 03:07

実現したいこと

余白を開けたいです。3つのブロックがあり、それぞれ余白の大きさが違います。
クラス名は追加したくないので、2つ目の.features-boxの下に85px、3つ目の.features-boxの下に135pxマージンを付けたいです。

.features-box:not(:last-of-type ) {
margin-bottom: 85px;}
.features-box:last-of-type {
margin-bottom: 135px;}
とCSSを書いたが85pxの方が優先されてしまいます。

前提

ネットで調べて、last-childは使えないと知り、
:last-of-typeを使用しました。
お分かりの方おられましたらお力添えのほど宜しくお願いします。

該当のソースコード

SCSS

1 2 3.features-ttl { 4 font-size: clamp(24px, 2.8vw, 28px); 5 text-align: center; 6 margin-bottom: 60px; 7} 8 9.features-box { 10 display: flex; 11 flex-direction: column; 12 margin-bottom: 120px; 13 14 &:nth-of-type(3) { 15 margin-bottom: 60px; 16 } 17} 18 19.features-box_main { 20 font-size: clamp(20px, 2.8vw, 24px); 21 line-height: 2; 22 font-weight: bold; 23} 24 25.features-box_sub { 26 font-size: clamp(14px, 2.8vw, 16px); 27 line-height: 1.6; 28 font-weight: bold; 29 margin-top: 30px; 30 31} 32 33.features-box_thumb { 34 margin-top: 40px; 35 36 figure { 37 img { 38 max-width: 100%; 39 } 40 } 41} 42 43.no-blank { 44 display: none; 45} 46 47@include small { 48 .features-box { 49 display: flex; 50 flex-direction: row-reverse; 51 justify-content: space-around; 52 53 } 54 .features-box:not(:last-of-type ) { 55 margin-bottom: 85px; 56 } 57 .features-box:last-of-type { 58 margin-bottom: 135px; 59 } 60 61 .features-box_body { 62 width: calc((100% - 10px)/2); 63 } 64 65 .features-ttl { 66 margin-top: 0px; 67 } 68 69 .features-box_return { 70 flex-direction: row; 71 } 72 73 .features-box_thumb { 74 margin-top: 0; 75 width: calc((100% - 10px)/2); 76 } 77 78 .features-box_sub { 79 margin-top: 45px; 80 } 81 82 .features-box_sub2 { 83 margin-top: 40px; 84 } 85 86 .features-box_sub3 { 87 margin-top: 30px; 88 } 89} 90 91@include medium { 92 93 94 .no-blank { 95 display: block; 96 } 97 98 .features-box_thumb { 99 height: auto; 100 } 101} 102 103@include large { 104 .features-box { 105 justify-content: space-around; 106 } 107 108 .features-box_body { 109 width: 502px; 110 } 111 112 .features-box_thumb { 113 width: 380px; 114 height: auto; 115 } 116}

HTML

1<!DOCTYPE html> 2<html lang="en"> 3 4<head> 5 <meta charset="UTF-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 9 <title>ユアコーディング</title> 10 ediate/css/common.css"> 11</head> 12 13<body> 14 15 16 <section class="features element" id="features"> 17 <div class="section-inner"> 18 19 20 <h3 class="features-ttl element">高速コーディング</h3><!-- /.features-ttl --> 21 <div class="features-box element"> 22 <div class="features-box_body"> 23 <h4 class="features-box_main">コーディングに特化したフリーランスのため、<br class="no-blank"> スピード感を持った開発が可能。 24 </h4> 25 <!-- /.features-box_main --> 26 <p class="features-box_sub">開発は常にスピードとの勝負です。<br class="no-blank"> 27 ユアコーディングはコーディングに特化しているため、<br class="no-blank"> 28 素早く納品することで、クライアントがデザインに注力<br class="no-blank"> 29 する助けとなります。</p><!-- /.features-box_sub --> 30 </div><!-- /.features-box_body --> 31 <div class="features-box_thumb"> 32 <figure><img src="img/cto.png" alt=""></figure> 33 </div><!-- /.features-box_thumb --> 34 </div><!-- /.features-box --> 35 36 <h3 class="features-ttl element">高品質</h3><!-- /.features-ttl --> 37 <div class="features-box features-box_return element"> 38 39 <div class="features-box_body"> 40 <h4 class="features-box_main">正しいマークアップで、 <br class="no-blank"> 41 内部SEOに強いコーディングを <br class="no-blank"> デフォルトで行います。</h4> 42 <!-- /.features-box_main --> 43 <p class="features-box_sub features-box_sub2">ユアコーディングでは、「予測しやすい」「再利用しやすい」<br 44 class="no-blank"> 45 「保守しやすい」「拡張しやすい」と言った設計をもとに<br class="no-blank"> 46 きちんとコーディングを行うため、納品後も安心です。</p><!-- /.features-box_sub --> 47 </div><!-- /.features-box_body --> 48 <div class="features-box_thumb"> 49 <figure><img src="img/building_website.png" alt=""></figure> 50 </div><!-- /.features-box_thumb --> 51 </div><!-- /.features-box --> 52 53 <h3 class="features-ttl element">迅速なレスポンス</h3><!-- /.features-ttl --> 54 <div class="features-box features-box_3 element"> 55 <div class="features-box_body"> 56 <h4 class="features-box_main">原則いただいたメッセージは、<br class="no-blank"> 業務時間内であれば6時間以内に<br 57 class="no-blank"> お返しいたします。</h4> 58 <!-- /.features-box_main --> 59 <p class="features-box_sub features-box_sub3">連絡を返さないフリーランスが多い中、 <br class="no-blank"> 60 ユアコーディングでは定期的な進捗報告など、<br class="no-blank"> 社会人としての基本を踏まえて仕事を行なって<br class="no-blank"> 61 おります。 62 </p><!-- /.features-box_sub --> 63 </div><!-- /.features-box_body --> 64 <div class="features-box_thumb"> 65 <figure><img src="img/new_message.png" alt=""></figure> 66 </div><!-- /.features-box_thumb --> 67 </div><!-- /.features-box --> 68 69 </div><!-- /.section-inner --> 70 </section><!-- /.features --> 71</body> 72 73</html>

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

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

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

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

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

yambejp

2023/04/21 02:30

冗長な質問になっているのでもっとHTML構成も絞った方がよいでしょう CSSもおそらくSCSSですよね? 命題については:last-of-typeを曲解しているだけだと思います
spn

2023/04/21 03:08 編集

コメントありがとうございます。 ご指摘の内容を変更させていただきました。 理解力が足らず申し訳ないのですが、:last-of-typeを曲解しているとはどういう意味でしょうか。 詳しくお聞きしてもよろしいでしょうか。
yambejp

2023/04/21 03:20 編集

回答欄にサンプルをつけておきました :last-of-typeの認識は間違っていませんでしたか?
guest

回答1

0

ベストアンサー

.features-box:last-of-type

これは「features-box」クラスの最後の要素ではありません
最後の要素のなかで「features-box」クラスがついているものです。

CSS

1<style> 2.fuga:last-of-type{ 3 background-Color:red; 4} 5</style> 6<div class="hoge"> 7<div class="fuga">1</div> 8<div class="fuga">2</div> 9<div class="fuga">3</div> 10<div class="fuga">4</div> 11<div class="fuga">5</div> <!-- これがマッチ --> 12</div> 13<hr> 14<div class="hoge"> 15<div class="fuga">1</div> 16<div class="fuga">2</div> 17<div class="fuga">3</div> 18<div class="fuga">4</div> <!-- fugaの最後だがdivの最後ではないのでマッチしない --> 19<div>5</div> <!-- 最後のdivがfugaではないのでマッチしない --> 20</div> 21<hr> 22<div class="hoge"> 23<div class="fuga">1</div> 24<div class="fuga">2</div> 25<div class="fuga">3</div> 26<div class="fuga">4</div> <!-- 最後のdivでfugaなのでマッチ --> 27<span>5</span> 28</div> 29<hr> 30<div class="hoge"> 31<div class="fuga">1</div> 32<span class="fuga">2</span> 33<div class="fuga">3</div> 34<span class="fuga">4</span> <!-- 最後のspanでfugaなのでマッチ --> 35<div class="fuga">5</div> <!-- 最後のdivでfugaなのでマッチ --> 36</div> 37

追記

CSS

1<style> 2h3{ 3 background-Color:lime; 4} 5.section-inner,.dummy{ 6 background-Color:gray; 7 height:fit-content; 8} 9.features-box{ 10background-Color:yellow; 11} 12.features-box:not(:last-of-type ) { 13margin-bottom: 85px; 14} 15.features-box:last-of-type{ 16margin-bottom: 135px; 17} 18</style> 19<div class="section-inner"> 20<h3 class="features-ttl element">高速コーディング</h3> 21<div class="features-box element">test1</div> 22<h3 class="features-ttl element">高品質</h3> 23<div class="features-box features-box_return element">test2</div> 24<h3 class="features-ttl element">迅速なレスポンス</h3> 25<div class="features-box features-box_3 element">test3</div> 26</div> 27<div class="dummny">dummy</div>

投稿2023/04/21 03:13

編集2023/04/21 09:02
yambejp

総合スコア115241

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

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

spn

2023/04/21 08:39

ご丁寧でわかりやすい説明ありがとうございます。 私の理解力が足らず申し訳ないのですが、質問させてください。 <div class="section-inner"> <h3> <div class="features-box"></div> <h3> <div class="features-box"></div> <h3> <div class="features-box"></div> </div> HTMLを簡略して書く上記のようになっていると思うのですが、 3番目のfeatures-boxは:last-of-typeではないのですか。 section-innerの最後のdivだと思うのですがどう間違っているのか理解ができていません。。。
yambejp

2023/04/21 09:03

失礼しました。その構造であれば問題ないです。 ただし:last-of-typeのmargin-bottomは85pxではなく135pxにしかなりませんね
spn

2023/04/21 11:00

ありがとうございます。 クラス名をつけるしかないでしょうか。
yambejp

2023/04/21 11:02

> クラス名をつけるしかないでしょうか。 いや、135pxになっていますよ
spn

2023/04/23 05:24

ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.44%

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

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

質問する

関連した質問