質問編集履歴
3
変更
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -66,6 +66,15 @@
|
|
|
66
66
|
|
|
67
67
|
```
|
|
68
68
|
|
|
69
|
+
Contentテーブルは以下のようになっており、mediaに画像のパスを代入している。画像のアップロードなどにはCarrierWaveを使用している
|
|
70
|
+
|
|
71
|
+
|Content||
|
|
72
|
+
|:--|:--:|
|
|
73
|
+
|title|string|
|
|
74
|
+
|media|string|
|
|
75
|
+
|
|
76
|
+
|
|
77
|
+
|
|
69
78
|
### 試したこと
|
|
70
79
|
|
|
71
80
|
**画像サイズを拡大縮小したりした**
|
2
読みやすさ
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -2,8 +2,12 @@
|
|
|
2
2
|
|
|
3
3
|
以下のように、カード内の画像を上部に位置させたい。
|
|
4
4
|
|
|
5
|
+
### ①bootstrap公式
|
|
6
|
+
|
|
5
7
|
|
|
6
8
|
|
|
9
|
+
|
|
10
|
+
|
|
7
11
|
ソースコードは[Bootstrap公式 カード](https://getbootstrap.jp/docs/4.2/components/card/)を参照
|
|
8
12
|
|
|
9
13
|
```
|
|
@@ -17,9 +21,26 @@
|
|
|
17
21
|
</div>
|
|
18
22
|
```
|
|
19
23
|
|
|
24
|
+
### ②個人ブログ
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
```
|
|
28
|
+
<div class="card my-3" style="width: 18rem">
|
|
29
|
+
<img src="images/img1.jpg" class="card-img-top">
|
|
30
|
+
<div class="card-body">
|
|
31
|
+
<h5 class="card-title">Card Title</h5>
|
|
32
|
+
<p>ここに写真の説明などを記載します。これは例えば作品集の一部を写真で示しておいて、下のリンクから作品集ページに飛んでもらうような仕掛けを作ることができます。</p>
|
|
33
|
+
<a class="btn btn-primary" href="#">Details</a>
|
|
34
|
+
</div>
|
|
35
|
+
</div>
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
ソースコードは[【Bootstrap】Cardの使い方4パターンを紹介](https://www.yutaliberty.com/2019/04/16/prog/1600/)を参照
|
|
39
|
+
|
|
40
|
+
|
|
20
41
|
### 発生している問題・エラーメッセージ
|
|
21
42
|
|
|
22
|
-
左横に設置されてしまう。
|
|
43
|
+
しかし、私の方で再現をすると左横に設置されてしまう。
|
|
23
44
|
|
|
24
45
|
|
|
25
46
|
|
1
変更
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
### 前提・実現したいこと
|
|
2
2
|
|
|
3
|
-
以下のように、カード内の画像を上部に位置させたい
|
|
3
|
+
以下のように、カード内の画像を上部に位置させたい。
|
|
4
4
|
|
|
5
5
|
|
|
6
6
|
|
|
7
|
+
ソースコードは[Bootstrap公式 カード](https://getbootstrap.jp/docs/4.2/components/card/)を参照
|
|
8
|
+
|
|
7
9
|
```
|
|
8
10
|
<div class="card" style="width: 18rem;">
|
|
9
11
|
<svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Image cap"><title>Placeholder</title><rect fill="#868e96" width="100%" height="100%"/><text fill="#dee2e6" dy=".3em" x="50%" y="50%">Image cap</text></svg>
|