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