回答編集履歴
2
1回目の編集はマージンじゃなくheightをcalcでした。2回目削ります。
test
CHANGED
|
@@ -1,8 +1,26 @@
|
|
|
1
|
-
|
|
1
|
+
追記 回答の上下を入れ替えました
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
|
|
5
|
+
おそらくdisplay:flex;してますよね？
|
|
6
|
+
|
|
7
|
+
portada-1に当てるheightを`height: calc(120px + 2vw);`とかにすれば、
|
|
8
|
+
|
|
9
|
+
2vwの部分が変化するので幅を狭くすれば高さが小さくなりますよ。
|
|
10
|
+
|
|
11
|
+
※100vwが大体画面の横幅と同じです（語弊があります）。数字はお好みで調整してください。
|
|
12
|
+
|
|
13
|
+
※レスポンシブというかリキッドデザインのような気もしますが。
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
---
|
|
18
|
+
|
|
19
|
+
以下蛇足です。
|
|
20
|
+
|
|
21
|
+
お望みの方法と異なるかもしれませんが、
|
|
22
|
+
|
|
5
|
-
portada-1、2をflexで横並びにするのをやめて、
|
|
23
|
+
portada-1、2をflexで横並びにするのをやめて、
|
|
6
24
|
|
|
7
25
|
portada-1にfloat:left;を当てて、
|
|
8
26
|
|
|
@@ -14,14 +32,4 @@
|
|
|
14
32
|
|
|
15
33
|
という感じの実装はいかがでしょうか？
|
|
16
34
|
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
以下蛇足です。
|
|
20
|
-
|
|
21
|
-
|
|
35
|
+
※注意点はテキストが回り込んでしまうことです。
|
|
22
|
-
|
|
23
|
-
portada-1に当てるheightを`height: calc(120px + 2vw);`とかにすれば、
|
|
24
|
-
|
|
25
|
-
2vwの部分が変化するので幅を狭くすれば高さが小さくなりますよ。
|
|
26
|
-
|
|
27
|
-
※100vwが大体画面の横幅と同じです（語弊があります）。数字はお好みで調整してください。
|
1
マージンについての補足
test
CHANGED
|
@@ -13,3 +13,15 @@
|
|
|
13
13
|
|
|
14
14
|
|
|
15
15
|
という感じの実装はいかがでしょうか？
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
以下蛇足です。
|
|
20
|
+
|
|
21
|
+
どうしてもdisplay:flex;のままにするのであれば、
|
|
22
|
+
|
|
23
|
+
portada-1に当てるheightを`height: calc(120px + 2vw);`とかにすれば、
|
|
24
|
+
|
|
25
|
+
2vwの部分が変化するので幅を狭くすれば高さが小さくなりますよ。
|
|
26
|
+
|
|
27
|
+
※100vwが大体画面の横幅と同じです（語弊があります）。数字はお好みで調整してください。
|