回答編集履歴
1
追記
test
CHANGED
|
@@ -48,6 +48,39 @@
|
|
|
48
48
|
|
|
49
49
|
---
|
|
50
50
|
蛇足かもしれませんが、
|
|
51
|
-
背景画像の上にテキストを載せたいのなら、背景画像は、css background-image で設定して、テキストは
|
|
51
|
+
背景画像の上にテキストを載せたいのなら、背景画像は、css background-image で設定して、テキストはflexで位置決めするのが自然だと思いますし、レスポンシブ対応なども楽になると思いますよ。
|
|
52
|
+
|
|
53
|
+
```html
|
|
54
|
+
<div class="design">
|
|
55
|
+
<h1 class="design__en">大要素</h1>
|
|
56
|
+
<p class="design__ja">小要素</p>
|
|
57
|
+
</div>
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
```scss
|
|
61
|
+
.design {
|
|
62
|
+
position: relative;
|
|
63
|
+
height: 400px;
|
|
64
|
+
background: url(/images/hoge.jpg) center/cover;
|
|
65
|
+
display: flex;
|
|
66
|
+
flex-direction: column;
|
|
67
|
+
justify-content: center;
|
|
68
|
+
padding-left: 25%;
|
|
69
|
+
& > * {
|
|
70
|
+
font-weight: bold;
|
|
71
|
+
letter-spacing: 0.05em;
|
|
72
|
+
color: #fff;
|
|
73
|
+
margin: 0;
|
|
74
|
+
}
|
|
75
|
+
&__en {
|
|
76
|
+
font-family: "Noto Sans CJK JP";
|
|
77
|
+
font-size: 80px;
|
|
78
|
+
}
|
|
79
|
+
&__ja {
|
|
80
|
+
font-family: "Yu Gothic";
|
|
81
|
+
font-size: 35px;
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
```
|
|
52
85
|
|
|
53
86
|
|