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

質問編集履歴

4

画像の高さ指定について

2017/06/08 01:48

投稿

nantarutia
nantarutia

スコア21

title CHANGED
File without changes
body CHANGED
@@ -1,7 +1,7 @@
1
1
  現在このような書き方をしていまして、
2
2
 
3
3
  ```css
4
- img.fr {
4
+ img.frl {
5
5
  float: right;
6
6
  margin-left: 10px;
7
7
  margin-bottom: 10px;
@@ -62,4 +62,6 @@
62
62
 
63
63
  ![![イメージ説明](a72a5198f9ee1252c760eee17c5464dd.png)](e2febb218058e20509f5f550aed4c6a0.png)
64
64
 
65
- イメージ画像通りの画像配置にするにはどうしたらよいのでしょう。。。?
65
+ イメージ画像通りの画像配置にするにはどうしたらよいのでしょう。。。?
66
+ ※width、heightを指定しているのは元の画像が多き過ぎて
67
+ 小さくするために使っています。

3

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

2017/06/08 01:48

投稿

nantarutia
nantarutia

スコア21

title CHANGED
File without changes
body CHANGED
@@ -11,15 +11,43 @@
11
11
  ```
12
12
 
13
13
  ```html
14
+
14
- 【html部分】
15
+ ・テキストテキストテキスト
16
+ テキストテキストテキストテキストテキストテキストテキストテキストテキスト
17
+ テキストテキストテキストテキストテキストテキストテキストテキストテキスト
18
+
19
+
15
20
  <img src="img1/new1.jpg" alt="" class="frl">
16
- <img src="img1/new1.jpg" alt="" class="frl">
21
+ <img src="img1/new2.jpg" alt=""class="frl">
17
- <img src="img1/new1.jpg" alt="" class="frl">
22
+ <img src="img1/new3.jpg" alt=""class="frl">
18
23
 
19
- <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
20
- テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
21
- </p>
22
24
 
25
+ テキストテキスト
26
+ テキストテキストテキストテキストテキスト
27
+ テキストテキストテキスト
28
+ テキストテキストテキストテキストテキストテキストテキストテキスト
29
+
30
+ テキストテキストテキストテキスト
31
+ テキストテキストテキストテキストテキストテキストテキストテキストテキスト
32
+
33
+ <img src="img1/new4.jpeg" alt=""class="frl">
34
+
35
+ ・テキストテキストテキスト
36
+ テキストテキストテキストテキストテキストテキストテキストテキストテキスト
37
+ テキストテキストテキスト
38
+
39
+
40
+ テキスト
41
+ テキストテキスト
42
+
43
+ テキストテキストテキストテキストテキストテキスト
44
+ テキストテキストテキストテキスト
45
+ テキストテキストテキストテキストテキストテキストテキスト
46
+
47
+ <img src="img1/new5.jpg" alt=""class="frl">
48
+ <img src="img1/new6.jpg" alt=""class="frl">
49
+ <img src="img1/new7.jpg" alt=""class="frl">
50
+
23
51
  ```
24
52
 
25
53
 

2

Code部分修正

2017/06/07 13:26

投稿

nantarutia
nantarutia

スコア21

title CHANGED
File without changes
body CHANGED
@@ -1,6 +1,6 @@
1
1
  現在このような書き方をしていまして、
2
2
 
3
- css部分】
3
+ ```css
4
4
  img.fr {
5
5
  float: right;
6
6
  margin-left: 10px;
@@ -8,7 +8,9 @@
8
8
  width:360px;
9
9
  height:470px;
10
10
  }
11
+ ```
11
12
 
13
+ ```html
12
14
  【html部分】
13
15
  <img src="img1/new1.jpg" alt="" class="frl">
14
16
  <img src="img1/new1.jpg" alt="" class="frl">
@@ -18,6 +20,7 @@
18
20
  テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
19
21
  </p>
20
22
 
23
+ ```
21
24
 
22
25
 
23
26
 

1

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

2017/06/07 13:16

投稿

nantarutia
nantarutia

スコア21

title CHANGED
File without changes
body CHANGED
@@ -1,13 +1,34 @@
1
- すごく初歩的なとなですが、htmlで画像を以下のように並べたとして、
1
+ 現在このような書き方をしていまして
2
2
 
3
+ 【css部分】
4
+ img.fr {
5
+ float: right;
6
+ margin-left: 10px;
3
- <img src="new1.jpg" alt="">
7
+ margin-bottom: 10px;
8
+ width:360px;
4
- <img src="new2.jpg" alt="">
9
+ height:470px;
5
- <img src="new3.jpg" alt="">
10
+ }
6
11
 
7
- <p>
12
+ 【html部分】
13
+ <img src="img1/new1.jpg" alt="" class="frl">
14
+ <img src="img1/new1.jpg" alt="" class="frl">
15
+ <img src="img1/new1.jpg" alt="" class="frl">
16
+
17
+ <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
8
- テキストテキストテキストテキストテキストテキストテキストテキストテキスト
18
+ テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
9
19
  </p>
10
20
 
21
+
22
+
23
+
11
24
  以下のイメージ画面のように画像を並べるにはどのように書いたらいいのでしょうか...
12
25
 
26
+ 現状の状態が、以下のような表示になっていてまして、
27
+
28
+ ![イメージ説明](b731990f1b9bf9ed9136212a7472d601.png)
29
+
30
+ これを、以下の画像のイメージのようにしたいのです。
31
+
13
- ![![イメージ説明](a72a5198f9ee1252c760eee17c5464dd.png)](e2febb218058e20509f5f550aed4c6a0.png)
32
+ ![![イメージ説明](a72a5198f9ee1252c760eee17c5464dd.png)](e2febb218058e20509f5f550aed4c6a0.png)
33
+
34
+ イメージ画像通りの画像配置にするにはどうしたらよいのでしょう。。。?