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

質問編集履歴

2

追加の情報

2021/02/02 02:08

投稿

like-here
like-here

スコア6

title CHANGED
File without changes
body CHANGED
@@ -10,4 +10,93 @@
10
10
  **chrome**
11
11
  ![![chrome](b7b63ebb190ecbf19bdc78ff2905b767.png)]
12
12
 
13
+ ソースコード
14
+ ```html
15
+ <!--上の2つのタイル -->
16
+ <div class="tile is-ancestor is-flex-mobile">
17
+ <div class="tile is-parent">
18
+ <article class="tile is-child notification has-background-link is-info">
19
+ <p class="title">Middle tile</p>
20
+ <p class="subtitle">With an image</p>
21
+ <figure class="image is-4by3">
22
+ <img src="https://1.bp.blogspot.com/-WoPLgzbefuw/X-FcxFa-YjI/AAAAAAABdE0/42S9V3wWi400mGKLEiB_pQT-dqTKT28kwCNcBGAsYHQ/s400/onepiece14_enel.png">
23
+ </figure>
24
+ </article>
25
+ </div>
26
+ <div class="tile is-parent">
27
+ <article class="tile is-child notification has-background-link is-info">
28
+ <p class="title">Middle tile</p>
29
+ <p class="subtitle">With an image</p>
30
+ <figure class="image is-4by3">
31
+ <img src="https://1.bp.blogspot.com/-WoPLgzbefuw/X-FcxFa-YjI/AAAAAAABdE0/42S9V3wWi400mGKLEiB_pQT-dqTKT28kwCNcBGAsYHQ/s400/onepiece14_enel.png">
32
+ </figure>
33
+ </article>
34
+ </div>
35
+ </div>
36
+
37
+ <!--中の3つのタイル -->
38
+ <div class="tile is-ancestor is-flex-mobile">
39
+ <div class="tile is-parent">
40
+ <article class="tile is-child notification has-background-link is-info">
41
+ <p class="title">Middle tile</p>
42
+ <p class="subtitle">With an image</p>
43
+ <figure class="image is-4by3">
44
+ <img src="https://1.bp.blogspot.com/-WoPLgzbefuw/X-FcxFa-YjI/AAAAAAABdE0/42S9V3wWi400mGKLEiB_pQT-dqTKT28kwCNcBGAsYHQ/s400/onepiece14_enel.png">
45
+ </figure>
46
+ </article>
47
+ </div>
48
+ <div class="tile is-parent">
49
+ <article class="tile is-child notification has-background-link is-info">
50
+ <p class="title">Middle tile</p>
51
+ <p class="subtitle">With an image</p>
52
+ <figure class="image is-4by3">
53
+ <img src="https://1.bp.blogspot.com/-WoPLgzbefuw/X-FcxFa-YjI/AAAAAAABdE0/42S9V3wWi400mGKLEiB_pQT-dqTKT28kwCNcBGAsYHQ/s400/onepiece14_enel.png">
54
+ </figure>
55
+ </article>
56
+ </div>
57
+ <div class="tile is-parent">
58
+ <article class="tile is-child notification has-background-link is-info">
59
+ <p class="title">Middle tile</p>
60
+ <p class="subtitle">With an image</p>
61
+ <figure class="image is-4by3">
62
+ <img src="https://1.bp.blogspot.com/-WoPLgzbefuw/X-FcxFa-YjI/AAAAAAABdE0/42S9V3wWi400mGKLEiB_pQT-dqTKT28kwCNcBGAsYHQ/s400/onepiece14_enel.png">
63
+ </figure>
64
+ </article>
65
+ </div>
66
+ </div>
67
+
68
+ <!--下4つのタイル -->
69
+ <div class="columns is-mobile ">
70
+ <div class="column ">
71
+ <p class="title">Middle tile</p>
72
+ <p class="subtitle">With an image</p>
73
+ <figure class="image is-4by3">
74
+ <img src="https://1.bp.blogspot.com/-WoPLgzbefuw/X-FcxFa-YjI/AAAAAAABdE0/42S9V3wWi400mGKLEiB_pQT-dqTKT28kwCNcBGAsYHQ/s400/onepiece14_enel.png">
75
+ </figure>
76
+ </div>
77
+ <div class="column ">
78
+ <p class="title">Middle tile</p>
79
+ <p class="subtitle">With an image</p>
80
+ <figure class="image is-4by3">
81
+ <img src="https://1.bp.blogspot.com/-WoPLgzbefuw/X-FcxFa-YjI/AAAAAAABdE0/42S9V3wWi400mGKLEiB_pQT-dqTKT28kwCNcBGAsYHQ/s400/onepiece14_enel.png">
82
+ </figure>
83
+ </div>
84
+ <div class="column ">
85
+ <p class="title">Middle tile</p>
86
+ <p class="subtitle">With an image</p>
87
+ <figure class="image is-4by3">
88
+ <img src="https://1.bp.blogspot.com/-WoPLgzbefuw/X-FcxFa-YjI/AAAAAAABdE0/42S9V3wWi400mGKLEiB_pQT-dqTKT28kwCNcBGAsYHQ/s400/onepiece14_enel.png">
89
+ </figure>
90
+ </div>
91
+ <div class="column ">
92
+ <p class="title">Middle tile</p>
93
+ <p class="subtitle">With an image</p>
94
+ <figure class="image is-4by3">
95
+ <img src="https://1.bp.blogspot.com/-WoPLgzbefuw/X-FcxFa-YjI/AAAAAAABdE0/42S9V3wWi400mGKLEiB_pQT-dqTKT28kwCNcBGAsYHQ/s400/onepiece14_enel.png">
96
+ </figure>
97
+ </div>
98
+ </div>
99
+
100
+ ```
101
+
13
102
  説明と画像がわかりずらくて大変申し訳ないのですが、何か情報いただけるとありがたいです。。

1

書式の改善

2021/02/02 02:07

投稿

like-here
like-here

スコア6

title CHANGED
File without changes
body CHANGED
@@ -2,12 +2,12 @@
2
2
  chromeとsafariで携帯サイズの時の表示の仕方を同じにしたいと思っています。
3
3
  使っているライブラリは、Bulmaになります。
4
4
  chromeでの表示の仕方は、画面自体が縮むのに対し、縦に延びるように崩れてしまいました。
5
- これを、chromeの様に画面自体が縮む感じで表示すcssなどの指定方法など存在するのでしょうか?
5
+ これを、統一させる方法はるのでしょうか?
6
6
 
7
7
  **Safari**
8
8
  ![safari](9e9b478d044cf25089fc8f86210c532c.png)
9
9
 
10
- **chrome(こっちにしたい)**
10
+ **chrome**
11
11
  ![![chrome](b7b63ebb190ecbf19bdc78ff2905b767.png)]
12
12
 
13
13
  説明と画像がわかりずらくて大変申し訳ないのですが、何か情報いただけるとありがたいです。。