teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

5

修正

2017/06/29 10:36

投稿

miramikan
miramikan

スコア26

title CHANGED
File without changes
body CHANGED
@@ -39,141 +39,86 @@
39
39
 
40
40
  ```CSS
41
41
 
42
- body{
42
+ .main{
43
- width: 100%;
43
+ width: 100%;
44
+ height: 1000px;
45
+ padding: 100px 0px;
44
- margin: 0px;
46
+ margin: 0px;
45
- padding: 0px;
46
- }
47
+ }
47
-
48
-
49
- main{
50
- width: 100%;
51
- height: 1000px;
52
- padding: 100px 0px;
53
- margin: 0px;
54
48
 
55
- }
56
49
 
57
- img {
58
- max-width: 100%;
59
- height: auto;
60
- }
61
- body{
62
- max-width: 100%;
63
- height: auto;
64
- }
65
50
 
66
- .photo-title{
51
+ .photo-title{
67
- font-size:25px;
52
+ font-size:25px;
68
- margin-left:150px;
53
+ margin-left:150px;
69
- border-bottom:3px solid #23c1ea;
54
+ border-bottom:3px solid #23c1ea;
70
- width:375px;
55
+ width:375px;
71
- max-width: 100%;
56
+ max-width: 100%;
72
- height: auto;
57
+ height: auto;
73
- }
58
+ }
74
59
 
75
- .whole-photo{
60
+ .whole-photo{
76
- margin-left:70px;
61
+ margin-left:70px;
77
- margin-top: 50px;
62
+ margin-top: 50px;
78
- position:relative;
63
+ position:relative;
79
- }
64
+ }
80
65
 
81
66
 
82
- .photoframe {
67
+ .photoframe {
83
- position: relative;
68
+ position: relative;
84
- display: inline;
69
+ display: inline;
85
- float: left;
70
+ float: left;
86
- width: 340px;
71
+ width: 470px;
87
- height: 430px;
72
+ height: 430px;
88
- overflow: hidden;
73
+ overflow: hidden;
89
- margin: 0 10px 20px;
74
+ margin: 0 10px 20px;
90
- margin-left:80px;
75
+ margin-left:80px;
91
- padding: 15px;
76
+ padding: 15px;
92
- background: #ffffff;
77
+ background: #ffffff;
93
- border: 1px solid rgba(0, 0, 0, 0.3);
78
+ border: 1px solid rgba(0, 0, 0, 0.3);
94
- text-align: center;
79
+ text-align: center;
95
- -webkit-border-radius: 2px;
80
+ -webkit-border-radius: 2px;
96
- -moz-border-radius: 2px;
81
+ -moz-border-radius: 2px;
97
- border-radius: 2px;
82
+ border-radius: 2px;
98
- -moz-box-shadow: 0px 2px 4px rgba(0,0,0,0.5);
83
+ -moz-box-shadow: 0px 2px 4px rgba(0,0,0,0.5);
99
- -webkit-box-shadow: 0px 2px 4px rgba(0,0,0,0.5);
84
+ -webkit-box-shadow: 0px 2px 4px rgba(0,0,0,0.5);
100
- box-shadow: 0px 2px 4px rgba(0,0,0,0.5);
85
+ box-shadow: 0px 2px 4px rgba(0,0,0,0.5);
101
- z-index: 1;
86
+ z-index: 1;
102
- }
87
+ }
103
88
 
104
- .photoframe .photo {
89
+ .photoframe .photo {
105
- width: 340px;
90
+ width: 470px;
106
- height: 385px;
91
+ height: 313px;
107
- overflow: hidden;
92
+ overflow: hidden;
108
- margin: 0 0 10px;
93
+ margin: 0 0 10px;
109
- padding: 0;
94
+ padding: 0;
110
- -moz-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.2);
95
+ -moz-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.2);
111
- -webkit-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.2);
96
+ -webkit-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.2);
112
- box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.2);
97
+ box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.2);ss
113
- }
98
+ }
114
99
 
115
- .photoframe img {
100
+ .photoframe img {
116
- position: relative;
101
+ position: relative;
117
- display: block;
102
+ display: block;
118
- margin: 0;
103
+ margin: 0;
119
- padding: 0;
104
+ padding: 0;
120
- z-index: -1;
105
+ z-index: -1;
121
- width:500px;
106
+ width:470px;
122
- height:359px;
107
+ height:313px;
123
- }
124
108
 
109
+ }
125
110
 
126
- .tape{
111
+
127
- position:relative;
128
- bottom:30px;
129
- left:30px;
130
- }
131
112
 
132
113
 
133
- .note{
134
- width:390px;
135
- height:460px;
136
- float:right;
137
- margin-right:160px;
138
- position: relative;
139
- background-color: #ffffe7;
140
- background-image:
141
- linear-gradient(rgba(241,207,164,0.5) .1em, transparent .1em);
142
- background-size: 100% 1.5em;
143
- line-height:1.5em;
144
- max-width: 100%;
145
114
 
115
+ .box:after {
116
+ content: ' ';
117
+ clear: both;
118
+ display: block;
146
- }
119
+ }
147
- #note{
148
- -moz-transform: rotate(-4deg);
149
- -webkit-transform: rotate(-4deg);
150
- }
151
120
 
152
- .in{
121
+
153
- padding-bottom: 20px;
154
- font-size: 28px;
155
- margin-top: 5px;
156
122
 
157
- }
158
123
 
159
-
160
- .letters{
161
- padding-top:10px;
162
- padding-left:20px;
163
- padding-right:20px;
164
- font-size:28px;
165
- line-height:130%;
166
- }
167
-
168
-
169
- .box:after {
170
- content: ' ';
171
- clear: both;
172
- display: block;
173
- }
174
-
175
-
176
-
177
-
178
-
179
124
  ```

