質問編集履歴

1

コードの追加

2019/02/16 02:39

投稿

boze07
boze07

スコア13

test CHANGED
File without changes
test CHANGED
@@ -17,3 +17,109 @@
17
17
  codepenで公開したので、このように書いたほうがいいなどアドバイスをいただけると幸いです。
18
18
 
19
19
  https://codepen.io/rk2019/pen/exQzxo
20
+
21
+
22
+
23
+ ありがとうございます。
24
+
25
+ コードが書けるのですね。質問するのが初めてで知りませんでした。
26
+
27
+ 教えていただき感謝です。
28
+
29
+
30
+
31
+
32
+
33
+ ```html
34
+
35
+ <div class="body-box">
36
+
37
+ <div class="bd-cont-4c">
38
+
39
+ <div>
40
+
41
+ <img src="http://super-healthylife.com/sample/sample-image/toiawase-2-bar.png">
42
+
43
+ <p class="left-4c">abcde@abcstore.com</p>
44
+
45
+ <p class="right-4c">タイトル:ご依頼の件</p>
46
+
47
+ </div>
48
+
49
+ </div>
50
+
51
+ </div>
52
+
53
+ ```
54
+
55
+
56
+
57
+ ```css
58
+
59
+ .body-box {
60
+
61
+ max-width: 731px;
62
+
63
+ margin: 0 auto;
64
+
65
+ }
66
+
67
+
68
+
69
+ .bd-cont-4c > div {
70
+
71
+ position: relative;
72
+
73
+ margin: 0 auto;
74
+
75
+ text-align: center;
76
+
77
+ }
78
+
79
+
80
+
81
+ .bd-cont-4c > div p {
82
+
83
+ position: absolute;
84
+
85
+ font-weight: bold;
86
+
87
+ top: 50%;
88
+
89
+ left: 50%;
90
+
91
+ -ms-transform: translate(-50%,-50%);
92
+
93
+ -webkit-transform: translate(-50%,-50%);
94
+
95
+ transform: translate(-50%,-50%);
96
+
97
+ }
98
+
99
+
100
+
101
+ .bd-cont-4c .left-4c {
102
+
103
+ top:50%;
104
+
105
+ left:25%;
106
+
107
+ width:45%;
108
+
109
+ }
110
+
111
+
112
+
113
+ .bd-cont-4c .right-4c {
114
+
115
+ top:50%;
116
+
117
+ left:65%;
118
+
119
+ width:55%;
120
+
121
+ }
122
+
123
+
124
+
125
+ ```