teratail
回答率
85.36%
teratail header banner
teratail header banner
質問するログイン新規登録
トップCに関する質問CSS疑似要素のレスポンシブ対応のやり方

編集履歴

回答編集履歴

2

コード修正

2020/12/27 07:25

投稿

hatena19
hatena19

スコア34073

test CHANGED
@@ -1,4 +1,4 @@
1
- まず、H4内のタイトルをdivタグで囲みます。
1
+ まず、H4内のタイトルをspanタグで囲みます。
2
2
 
3
3
 
4
4
 
@@ -8,13 +8,13 @@
8
8
 
9
9
  <h4 class="pplIntro__heading">
10
10
 
11
- <div>
11
+ <span>
12
12
 
13
13
  タイトルタイトルタイトルタ<br class="Sp-only"> タイトルタ
14
14
 
15
15
  <span>タイ</span>
16
16
 
17
- </div>
17
+ </span>
18
18
 
19
19
  </h4><!-- /.pplIntro__heading -->
20
20
 
@@ -36,7 +36,7 @@
36
36
 
37
37
 
38
38
 
39
- H4内の.div に`flex-shrink: 0;`を設定して縮小しないようにします。
39
+ H4の子要素.span に`flex-shrink: 0;`を設定して縮小しないようにします。
40
40
 
41
41
  幅は設定せずに(=width: auto) 、本来の幅にします。
42
42
 
@@ -84,7 +84,7 @@
84
84
 
85
85
  }
86
86
 
87
- .pplIntro__heading > div {
87
+ .pplIntro__heading > span {
88
88
 
89
89
  flex-shrink: 0;
90
90
 
@@ -110,7 +110,7 @@
110
110
 
111
111
  }
112
112
 
113
- .pplIntro__heading span {
113
+ .pplIntro__heading > span > span {
114
114
 
115
115
  flex-shrink: 0;
116
116
 

1

コード修正

2020/12/27 07:24

投稿

hatena19
hatena19

スコア34073

test CHANGED
@@ -12,9 +12,9 @@
12
12
 
13
13
  タイトルタイトルタイトルタ<br class="Sp-only"> タイトルタ
14
14
 
15
+ <span>タイ</span>
16
+
15
17
  </div>
16
-
17
- <span>タイ</span>
18
18
 
19
19
  </h4><!-- /.pplIntro__heading -->
20
20
 
@@ -36,9 +36,11 @@
36
36
 
37
37
 
38
38
 
39
- H4内の.divと.spanに`flex-shrink: 0;`を設定して縮小しないようにします。
39
+ H4内の.div に`flex-shrink: 0;`を設定して縮小しないようにします。
40
40
 
41
41
  幅は設定せずに(=width: auto) 、本来の幅にします。
42
+
43
+
42
44
 
43
45
  あとは、細かい調整をして下記のようなCSSでどうでしょうか。
44
46
 
@@ -104,11 +106,7 @@
104
106
 
105
107
  height: 2px;
106
108
 
107
- flex-shrink: 1;
108
-
109
- flex-basis: 100%;
109
+ width: 100%;
110
-
111
-
112
110
 
113
111
  }
114
112