回答編集履歴
4
修正
test
CHANGED
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
|
|
47
47
|
|
|
48
48
|
|
|
49
|
-
あらゆるCSSフレームワークは、CSSの上書きによってフレームワークを使っていないときと同じように見た目を実装でき
|
|
49
|
+
あらゆるCSSフレームワークは、CSSの上書きによってフレームワークを使っていないときと同じように見た目を実装できます。なので不可能ではないです (面倒になることはよくありますが)。
|
|
50
50
|
|
|
51
51
|
|
|
52
52
|
|
3
修正
test
CHANGED
|
@@ -42,6 +42,28 @@
|
|
|
42
42
|
|
|
43
43
|
---
|
|
44
44
|
|
|
45
|
+
> このようなデザインをBootstrapで再現するのは不可能なのでしょうか？
|
|
46
|
+
|
|
47
|
+
|
|
48
|
+
|
|
49
|
+
あらゆるCSSフレームワークは、CSSの上書きによってフレームワークを使っていないときと同じように見た目を実装できるので不可能ではないです (面倒になることはよくありますが)。
|
|
50
|
+
|
|
51
|
+
|
|
52
|
+
|
|
53
|
+
CSSセレクタの詳細度をフレームワークよりも上げてみたり、
|
|
54
|
+
|
|
55
|
+
フレームワーク側のCSSを確認して「!important」があれば上書きする側でも追加する、
|
|
56
|
+
|
|
57
|
+
などすれば実現できます。
|
|
58
|
+
|
|
59
|
+
|
|
60
|
+
|
|
61
|
+
---
|
|
62
|
+
|
|
63
|
+
> また、データ属性とはどのような時に使うものなのでしょうか？
|
|
64
|
+
|
|
65
|
+
|
|
66
|
+
|
|
45
67
|
「data-xxxx」というような属性は、ソースコードを書く人が好きなように指定して、好きなようにCSSやJavaScriptで使う、という用途で使われます。
|
|
46
68
|
|
|
47
69
|
|
2
修正しました。
test
CHANGED
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
---
|
|
2
|
-
|
|
3
1
|
親要素の正方形で、子要素の画像 (長方形) をトリミングしたいのなら、
|
|
4
2
|
|
|
5
3
|
「object-fit」というプロパティが使えそうです。
|
|
@@ -10,7 +8,7 @@
|
|
|
10
8
|
|
|
11
9
|
```CSS
|
|
12
10
|
|
|
13
|
-
/* CSSセレクタいまいちで
|
|
11
|
+
/* CSSセレクタいまいちなので、適宜設定してください */
|
|
14
12
|
|
|
15
13
|
.col-2.p-4 {
|
|
16
14
|
|
|
@@ -20,9 +18,7 @@
|
|
|
20
18
|
|
|
21
19
|
}
|
|
22
20
|
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
/*
|
|
21
|
+
/* 画像に「object-fit: cover;」を指定 */
|
|
26
22
|
|
|
27
23
|
.col-2.p-4 img {
|
|
28
24
|
|
|
@@ -31,6 +27,10 @@
|
|
|
31
27
|
}
|
|
32
28
|
|
|
33
29
|
```
|
|
30
|
+
|
|
31
|
+
もしかしたら、画像サイズが小さいと中央に小さく表示されるかもしれませんので、
|
|
32
|
+
|
|
33
|
+
まずは大きめの画像で試してください。
|
|
34
34
|
|
|
35
35
|
|
|
36
36
|
|
1
修正
test
CHANGED
|
@@ -10,9 +10,21 @@
|
|
|
10
10
|
|
|
11
11
|
```CSS
|
|
12
12
|
|
|
13
|
+
/* CSSセレクタいまいちですが.. */
|
|
14
|
+
|
|
15
|
+
.col-2.p-4 {
|
|
16
|
+
|
|
17
|
+
background: #f00;
|
|
18
|
+
|
|
19
|
+
padding: 0 !important;
|
|
20
|
+
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
|
|
13
25
|
/* セレクタは、適宜設定してください。 */
|
|
14
26
|
|
|
15
|
-
img {
|
|
27
|
+
.col-2.p-4 img {
|
|
16
28
|
|
|
17
29
|
object-fit: cover;
|
|
18
30
|
|