質問編集履歴

1

添付画像修正、HTML、CSSを追記

2021/06/27 20:44

投稿

mariposa
mariposa

スコア4

test CHANGED
File without changes
test CHANGED
@@ -22,7 +22,7 @@
22
22
 
23
23
 
24
24
 
25
- ![![イメージ説明](17405a2b146eef6a133ced7efca371cc.jpeg)説明](1e1145042f58594dc0d39af98f4bacd4.jpeg)](85cf0b5d5c45185becb704b0bf8b51c4.jpeg)
25
+ ![![イメージ説明](17405a2b146eef6a133ced7efca371cc.jpeg)
26
26
 
27
27
 
28
28
 
@@ -34,35 +34,55 @@
34
34
 
35
35
  ```html
36
36
 
37
- <div class="flex_inner">
37
+ <div class="content" id="detail">
38
38
 
39
- <h3>タイトルタイトルタイトル</h3>
39
+ <div class="content_inner">
40
40
 
41
- <dl>
41
+ <h3>DETAIL</h3>
42
42
 
43
- <dt>著者 </dt>
43
+ <div class="flex">
44
44
 
45
- <dd>タイトルタイトルタイトル</dd>
45
+ <div class="flex_inner">
46
46
 
47
- <dt>出版年</dt>
47
+ <img src="img/book.jpg" id ="detail_img" alt="title book image">
48
48
 
49
- <dd>タイトルタイトルタイトル</dd>
49
+ </div>
50
50
 
51
- <dt>発行年</dt>
51
+ <div class="flex_inner">
52
52
 
53
- <dd>タイトルタイトルタイトル</dd>
53
+ <h3>タイトルタイトルタイトル</h3>
54
54
 
55
- </dl>
55
+ <dl>
56
56
 
57
- <p>テキストテキストテキストテキスト
57
+ <dt>著者 </dt>
58
58
 
59
- テキステキステキステキスト
59
+ <dd>タイルタイルタイル</dd>
60
60
 
61
- テキストテキストテキストテキスト
61
+ <dt>出版年</dt>
62
62
 
63
- </p>
63
+ <dd>タイトルタイトルタイトル</dd>
64
64
 
65
+ <dt>発行年</dt>
66
+
67
+ <dd>タイトルタイトルタイトル</dd>
68
+
69
+ </dl>
70
+
71
+ <p>テキストテキストテキストテキスト
72
+
73
+ テキストテキストテキストテキスト
74
+
75
+ テキストテキストテキストテキスト
76
+
77
+ </p>
78
+
65
- <p><a href="#">オンラインストアで見る</a></p>
79
+ <p><a href="#">オンラインストアで見る</a></p>
80
+
81
+ </div>
82
+
83
+ </div>
84
+
85
+ </div>
66
86
 
67
87
  </div>
68
88
 
@@ -71,6 +91,42 @@
71
91
  ```
72
92
 
73
93
  ```css
94
+
95
+ .content{
96
+
97
+ max-width: 1000px;
98
+
99
+ margin: 10px auto 30px auto;
100
+
101
+ }
102
+
103
+
104
+
105
+ .content_inner{
106
+
107
+ padding: 30px 180px 30px 180px;
108
+
109
+ }
110
+
111
+
112
+
113
+ .flex{
114
+
115
+ display: flex;
116
+
117
+ }
118
+
119
+
120
+
121
+ #detail_img{
122
+
123
+ width: 270px;
124
+
125
+ margin-right: 60px;
126
+
127
+ }
128
+
129
+
74
130
 
75
131
  dl{
76
132
 
@@ -98,13 +154,15 @@
98
154
 
99
155
 
100
156
 
101
- dd{
157
+ /*dd{*/
102
158
 
103
- width: 75%;
159
+ /* width: 75%;*/
104
160
 
105
- margin: 0 0;
161
+ /* margin: 0 0;*/
106
162
 
163
+
164
+
107
- }
165
+ /*}*/
108
166
 
109
167
 
110
168