質問編集履歴
1
HTMLを短くし、CSSからSCSSに変更しました。
test
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
ブロックとブロックの間
|
|
1
|
+
ブロックとブロックの間にそれぞれに大きさの違う余白を開けたい。
|
test
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
### 実現したいこと
|
|
2
2
|
|
|
3
3
|
余白を開けたいです。3つのブロックがあり、それぞれ余白の大きさが違います。
|
|
4
|
-
クラス名は追加したくないので、2つ目の.features-boxの下に85px、3つ目の.features-boxの下に135pxマージンを付けたい
|
|
4
|
+
クラス名は追加したくないので、2つ目の.features-boxの下に85px、3つ目の.features-boxの下に135pxマージンを付けたいです。
|
|
5
|
+
|
|
5
6
|
.features-box:not(:last-of-type ) {
|
|
6
7
|
margin-bottom: 85px;}
|
|
7
8
|
.features-box:last-of-type {
|
|
@@ -17,14 +18,8 @@
|
|
|
17
18
|
|
|
18
19
|
### 該当のソースコード
|
|
19
20
|
|
|
20
|
-
```CSS
|
|
21
|
+
```SCSS
|
|
21
|
-
|
|
22
|
+
|
|
22
|
-
.section-ttl {
|
|
23
|
-
&+* {
|
|
24
|
-
margin-top: 60px;
|
|
25
|
-
}
|
|
26
|
-
}
|
|
27
|
-
}
|
|
28
23
|
|
|
29
24
|
.features-ttl {
|
|
30
25
|
font-size: clamp(24px, 2.8vw, 28px);
|
|
@@ -149,14 +144,9 @@
|
|
|
149
144
|
<meta charset="UTF-8">
|
|
150
145
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
151
146
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
152
|
-
|
|
147
|
+
|
|
153
|
-
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
154
148
|
<title>ユアコーディング</title>
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
|
|
158
|
-
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
|
|
159
|
-
|
|
149
|
+
ediate/css/common.css">
|
|
160
150
|
</head>
|
|
161
151
|
|
|
162
152
|
<body>
|
|
@@ -164,11 +154,7 @@
|
|
|
164
154
|
|
|
165
155
|
<section class="features element" id="features">
|
|
166
156
|
<div class="section-inner">
|
|
167
|
-
|
|
157
|
+
|
|
168
|
-
<span class="section-ttl_main">ユアコーディング3つの特徴</span><!-- /.section-ttl_main -->
|
|
169
|
-
<span class="section-ttl_sub">Features</span>
|
|
170
|
-
<!-- /.section-ttl_sub -->
|
|
171
|
-
</h2><!-- /.section-ttl -->
|
|
172
158
|
|
|
173
159
|
<h3 class="features-ttl element">高速コーディング</h3><!-- /.features-ttl -->
|
|
174
160
|
<div class="features-box element">
|