4

間違え

2017/06/29 10:36

投稿

miramikan
miramikan

スコア26

title CHANGED
File without changes
body CHANGED
@@ -6,7 +6,7 @@
6
6
 
7
7
 
8
8
  ```HTML
9
- <div class="main">
9
+
10
10
  <p class="photo-title">####</p>
11
11
 
12
12
 

3

修正

2017/06/29 10:21

投稿

miramikan
miramikan

スコア26

title CHANGED
File without changes
body CHANGED
@@ -7,7 +7,7 @@
7
7
 
8
8
  ```HTML
9
9
  <div class="main">
10
- <p class="photo-title">####<p>
10
+ <p class="photo-title">####</p>
11
11
 
12
12
 
13
13
  <div class="whole-photo">

2

間違え

2017/06/29 10:16

投稿

miramikan
miramikan

スコア26

title CHANGED
File without changes
body CHANGED
@@ -173,7 +173,7 @@
173
173
  }
174
174
 
175
175
 
176
- }
177
176
 
178
177
 
178
+
179
179
  ```

1

間違え

2017/06/29 10:15

投稿

miramikan
miramikan

スコア26

title CHANGED
File without changes
body CHANGED
@@ -1,5 +1,5 @@
1
1
  pic.jpgのwidthをもう少し広い幅に変えたいのですが、
2
- htmlの方に直接<img src="pic.png" width="##" height="##">と書いても、cssの
2
+ htmlの方に直接<img src="pic.jpg" width="##" height="##">と書いても、cssの
3
3
  .photoframe img に記載しても幅が変わりません。
4
4
  もともと、photoframeをつけているのが原因でしょうか?
5
5
  どうしたら、フレームをつけたまま、中の写真の幅が変えられるのか、お分かりになる方に教えていただきたいです。よろしくお願い致します。
@@ -43,6 +43,7 @@
43
43
  width: 100%;
44
44
  margin: 0px;
45
45
  padding: 0px;
46
+ }
46
47
 
47
48
 
48
49
  main{