teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問画像を画面中央に持っていき固定したい、テキストテンプレートにテキストを記入したい。

編集履歴

質問編集履歴

9

タイトル更新

2017/03/14 04:37

投稿

tomo39-.
tomo39-.

スコア27

test CHANGED
@@ -1 +1 @@
1
- 画像とテキストをページ上で固定したい
1
+ 画像を画面中央に持っていき固定したい、テキストテンプレートにテキストを記入したい。
test CHANGED
File without changes

8

コードを更新しました。

2017/03/14 04:37

投稿

tomo39-.
tomo39-.

スコア27

test CHANGED
File without changes
test CHANGED
@@ -1,6 +1,6 @@
1
- ![イメージ説明](154b25e0c6bf5a69cd292745ff148d0c.png)
1
+ 現状態になっています。
2
2
 
3
- 現在このような状態になっています。
3
+ ![はめ込むことができました。](50c0742fdb4bdce32d07efe8ab174e04.png)
4
4
 
5
5
 
6
6
 
@@ -40,11 +40,11 @@
40
40
 
41
41
  CSSソース
42
42
 
43
+
44
+
43
45
  #spdayo{
44
46
 
45
- margin-left:auto;
47
+ margin:0 auto;
46
-
47
- margin-right:auto;
48
48
 
49
49
  position: relative;
50
50
 
@@ -56,15 +56,13 @@
56
56
 
57
57
  #coolsright {
58
58
 
59
- margin-left:auto;
60
-
61
- margin-right:auto;
62
-
63
59
  position: absolute;
64
60
 
65
- top: 290px;
61
+ top: 55px;
66
62
 
67
- background:url(sp1.jpg); no-repeat top center;
63
+ left:60px;
64
+
65
+
68
66
 
69
67
  }
70
68
 
@@ -72,9 +70,9 @@
72
70
 
73
71
  #box {
74
72
 
75
- margin-left:auto;
73
+ margin-left: auto;
76
74
 
77
- margin-right:auto;
75
+ margin-right: auto;
78
76
 
79
77
  position: relative;
80
78
 
@@ -96,6 +94,8 @@
96
94
 
97
95
 
98
96
 
