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

質問編集履歴

2

誤字の修正

2021/09/19 16:57

投稿

bibibin07
bibibin07

スコア7

title CHANGED
File without changes
body CHANGED
@@ -47,7 +47,19 @@
47
47
  絶景<br>の旅</div>
48
48
 
49
49
  </div>
50
+ <div class="img">
51
+ <img src="https://s3-ap-northeast-1.amazonaws.com/paspol-images/wp-content/uploads/2020/10/th_shutterstock_756071179.jpg"> </div>
52
+ <div class="text"> The World<br>
53
+ Festival Duide
54
+ - <br>海外の音楽フェス完<br>
55
+ 全ガイド -</div>
56
+
50
57
 
58
+ <div class="img">
59
+ <img src="https://s3-ap-northeast-1.amazonaws.com/paspol-images/wp-content/uploads/2020/09/sekaiisan_tabibitonokoe2.jpg"> </div>
60
+ <div class="text">この世界で死ぬまで<br>
61
+ にしたいこと2000</div>
62
+
51
63
  ```
52
64
 
53
65
  ```css

1

文章の改善

2021/09/19 16:57

投稿

bibibin07
bibibin07

スコア7

title CHANGED
File without changes
body CHANGED
@@ -1,7 +1,62 @@
1
1
  現在もPas-Polというサイトの模写をやっています。display: flex; とflex-direction: column; を使って https://pas-pol.jp/のNEWS欄の下にある画像と文字のような並び。画像と文字を一気に、横並びすることとを試みましたが
2
2
  コードがおかしかったせいか上手くいきませんでした。
3
3
 
4
+ 私の理想は
5
+
4
- ↓の画像は初めのdiv要素だけにdisplay: flexをかけたものです。この作業を6回繰り返すか迷っていたのですが、空白の間隔や、画像の位置が一定であったため、一気に指定できる方法があるのではないかと思いここで質問させていただきました。
6
+ img text
7
+
8
+ img text
9
+
10
+ img text
11
+
5
- 画像を左に、文字をるように横並びにし、それを6つ一括に操作する方法を教えいただけると嬉しいす。
12
+ のような形で画像文字を並ばせことです。ですがdisplay: flexを使うと画像のよう並びになってしす。
13
+ それを改善しようとしてflex-direction: column; を使ったら横並びしなくなって頭を抱えています。
14
+ 6つ一括にimg text のような形
15
+ img text
16
+ img text
17
+ img text
18
+ img text
19
+ img text
20
+ img text
6
- 回答よろしくお願いいたします。
21
+ にするにはどうすれば良いですか。回答よろしくお願いいたします。
22
+
7
- ![イメージ説明](d0688850c0b9f1080a73730fc2635448.png)
23
+ ![イメージ説明](334239bcbf7a1b88cfc49317a7fb36be.png)
24
+
25
+ ```HTML
26
+ <div class="wrap">
27
+ <div class="img">
28
+ <img src="https://s3-ap-northeast-1.amazonaws.com/paspol-images/wp-content/uploads/2021/09/paspol_closing-2.jpg"> </div>
29
+ <div class="text">地球一周 365日
30
+ 世<br>界遺産絶景の旅</div>
31
+
32
+
33
+ <div class="img">
34
+ <img src="https://s3-ap-northeast-1.amazonaws.com/paspol-images/wp-content/uploads/2021/07/summer_postcard-2.jpg"> </div>
35
+ <div class="text"> 365日 京都 絶景の<br>旅</div>
36
+
37
+
38
+ <div class="img">
39
+ <img src="https://s3-ap-northeast-1.amazonaws.com/paspol-images/wp-content/uploads/2021/05/springphoto.jpg"></div>
40
+ <div class="text">365日 北海道 絶景<br>
41
+ 日めくりカレンダー</div>
42
+
43
+
44
+ <div class="img">
45
+ <img src="https://s3-ap-northeast-1.amazonaws.com/paspol-images/wp-content/uploads/2020/12/2020-12-10-16.59.15.jpg"></div>
46
+ <div class="text">365日 北海道
47
+ 絶景<br>の旅</div>
48
+
49
+ </div>
50
+
51
+ ```
52
+
53
+ ```css
54
+ .wrap {
55
+ display: flex;
56
+ flex: wrap;
57
+ }
58
+
59
+ .img img {
60
+ width: 320px;
61
+
62
+ ```