teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問htmlでの画像の配置について

編集履歴

質問編集履歴

4

画像の高さ指定について

2017/06/08 01:48

投稿

nantarutia
nantarutia

スコア21

test CHANGED
File without changes
test CHANGED
@@ -4,7 +4,7 @@
4
4
 
5
5
  ```css
6
6
 
7
- img.fr {
7
+ img.frl {
8
8
 
9
9
  float: right;
10
10
 
@@ -127,3 +127,7 @@
127
127
 
128
128
 
129
129
  イメージ画像通りの画像配置にするにはどうしたらよいのでしょう。。。？
130
+
131
+ ※width、heightを指定しているのは元の画像が多き過ぎて
132
+
133
+ 小さくするために使っています。

3

コードを更に編集しました、如何でしょうか。。。？

2017/06/08 01:48

投稿

nantarutia
nantarutia

スコア21

test CHANGED
File without changes
test CHANGED
@@ -24,21 +24,77 @@
24
24
 
25
25
  ```html
26
26
 
27
+
28
+
27
- 【html部分】
29
+ ・テキストテキストテキスト
30
+
31
+ テキストテキストテキストテキストテキストテキストテキストテキストテキスト
32
+
33
+ テキストテキストテキストテキストテキストテキストテキストテキストテキスト
34
+
35
+
36
+
37
+
28
38
 
29
39
  <img src="img1/new1.jpg" alt="" class="frl">
30
40
 
31
- <img src="img1/new1.jpg" alt="" class="frl">
41
+ <img src="img1/new2.jpg" alt=""class="frl">
32
42
 
33
- <img src="img1/new1.jpg" alt="" class="frl">
43
+ <img src="img1/new3.jpg" alt=""class="frl">
34
44
 
35
45
 
36
46
 
37
- <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
38
47
 
39
- テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
40
48
 
49
+ テキストテキスト
50
+
51
+ テキストテキストテキストテキストテキスト
52
+
53
+ テキストテキストテキスト
54
+
55
+ テキストテキストテキストテキストテキストテキストテキストテキスト
56
+
57
+
58
+
41
- </p>
59
+ テキストテキストテキストテキスト
60
+
61
+ テキストテキストテキストテキストテキストテキストテキストテキストテキスト
62
+
63
+
64
+
65
+ <img src="img1/new4.jpeg" alt=""class="frl">
66
+
67
+
68
+
69
+ ・テキストテキストテキスト
70
+
71
+ テキストテキストテキストテキストテキストテキストテキストテキストテキスト
72
+
73
+ テキストテキストテキスト
74
+
75
+
76
+
77
+
78
+
79
+ テキスト
80
+
81
+ テキストテキスト
82
+
83
+
84
+
85
+ テキストテキストテキストテキストテキストテキスト
86
+
87
+ テキストテキストテキストテキスト
88
+
89
+ テキストテキストテキストテキストテキストテキストテキスト
90
+
91
+
92
+
93
+ <img src="img1/new5.jpg" alt=""class="frl">
94
+
95
+ <img src="img1/new6.jpg" alt=""class="frl">
96
+
97
+ <img src="img1/new7.jpg" alt=""class="frl">
42
98
 
43
99
 
44
100
 

2

Code部分修正

2017/06/07 13:26

投稿

nantarutia
nantarutia

スコア21

test CHANGED
File without changes
test CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
 
4
4
 
5
- 【css部分】
5
+ ```css
6
6
 
7
7
  img.fr {
8
8
 
@@ -18,7 +18,11 @@
18
18
 
19
19
  }
20
20
 
21
+ ```
21
22
 
23
+
24
+
25
+ ```html
22
26
 
23
27
  【html部分】
24
28
 
@@ -37,6 +41,8 @@
37
41
  </p>
38
42
 
39
43
 
44
+
45
+ ```
40
46
 
41
47
 
42
48
 

1

コードを書いてみました。

2017/06/07 13:16

投稿

nantarutia
nantarutia

スコア21

test CHANGED
File without changes
test CHANGED
@@ -1,20 +1,46 @@
1
- すごく初歩的なことなのですが、htmlで画像を以下のように並べたとして、
1
+ 現在このような書き方をしていまして、
2
2
 
3
3
 
4
4
 
5
- <img src="new1.jpg" alt="">
5
+ 【css部分】
6
6
 
7
- <img src="new2.jpg" alt="">
7
+ img.fr {
8
8
 
9
+ float: right;
10
+
11
+ margin-left: 10px;
12
+
9
- <img src="new3.jpg" alt="">
13
+ margin-bottom: 10px;
14
+
15
+ width:360px;
16
+
17
+ height:470px;
18
+
19
+ }
10
20
 
11
21
 
12
22
 
13
- <p>
23
+ 【html部分】
14
24
 
25
+ <img src="img1/new1.jpg" alt="" class="frl">
26
+
27
+ <img src="img1/new1.jpg" alt="" class="frl">
28
+
29
+ <img src="img1/new1.jpg" alt="" class="frl">
30
+
31
+
32
+
33
+ <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
34
+
15
- テキストテキストテキストテキストテキストテキストテキストテキストテキスト
35
+ テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
16
36
 
17
37
  </p>
38
+
39
+
40
+
41
+
42
+
43
+
18
44
 
19
45
 
20
46
 
@@ -22,4 +48,20 @@
22
48
 
23
49
 
24
50
 
51
+ 現状の状態が、以下のような表示になっていてまして、
52
+
53
+
54
+
55
+ ![イメージ説明](b731990f1b9bf9ed9136212a7472d601.png)
56
+
57
+
58
+
59
+ これを、以下の画像のイメージのようにしたいのです。
60
+
61
+
62
+
25
63
  ![![イメージ説明](a72a5198f9ee1252c760eee17c5464dd.png)](e2febb218058e20509f5f550aed4c6a0.png)
64
+
65
+
66
+
67
+ イメージ画像通りの画像配置にするにはどうしたらよいのでしょう。。。？