97
+
98
+
99
99
  ```
100
100
 
101
101
  ーーーーーーーーーーーーー
@@ -106,17 +106,17 @@
106
106
 
107
107
  <div id="spdayo">
108
108
 
109
- <a href="index.html"><img src="sp1.jpg" alt="ginzagakubuchi" width="580" height="580">
109
+ <a href="index.html"><img src="sp1.jpg" alt="ginzagakubuchi" width="585" height="585">
110
110
 
111
- </a></div>
111
+ </a>
112
-
113
-
114
112
 
115
113
  <div id="coolsright">
116
114
 
117
115
  <a href="index.html"><img src="givemecoolsright.jpg" alt="Denencho-fu,田園調布2014" width="450" height="460">
118
116
 
119
117
  </a></div>
118
+
119
+ </div>
120
120
 
121
121
 
122
122
 
@@ -125,6 +125,14 @@
125
125
  <div id="box">
126
126
 
127
127
  <img src="template1.jpg" width="150" height="50">
128
+
129
+ <!--#boxtextを入力-->
130
+
131
+ <div id="boxtext">
132
+
133
+ <p>Welcome to Tokyo Hill </p>
134
+
135
+ </div>
128
136
 
129
137
  </div>
130
138
 
@@ -140,17 +148,11 @@
140
148
 
141
149
 
142
150
 
143
- ###試したこと
144
-
145
- px移動で両方の画像の位置を理想的に合わせました。
151
+ 画像を真ん中に持っていき、固定したいです。
146
152
 
147
153
 
148
154
 
149
- background:url(sp1.jpg)で背景に画像を入れ込もうとしました。が
150
-
151
- 額が表示されなくなりました。
155
+ ###試したこと
152
-
153
-
154
156
 
155
157
  どのように書けばいいのかご教授ください。
156
158
 

7

ソースコードを変更しました。

2017/03/14 04:32

投稿

tomo39-.
tomo39-.

スコア27

test CHANGED
@@ -1 +1 @@
1
- HTMLでHOMEPAGEを作成しています
1
+ 画像とテキストをページ上で固定したい
test CHANGED
@@ -1,10 +1,14 @@
1
- ![イメージ説明](988e2584656917b642edbbef9776eb67.png)###前提・実現したいこと
1
+ ![イメージ説明](154b25e0c6bf5a69cd292745ff148d0c.png)
2
2
 
3
- HTMLでホームページを作成しています。
3
+ 現在このような状態になっています。
4
+
5
+
6
+
7
+ ###前提・実現したいこと
4
8
 
5
9
  画像をフレーム（額）で取り囲みたいです。
6
10
 
7
- Macのウィンドウの幅を広げた時に画像が一致（グループ）して一緒に動く状態にしたいです。
11
+ Macのウィンドウの幅を広げた時に画像が一致（グループ）して一緒に動く状態にしたいです。固定したいです。
8
12
 
9
13
 
10
14
 
@@ -38,7 +42,9 @@
38
42
 
39
43
  #spdayo{
40
44
 
45
+ margin-left:auto;
46
+
41
- text-align: center;
47
+ margin-right:auto;
42
48
 
43
49
  position: relative;
44
50
 
@@ -50,15 +56,15 @@
50
56
 
51
57
  #coolsright {
52
58
 
59
+ margin-left:auto;
60
+
53
- text-align: center;
61
+ margin-right:auto;
54
62
 
55
63
  position: absolute;
56
64
 
57
65
  top: 290px;
58
66
 
59
- left: 433px;
60
-
61
- background:url(sp1.jpg) no-repeat top center;
67
+ background:url(sp1.jpg); no-repeat top center;
62
68
 
63
69
  }
64
70
 

6

額縁のソースコードが抜けておりました。

2017/03/14 03:53

投稿

tomo39-.
tomo39-.

スコア27

test CHANGED
File without changes
test CHANGED
@@ -24,7 +24,9 @@
24
24
 
25
25
  ###該当のソースコード
26
26
 
27
- Coolsrightは画像、boxは額です。
27
+ Coolsrightは画像、spdayoが画像の額縁、
28
+
29
+ boxはメッセージテンプレート額です。
28
30
 
29
31
 
30
32
 
@@ -33,6 +35,18 @@
33
35
  ```CSS
34
36
 
35
37
  CSSソース
38
+
39
+ #spdayo{
40
+
41
+ text-align: center;
42
+
43
+ position: relative;
44
+
45
+ }
46
+
47
+
48
+
49
+
36
50
 
37
51
  #coolsright {
38
52
 
@@ -52,17 +66,27 @@
52
66
 
53
67
  #box {
54
68
 
69
+ margin-left:auto;
70
+
55
- text-align: center;
71
+ margin-right:auto;
56
72
 
57
73
  position: relative;
58
74
 
59
75
  top: 290px;
60
76
 
61
- left: 433px;
77
+ }
62
78
 
63
- border:1px solid#000;
64
79
 
80
+
81
+ #boxtext{
82
+
65
- box-shadow:0px 0px 10px;
83
+ position:absolute;
84
+
85
+ top:100px;
86
+
87
+ left:100px;
88
+
89
+ }
66
90
 
67
91
 
68
92
 
@@ -74,7 +98,15 @@
74
98
 
75
99
  ```HTML
76
100
 
101
+ <div id="spdayo">
102
+
103
+ <a href="index.html"><img src="sp1.jpg" alt="ginzagakubuchi" width="580" height="580">
104
+
105
+ </a></div>
106
+
107
+
108
+
77
- div id="coolsright">
109
+ <div id="coolsright">
78
110
 
79
111
  <a href="index.html"><img src="givemecoolsright.jpg" alt="Denencho-fu,田園調布2014" width="450" height="460">
80
112
 
@@ -96,61 +128,9 @@
96
128
 
97
129
 
98
130
 
99
- また、
131
+ プレート画像にテキストを入力したいです。
100
132
 
101
- プレート画像があります。
102
-
103
- そのプレート画像にテキストを入力したいです。
133
+ spdayo額縁に画像を入れたいです。
104
-
105
-
106
-
107
- ```HTML
108
-
109
- <div id="box">
110
-
111
- <img src="template1.jpg" width="150" height="50">
112
-
113
- </div>
114
-
115
- <div id="boxtext">
116
-
117
- <div>
118
-
119
- <p>Welcome to tokyo hill </p>
120
-
121
- </div>
122
-
123
- </div>
124
-
125
- ```
126
-
127
-
128
-
129
- ```CSS
130
-
131
- #box {
132
-
133
- text-align: center;
134
-
135
- position: relative;
136
-
137
- top: 290px;
138
-
139
- left: 433px;
140
-
141
- border:1px solid#000;
142
-
143
- box-shadow:0px 0px 10px;
144
-
145
- ```
146
-
147
-
148
-
149
-
150
-
151
-
152
-
153
-
154
134
 
155
135
 
156
136
 

5

統一しました。

2017/03/14 03:44

投稿

tomo39-.
tomo39-.

スコア27

test CHANGED
File without changes
test CHANGED
@@ -94,6 +94,66 @@
94
94
 
95
95
 
96
96
 
97
+
98
+
99
+ また、
100
+
101
+ プレート画像があります。
102
+
103
+ そのプレート画像にテキストを入力したいです。
104
+
105
+
106
+
107
+ ```HTML
108
+
109
+ <div id="box">
110
+
111
+ <img src="template1.jpg" width="150" height="50">
112
+
113
+ </div>
114
+
115
+ <div id="boxtext">
116
+
117
+ <div>
118
+
119
+ <p>Welcome to tokyo hill </p>
120
+
121
+ </div>
122
+
123
+ </div>
124
+
125
+ ```
126
+
127
+
128
+
129
+ ```CSS
130
+
131
+ #box {
132
+
133
+ text-align: center;
134
+
135
+ position: relative;
136
+
137
+ top: 290px;
138
+
139
+ left: 433px;
140
+
141
+ border:1px solid#000;
142
+
143
+ box-shadow:0px 0px 10px;
144
+
145
+ ```
146
+
147
+
148
+
149
+
150
+
151
+
152
+
153
+
154
+
155
+
156
+
97
157
  ###試したこと
98
158
 
99
159
  px移動で両方の画像の位置を理想的に合わせました。

4

文章修正

2017/03/14 03:11

投稿

tomo39-.
tomo39-.

スコア27

test CHANGED
File without changes
test CHANGED
@@ -4,7 +4,7 @@
4
4
 
5
5
  画像をフレーム（額）で取り囲みたいです。
6
6
 
7
- Macのウィンドウの幅を広げた時に画像が一致（グループ）して動く状態に指定です。
7
+ Macのウィンドウの幅を広げた時に画像が一致（グループ）して一緒に動く状態にしたいです。
8
8
 
9
9
 
10
10
 

3

画像を追加しました。

2017/03/14 03:10

投稿

tomo39-.
tomo39-.

スコア27

test CHANGED
File without changes
test CHANGED
@@ -1,4 +1,4 @@
1
- ###前提・実現したいこと
1
+ ![イメージ説明](988e2584656917b642edbbef9776eb67.png)###前提・実現したいこと
2
2
 
3
3
  HTMLでホームページを作成しています。
4
4
 

2

文章を変更しました。

2017/03/14 03:07

投稿

tomo39-.
tomo39-.

スコア27

test CHANGED
File without changes
test CHANGED
@@ -103,3 +103,9 @@
103
103
  background:url(sp1.jpg)で背景に画像を入れ込もうとしました。が
104
104
 
105
105
  額が表示されなくなりました。
106
+
107
+
108
+
109
+ どのように書けばいいのかご教授ください。
110
+
111
+ 何卒、よろしくお願いいたします。

1

質問文のコードを変更

2017/03/14 03:00

投稿

tomo39-.
tomo39-.

スコア27

test CHANGED
File without changes
test CHANGED
@@ -29,6 +29,8 @@
29
29
 
30
30
 
31
31
  ーーー
32
+
33
+ ```CSS
32
34
 
33
35
  CSSソース
34
36
 
@@ -64,9 +66,13 @@
64
66
 
65
67
 
66
68
 
69
+ ```
70
+
67
71
  ーーーーーーーーーーーーー
68
72
 
69
73
  HTMLソース
74
+
75
+ ```HTML
70
76
 
71
77
  div id="coolsright">
72
78
 
@@ -84,6 +90,8 @@
84
90
 
85
91
  </div>
86
92
 
93
+ ```
94
+
87
95
 
88
96
 
89
97
  ###試したこと